Features

Floating Toolbar

A floating toolbar appears on the right side of the slides with quick access to common actions:

Button Action
Save Save edits to file
Copy Copy QMD to clipboard
Add Opens submenu with Text, Slide, and Arrow options

The toolbar is draggable—grab the handle at the top to reposition it.

Adding New Elements

Click the Add button to open a submenu with options:

  • Text: Creates a new editable text block on the current slide. Position and style it like any other editable element.
  • Slide: Inserts a new blank slide after the current one. The slide will be saved with a ## New Slide heading.
  • Arrow: Adds an arrow to the current slide (requires quarto-arrows extension). See Arrow Support below.

New elements are marked with a dashed border to distinguish them from original content.

Rich Text Editing

Click the edit button on any editable text element to open the Quill rich text editor with a formatting toolbar:

Button Format Saved As
B Bold **text**
I Italic *text*
U Underline [text]{.underline}
S Strikethrough ~~text~~
Color Text Color [text]{style='color: ...'}
Background Background Color [text]{style='background-color: ...'}
Alignment Left/Center/Right Fenced div with style="text-align: ..."

Click the edit button again to exit edit mode.

TipInteractive Demo

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

Color Picker

The color picker provides three ways to select colors:

  1. Unset - Remove any color formatting (returns to default)
  2. Preset Colors - A palette of 18 commonly used colors
  3. Custom… - Opens the system color picker for any color

The preset palette appears when you click the color or background color button in the toolbar.

Brand Color Support

If your project uses Quarto’s brand system with a _brand.yml file, the color picker will automatically use your brand palette instead of the default colors.

Setup

Create a _brand.yml file in your project directory:

color:
  palette:
    primary: "#FF6B6B"
    secondary: "#4ECDC4"
    accent: "#2C3E50"

Shortcode Output

When you use a brand color, it saves using Quarto’s brand shortcode syntax:

[text]{style='color: {{< brand color primary >}}'}

This ensures your colors stay synchronized with your brand definition. Non-brand colors (from the custom picker) save as raw values.

Undo/Redo

Made a mistake? Use keyboard shortcuts to undo and redo your changes:

  • Ctrl+Z (or Cmd+Z on Mac) to undo the last action
  • Ctrl+Y or Ctrl+Shift+Z (or Cmd+Shift+Z on Mac) to redo

Undo/redo tracks:

  • Element position changes (drag)
  • Element size changes (resize)
  • Element rotation changes
  • Font size changes
  • Text alignment changes
Note

Text content editing (in edit mode) uses the browser’s native undo, which is separate from the extension’s undo stack.

Image Sizing Tip

Sometimes you might find that images don’t stay the size that you dragged them to be. This is because the default is to set max-width and max-height to 95%. You can fix this by adding the following to your SCSS file:

.reveal img {
  max-width: unset;
  max-height: unset;
}

Arrow Support

The extension integrates with quarto-arrows to add arrows to your slides visually.

Setup

First, install the quarto-arrows extension:

quarto add EmilHvitfeldt/quarto-arrows

Then add both filters to your YAML header:

revealjs-plugins:
  - editable
filters:
  - editable
  - arrows
Note

If you try to add an arrow without the quarto-arrows extension installed, you’ll see a warning with install instructions. You can still add arrows in the browser—they just won’t render when you next run quarto render until the extension is installed.

Using Arrows

Click Add → Arrow to create an arrow on the current slide. The arrow appears centered with draggable handles:

  • Blue handle: Start point
  • Green handle: End point
  • Drag body: Click and drag anywhere on the arrow line to move the entire arrow

Curved Arrows

Toggle Curve in the toolbar (when arrow is selected) to enable Bezier curve mode. Two additional control point handles appear:

  • Orange handle: First control point (influences curve near start)
  • Purple handle: Second control point (influences curve near end)

Dashed guide lines show the connection between endpoints and their control points.

Selection

Only the currently selected arrow shows its handles and controls. Click on an arrow to select it, or click elsewhere to deselect.

Arrow Styling

When an arrow is selected, the toolbar switches to show styling controls:

  • Curve: Toggle between straight and curved arrows
  • Color: Color presets (including brand colors) plus custom color picker
  • Width: Line thickness (1-20px)
  • Head: Arrowhead style (arrow, stealth, diamond, circle, square, bar, or none)
  • Dash: Line pattern (solid, dashed, or dotted)
  • Line: Line style (single, double, or triple parallel lines)
  • Opacity: Transparency slider (0 to 1)

Label options:

  • Label text: Add a text label to the arrow
  • Label position: Choose where the label appears (start, middle, or end of the arrow)
  • Label offset: Distance from the arrow line (positive values place label above/left, negative below/right)

Labels automatically rotate to follow the arrow direction and update color to match the arrow.

Click anywhere outside the arrow to deselect it and return to the normal toolbar. Style changes are applied immediately and saved with the arrow.

Saved Format

Arrows are saved as quarto-arrows shortcodes:

{{< arrow from="100,200" to="400,300" position="absolute" >}}

Curved arrows include control points:

{{< arrow from="100,200" to="400,300" control1="150,100" control2="350,400" position="absolute" >}}

Styled arrows include additional attributes:

{{< arrow from="100,200" to="400,300" color="#ff0000" width="4" head="stealth" dash="dashed" opacity="0.8" position="absolute" >}}

Arrows with labels:

{{< arrow from="100,200" to="400,300" label="Step 1" label-position="middle" label-offset="10" position="absolute" >}}