WebSlides: a new open source way to build beautiful presentations that run in your browser

Everyone loves stories. People share content that makes them feel inspired. We need stories to know we’re not alone.

Slide decks are an excellent way to tell these stories. And there are already plenty of great tools out there for this like Powerpoint and Keynote.

But nobody loves HTML presentations. Literally, no one. “I love HTML presentations” returns zero results in Google search. 🤔

I’m a designer and developer who works all day on top of the giant platform that is the web. It always felt awkward and old-fashion for me to load up a separate program on my computer and use Powerpoint and Keynote — with their strange proprietary formats — then have to email it to someone.

So I built WebSlides.

WebSlides are all about telling a story, then sharing it in a beautiful way: hypertext, clean markup, and lovely CSS as narrative elements.

Designing in WebSlides can be just as fast as with Powerpoint. You can get by with a basic understanding of HTML and CSS. Just choose a demo and customize it in minutes.

Designers, developers, marketers, and journalists now have a web-native presentation tool with:

• Quick navigation keyboard shortcuts such (and both horizontal and vertical sliding).
• Permalinks that take you directly to a specific slide.
• A slide counter.
• +40 components including covers, cards, quotes, and forms
• A wide variety of backgrounds: colors, gradients, images, and videos.
• Flexible blocks with auto-fill and equal height.
• 500+ SVG icons thanks to Font Awesome

Demos: Landings · Portfolios · Keynote.

Code Poetry

Here’s some HTML source code that shows you how it’s done. This code is clean, scalable, and well-documented. It uses intuitive markup with popular naming conventions. There’s no need to overuse classes or nesting.

Each parent <section> in the #webslides element is an individual slide:

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary aligncenter">
    <div class="wrap">
      <h2>.wrap = container 1200px</h2>
    </div>
  </section>
</article>

Designing with purpose

WebSlides is free and open source. I built it because we need a platform for beautiful storytelling. Let’s look at what is happening:

• Medium = Beautiful articles.
• Typeform = Beautiful forms.
• WebSlides = Beautiful presentations and longforms.

Demo: Why WebSlides? — Good karma.

I welcome pull requests to WebSlides so we can keep improving and expanding this tool.

Please share this post to anyone you think might be interested in using this tool. I’ll look forward to reading your comments. Feel free to email me if you have any questions.

Special thanks to Luis Sacristán and Jenn Schiffer (SimpleSlides was a revelation). 👍 You can also follow updates on Twitter, Dribbble, and Github.