slides

for

developers

>

_

Globe GIF by MIDgraph

Slides is a presentation platform for developers. We're built on top of the reveal.js open source presentation framework, which was created by our co-founder.

Over the past few years we've been building a suite of developer-focused presentation tools, like...

import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1.PRESENTING CODE

Built-in syntax highlighting with support for line-highlights.

Walk through your code using multiple highlight steps.

Powerful highlighting features packed into an intuitive UI.

1.PRESENTING CODE

Customize anything with our
real-time CSS editor.

2.CUSTOM STYLES

Style specific elements or slides by giving them class names.

2.CUSTOM STYLES

Go beyond the editing options with the HTML editor.

3.CUSTOM HTML

4.IFRAMES

Embed code editors, 3D models, spreadsheets, and more with iframes.

For example, here's a live code editor embedded from CodePen.

5.DEFINE API

{
  "title": "My Deck",
  "width": 1024,
  "height": 576,
  "transition": "slide",
  "slides": [
    {
      "notes": "Top secret speaker notes",
      "blocks": [
        {
          "type": "text",
          "value": "Hello world"
        },
        {
          "type": "iframe",
          "value": "https://slides.com/news/groups/embed"
        }
      ]
    }
  ]
}

Create prefilled decks with the Define API. Form POST this

https://slides.com/decks/define

Built-in \( \LaTeX \) typesetting makes it dead simple to show math formulas.

6.LaTeX

f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi

f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi

7.EXPORTS

Download the complete reveal.js source code for your presentation. Great for offline presenting,
self-hosting or backups.

We provide PDF and PPT exports, too.

HTML

CSS

Slides for Developers is available today. Jump right into the editor and try it out.

EDIT AN EXAMPLE PRESENTATION

{
	"title": "Slides for Developers",
	"theme-font": "montserrat",
	"transition": "slide",
	"slides": [
		{
			"blocks": [
				{
					"type": "text",
					"value": "Focus the code block below to try our highlighting options.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 34,
					"width": 800
				},
				{
					"type": "code",
					"value": "import React, { useState } from 'react';\n \nfunction Example() {\n  const [count, setCount] = useState(0);\n \n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>\n        Click me\n      </button>\n    </div>\n  );\n}",
					"font-size": 140,
					"x": 81,
					"y": 210,
					"width": 800,
					"height": 443,
					"language": "javascript",
					"theme": "ir-black",
					"line-numbers": "4,8-11|3|9|8-11",
					"frame": "osx"
				}
			]
		},
		{
			"blocks": [
				{
					"type": "text",
					"value": "Embed anything with <strong>iframes</strong>. Here's a CodePen project.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 34,
					"width": 800
				},
				{
					"type": "iframe",
					"value": "https://codepen.io/hakimel/embed/xkKrC?height=300&theme-id=37007&default-tab=js,result&editable=true",
					"font-size": 140,
					"x": 81,
					"y": 210,
					"width": 800,
					"height": 469
				}
			]
		},
		{
			"background-color": "#cccccc",
			"blocks": [
				{
					"type": "text",
					"value": "Enable the <strong>Developer Mode</strong> in the in the editor settings.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 34,
					"width": 800
				},
				{
					"type": "video",
					"value": "https://s3.amazonaws.com/media-p.slid.es/videos/23194/pfaYfYJO/screen_recording_2020-01-27_at_19.mp4",
					"controls": false,
					"autoplay": true,
					"muted": true,
					"loop": true,
					"x": 81,
					"y": 210,
					"width": 659.578,
					"height": 443
				}
			]
		},
		{
			"background-color": "#cccccc",
			"blocks": [
				{
					"type": "text",
					"value": "This gives you access to the <strong>HTML editor</strong>.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 34,
					"width": 800
				},
				{
					"type": "video",
					"value": "https://s3.amazonaws.com/media-p.slid.es/videos/23194/hGg1uufh/screen_recording_2020-01-27_at_20.mp4",
					"controls": false,
					"autoplay": true,
					"muted": true,
					"loop": true,
					"x": 81,
					"y": 210,
					"width": 768.814,
					"height": 457.476
				}
			]
		},
		{
			"blocks": [
				{
					"type": "text",
					"value": "We support inline and block-level \\( \\LaTeX \\) typesetting. Double-click to edit.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 34,
					"width": 800
				},
				{
					"type": "text",
					"value": "Here's a math block, click to focus or double-click to edit.",
					"format": "p",
					"font-size": 180,
					"align": "left",
					"x": 81,
					"y": 359,
					"width": 800
				},
				{
					"type": "math",
					"value": "f(x) = \\int_{-\\infty}^\\infty\n    \\hat f(\\xi)\,e^{2 \\pi i \\xi x}\n    \\,d\\xi",
					"font-size": 130,
					"x": 81,
					"y": 522
				}
			]
		}
	]
}

You'll need to sign up or log in

Copy of Slides for Developers

By Suchita Doshi

Copy of Slides for Developers

Slides is a presentation platform for developers built on top of the reveal.js open source HTML presentation framework. We offer a wide range of developer-focused features like step-by-step code highlighting, a CSS editor, LaTeX typesetting and more.

slides

for

developers

>

_

EDIT AN EXAMPLE PRESENTATION

Copy of Slides for Developers

More from Suchita Doshi