<form action="https://slides.com/decks/define" method="POST" target="_blank">
  <textarea name="definition">
{ 
  "title": "My Deck",
  "loop": false,
  "slide-number": true,
  "theme-font": "overpass",
  "transition": "convex",
  "slides": [
    {
      "notes": "These are speaker notes, the'll only appear when this deck is presented.",
      "blocks": [
        {
          "type": "text",
          "value": "Deck JSON Example",
          "format": "h1"
        },
        {
          "type": "text",
          "value": "This is an example of how to use JSON to define a deck."
        }
      ]
    },
    {
      "blocks": [
        {
          "type": "text",
          "value": "Syntax highlighted code",
          "format": "h1"
        },
        {
          "type": "code",
          "value": "a {\n  color: red;\n}",
          "language": "css",
          "height": 200,
          "word-wrap": true,
          "line-numbers": "1|2|3"
        }
      ]
    },
    {
      "blocks": [
        {
          "type": "text",
          "value": "Iframes",
          "format": "h1"
        },
        {
          "type": "iframe",
          "value": "https://slides.com/news/make-better-presentations/embed"
        }
      ]
    },
    {
      "blocks": [
        {
          "type": "text",
          "value": "Images",
          "format": "h1"
        },
        {
          "type": "image",
          "value": "https://s3.amazonaws.com/static.slid.es/images/screenshots/v1/slides-homepage-1440x900.png"
        }
      ]
    },
    {
      "blocks": [
        {
          "type": "text",
          "value": "Tables",
          "format": "h1"
        },
        {
          "type": "table",
          "border-width": 8,
          "data": [
            ["A","B","C"],
            [ 1,  2,  3 ]
          ]
        }
      ]
    },
    {
      "background-image": "https://s3.amazonaws.com/static.slid.es/images/screenshots/v1/slides-homepage-1440x900.png",
      "background-size": "cover"
    },
    {
      "blocks": [
        {
          "type": "text",
          "value": "Default text format"
        },
        {
          "type": "text",
          "value": "If no text format is specified we try to pick an appropriate default, like this h1 > h2 combo."
        }
      ]
    },
    {
      "html": "<h1>This was written using HTML</h1>"
    },
    {
      "markdown": "This was written using **Markdown**! <https://daringfireball.net/projects/markdown/syntax>"
    }
  ]
}</textarea>
​
  <button type="submit">Create New Deck with Prefilled Data</button>
</form>
body {
  display: flex;
  min-height: 80vh;
  background: #f5f5f5;
}

form {
  margin: auto;
}

textarea {
  font-family: monospace;
  width: 80vw;
  height: 50vh;
  border: 0;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  resize: none;
}

button {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  padding: 10px 12px;
  border: 0;
  background: #00bfff;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.