revealjs-editable

A reveal.js plugin that adds an in-browser edit mode to any self-contained HTML presentation. Click to edit slide text, then download the result as a new HTML file — no server, no build step.

Features

• ✏ Edit / ✓ Done editing button fixed in the top-right corner
• Click any text element on any slide to edit it inline
• Floating formatting toolbar on text selection: Bold, Italic, Underline, ~~Strikethrough~~, text colour, clear formatting
• Keyboard navigation is suspended while editing so typing doesn't advance slides
• ⬇ Save HTML downloads a standalone copy of the deck with your edits baked in
• Press E to toggle edit mode, Esc to exit
• Speaker notes (<aside class="notes">) are excluded from editing

Install

npm install revealjs-editable

Usage

With a bundler (Vite, webpack, etc.)

import Reveal from 'reveal.js';
import RevealEditable from 'revealjs-editable';

Reveal.initialize({
  plugins: [ RevealEditable ]
});

CDN / <script> tag

<script src="https://unpkg.com/revealjs-editable/revealjs-editable.js"></script>

<script>
  Reveal.initialize({
    plugins: [ RevealEditable ]
  });
</script>

Inline (single-file deck)

Paste the contents of revealjs-editable.js into a <script> tag before the script that calls Reveal.initialize, then add RevealEditable to the plugins array:

<script>
  /* paste revealjs-editable.js contents here */
</script>

<script>
  Reveal.initialize({
    plugins: [ RevealNotes, RevealEditable ]
  });
</script>

Customising editable elements

The plugin targets these selectors by default:

h1, h2, h3, h4, h5, p, li, .editable

Edit the SELECTORS array near the top of revealjs-editable.js to add or remove element types.

How the save works

When you click ⬇ Save HTML, the plugin:

1. Exits edit mode (strips all contenteditable attributes and outline styles)
2. Temporarily removes the toolbar and formatting bar from the DOM
3. Serialises document.documentElement.outerHTML
4. Re-attaches the toolbar and formatting bar
5. Triggers a browser download of the resulting HTML file

The downloaded file is fully self-contained and contains your edits.

Compatibility

Requires reveal.js 4 or later (uses the init(deck) plugin API).

Testing

npm install
npm test

Runs a small Puppeteer-driven browser test suite (test/*.test.js) against a system-installed Chrome/Chromium. Set PUPPETEER_EXECUTABLE_PATH to point at a specific browser binary if none of the default locations are found.

License

MIT