Reveal.js online editor

Write, Run & Share Reveal.js code online using OneCompiler's Reveal.js online editor for free. It's one of the robust, feature-rich online editors for Reveal.js. Getting started with the OneCompiler's Reveal.js online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Reveal.js' and start writing code to learn and test online without worrying about tedious process of installation.

About Reveal.js

Reveal.js builds presentations out of HTML. Each slide is a <section>, and the framework handles navigation, transitions, and keyboard controls. You can style slides with CSS, drop in code blocks, and present straight from the browser.

Syntax help

Setup

Load the core stylesheet, a theme, and the script. The slides go inside .reveal > .slides, then you start the deck with Reveal.initialize().

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css" />

<div class="reveal">
  <div class="slides">
    <section>First slide</section>
    <section>Second slide</section>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script>
  Reveal.initialize();
</script>

Slides

Every top-level <section> is a slide. Use the arrow keys to move between them.

<section>
  <h2>Agenda</h2>
  <ul>
    <li>Background</li>
    <li>Approach</li>
    <li>Results</li>
  </ul>
</section>

Vertical slides

Nest sections to stack slides vertically under a topic. The audience moves down with the down arrow.

<section>
  <section>Topic</section>
  <section>Detail one</section>
  <section>Detail two</section>
</section>

Fragments

Add class="fragment" to reveal elements one step at a time as you advance.

<section>
  <p class="fragment">Appears first</p>
  <p class="fragment">Then this</p>
</section>

Configuration

Pass options to initialize to control navigation and display.

Reveal.initialize({
  hash: true,          // update the URL per slide
  controls: true,      // arrow buttons
  progress: true,      // progress bar
  slideNumber: true,
  transition: 'slide', // none / fade / slide / convex / zoom
});

Themes

Swap the theme stylesheet to change the look. Reveal ships several, including white, league, night, and solarized.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css" />