Getting Started

Installation

Install the extension from the command line:

quarto add emilhvitfeldt/quarto-revealjs-editable

This will install the extension under the _extensions subdirectory. If you’re using version control, you will want to check in this directory.

Basic Setup

Add the extension to your Quarto revealjs presentation by including both the plugin and filter in your YAML header:

---
title: "My Presentation"
format: revealjs
revealjs-plugins:
  - editable
filters:
  - editable
---

Making Elements Editable

Using Modify Mode (recommended)

You don’t need to mark anything in your source. Render the deck normally, then click the Modify button in the menu bar at the top of the presentation. Every element on the current slide that can be made editable is highlighted with a green outline — click one to activate it. Press Escape to exit modify mode without activating anything.

Modify mode supports images, videos, paragraphs, lists, tables, code blocks, code chunks, diagrams, equations, slide titles, callouts, columns, fenced divs, and arrows. See the supported types table for the full list.

Pre-marking elements with .editable

If you already know an element will be edited, you can add the .editable class to make it active immediately on render — no need to enter modify mode first. This is fully supported alongside modify mode.

Add the .editable class to any image:

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

Wrap text in a fenced div with the .editable class:

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

Or use the shorthand syntax:

::: editable
some text here
:::

Note

The extension will completely rewrite the {} attributes when saving, so any custom attributes you add will be replaced with the positioning information.

Interacting with Elements

Once you have re-rendered the slides, each editable element (whether activated via modify mode or pre-marked with .editable) becomes interactive:

• Move: Drag the element to reposition it
• Resize: Use the corner handles (hold Shift to preserve aspect ratio)
• Rotate: Use the orange circular handle at the top center (hold Shift to snap to 15° increments)

TipInteractive Demo

Note: In this demo, the Save button will download a file. With quarto preview, it saves directly to your .qmd file.

Saving Your Changes

Once you are happy with the layout, save using one of these methods:

• Save button: Click the Save button in the menu bar at the top. This prompts you to save a file — choose the same folder you are working in to overwrite the document.
• Copy button: Click the Copy button in the menu bar to copy the updated QMD to your clipboard, then paste it into your source file. Useful if you want to review changes before overwriting, or if your browser’s save dialog isn’t convenient.
• Menu: Press M, go to Tools, click “Save Edits”.

Re-render after saving, and the elements should be locked in place.

Preparing for Final Presentation

Once you’re done editing and want to present your final slides without the editing UI:

Option 1: Remove the extension (recommended)

Remove both the plugin and filter from your YAML:

# Remove these lines:
# revealjs-plugins:
#   - editable
# filters:
#   - editable

Then re-render. Your saved positions use .absolute positioning which works without the extension.

Option 2: Hide the menu bar with CSS

If you want to keep the extension installed but hide the menu bar, add to your custom CSS:

#editable-toolbar {
  display: none;
}

/* Optionally also hide the edit controls on elements */
.editable-container:hover .resize-handle,
.editable-container:hover .rotate-handle,
.editable-container:hover .editable-font-controls {
  display: none;
}

Security Note

The extension embeds the source QMD filename in the HTML for the save feature. If you don’t want this in your public slides, remove editable from filters before your final render.