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() {
  return (
    <div>
      <button>
        Click me
      </button>
    </div>
  );
}

1.PRESENTING CODE

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

Walk through your code using multiple highlight steps.

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

Walk through your code using multiple highlight steps.

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

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.

Style specific elements or slides by giving them class names.

2.CUSTOM STYLES

Customize anything with our
real-time CSS editor.

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.

4.IFRAMES

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

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

Use freehand drawing to annotate your code.

4.ANNOTATION

function intersection(rectA, rectB) {
  const left = Math.max(rectA.x, rectB.x);
  const top = Math.max(rectA.y, rectB.y);
  const right = Math.min(rectA.x + rectA.width, rectB.x + rectB.width);
  const bottom = Math.min(rectA.y + rectA.height, rectB.y + rectB.height);

  return {
    x: left,
    y: top,
    width: Math.max(0, right - left),
    height: Math.max(0, bottom - top)
  };
}

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

JS

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

SIGN IN

Go to slides.com/news/developers and click "Make a copy" if you want to edit this deck.

Slides for Developers

By Slides News

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.

  • 57,341

More from Slides News