<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.