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.
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\xi7.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.
Go to slides.com/news/developers and click "Make a copy" if you want to edit this deck.
Slides for Developers
By Ko Ko Ye
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.
