Editable Extension for Quarto Revealjs

This Revealjs plugin lets you edit slide elements — images, videos, text, tables, code, equations, titles, arrows, and more — directly in the rendered presentation. Move, resize, rotate, restyle, and save changes back to your .qmd source.

Try It Out

Click inside the embedded presentation below to interact with the editable elements:

Note

In this demo, the Save button will download a file. In your own projects with quarto preview, it will save changes directly back to your .qmd file.

Or open in a new tab for the full experience.

Key Features

  • Modify mode — click any element on a rendered slide to make it editable, no source markup required
  • Move elements by dragging them to reposition
  • Resize elements using corner handles (hold Shift to preserve aspect ratio)
  • Rotate elements using the orange circular handle (hold Shift to snap to 15° increments)
  • Add arrows with straight or curved (Bezier) paths via quarto-arrows integration
  • Rich text editing with formatting toolbar
  • Brand color support via Quarto’s _brand.yml
  • Keyboard navigation for accessibility
  • Undo/Redo support

Quick Start

Install the extension:

quarto add emilhvitfeldt/quarto-revealjs-editable

Add to your YAML header:

revealjs-plugins:
  - editable
filters:
  - editable

Render normally, then click the Modify button in the menu bar to make any element on the current slide editable. No source markup required.

Optionally, pre-mark elements with {.editable} to have them active immediately without entering modify mode first:

![](image.png){.editable}

::: {.editable}
some text here
:::

See the Getting Started guide for more details.

Demo