The define API lets you create a presentation programatically and add it to the current user's Slides account. Presentations you create can include any of the content types that the Slides editor supports. You can even include live data from other sites via iframes.

For example, if you operate a web-based charting service, you can let your users create a presentation containing their fully interactive charts at the click of a button.

If the user isn't already signed in to Slides, they will automatically be prompted to authenticate or sign up. Once signed in, they are able to review the deck and confirm that they want to save it to their account. Here's what that process looks like:

The Request

To start the process you'll need to have the user submit an HTML form towards the http://slides.com/decks/define endpoint. The form needs to contain an input field with the name definition and the value of this input should be the JSON representation of a deck. Once the form is submitted, we'll automatically redirect the user to the appropriate page.

Here's a fully working example:

JSON Examples

Here's the bare minimum JSON you'll need to describe a deck.

{
  "title": "My Deck",
  "slides": [
    { "html": "<h1>Slide 1</h1>" },
    { "html": "<h1>Slide 2</h1>" }
  ]
}

If you want to group multiple slides into one vertical stack you can nest them in an array:

{
  "title": "My Deck",
  "slides": [
    { "markdown": "# Slide 1" },
    [
        { "markdown": "# Vertical Slide 2.1" },
        { "markdown": "# Vertical Slide 2.2" }
    ],
    { "markdown": "# Slide 3" }
  ]
}

To preserve an editable relationship between multiple blocks, use a group block with a nested blocks array. Groups can be nested up to six levels deep. Coordinates for all nested blocks remain relative to the slide, not to their parent group.

{
  "title": "Grouped content",
  "slides": [
    {
      "blocks": [
        {
          "type": "group",
          "x": 100,
          "y": 80,
          "width": 600,
          "height": 320,
          "blocks": [
            {
              "type": "text",
              "x": 100,
              "y": 80,
              "width": 300,
              "value": "Grouped title",
              "format": "h2"
            },
            {
              "type": "image",
              "x": 450,
              "y": 80,
              "width": 200,
              "height": 200,
              "value": "https://example.com/image.png"
            }
          ]
        }
      ]
    }
  ]
}

The following JSON demonstrates most of the available options.

Note that there are three different ways to define slide content, blocks, HTML and Markdown. The benefit of using content blocks is that the elements you define are separately editable inside of the Slides editor. If you specify content as a string of HTML or Markdown, it will all be grouped into one element and edited as a text box.

{
  "title": "My Deck",
  "description": "Description of My Deck.",
  "width": 1024,
  "height": 576,
  "auto-slide-interval": 0,
  "slide-number": false,
  "loop": false,
  "theme-color": "white",
  "theme-font": "overpass",
  "transition": "slide",
  "slides": [
    {
      "id": "an-optional-slide-id",
      "background-color": "#cccccc",
      "background-image": "https://static.slid.es/images/screenshots/v1/slides-homepage-1440x900.png",
      "background-size": "cover",
      "notes": "My speaker notes",
      "blocks": [
        {
          "type": "text",
          "value": "Hello world!",
          "format": "h2"
        },
        {
          "type": "image",
          "value": "https://static.slid.es/images/screenshots/v1/slides-homepage-1440x900.png"
        },
        {
          "type": "iframe",
          "value": "https://slides.com/news/make-better-presentations/embed"
        },
        {
          "type": "table",
          "data": [
              ["A","B","C"],
              [ 1,  2,  3 ]
          ]
        }
      ]
    },
    {
      "background-image": "https://static.slid.es/images/screenshots/v1/slides-homepage-1440x900.png"
    },
    {
      "html": "<h1>HTML Slide</h1>"
    },
    {
      "markdown": "**Markdown** slide! <https://daringfireball.net/projects/markdown/syntax>"
    }
  ]
}

JSON Spec

[ "slide 1", ["slide 2.1", " slide 2.2" ], "slide 3" ]

{"foo": "bar"}

[
  ["A","B","C"],
  [ 1,  2,  3 ]
]