The Ripple Editor

editorcanvastoolboxstructureoverview

The Ripple Editor is where you design your space. Every Ripple you create opens in the editor, giving you a visual workspace to place elements, arrange layouts, and configure interactivity.

Editor Layout

The editor is divided into three main areas:

  • Canvas (centre) — the visual workspace where you place and arrange elements
  • Toolbox (left panel) — where you add new elements and configure their properties
  • Structure panel (right panel) — where you manage scenes, layers, snapshots, and actions

You can collapse either side panel to give yourself more canvas space. The editor remembers your panel preferences between sessions.

The Canvas

The canvas is your design surface. It represents the space participants will see when they join your Ripple. You can:

  • Click to select elements
  • Drag to move elements around
  • Resize elements using their handles
  • Zoom and pan to navigate larger layouts
  • Drag and drop images directly from your desktop onto the canvas

The canvas has a fixed reference size (which you can configure in Ripple settings). At runtime, it scales to fit each participant's screen whilst maintaining proportions.

The Toolbox (Left Panel)

The toolbox is where you add elements to your canvas. The available element types are:

  • Drop — participant seats that show circular video feeds
  • Image — pictures, icons, and decorative graphics
  • Shape — rectangles, ellipses, lines, and arrows
  • Text — text labels, headings, and instruction blocks
  • Embed — custom HTML, CSS, and JavaScript injections
  • Zone — breakout areas for audio isolation or screen share display
  • Audio — sound files that can be triggered by actions
  • Ripple — live-linked card that shows presence and navigates to another Ripple in your Wave

When you select an element on the canvas, the toolbox switches to show that element's properties — position, size, styling, actions, and more.

The Structure Panel (Right Panel)

The structure panel has several tabs for organising your Ripple:

  • Scenes — manage multiple layouts and backgrounds (see Scenes)
  • Layers — control element visibility with toggleable groups (see Layers)
  • Snapshots — save and restore drop positions (see Snapshots)
  • Actions — view and manage actions across all elements

Typical Workflow

A common workflow for building a Ripple:

  1. Set a background — upload an image or video in the Scenes panel to set the mood
  2. Place drops — add participant seats where people will sit
  3. Add visual elements — images, shapes, and text to create the environment
  4. Configure interactivity — attach actions to elements (click to change scene, play sounds, show/hide layers)
  5. Test — preview your Ripple to see it as participants will

Keyboard Shortcuts

The editor supports common shortcuts:

  • Ctrl+Z / Cmd+Z — undo
  • Ctrl+Shift+Z / Cmd+Shift+Z — redo
  • Delete / Backspace — delete selected elements
  • Ctrl+C / Cmd+C — copy
  • Ctrl+V / Cmd+V — paste
  • Ctrl+D / Cmd+D — duplicate

Locking Elements

You can lock any element or zone to prevent it from being accidentally moved or resized. This is especially useful for backgrounds, floor overlays, and other elements you have carefully positioned.

How to Lock

  • Right-click an element and select Lock
  • Layers panel -- click the padlock icon on an element's row
  • Layers panel (by type) -- click the padlock on a type group header (e.g. Shapes, Images) to lock or unlock all elements of that type at once
  • Element header -- click the padlock icon in the element header bar above the properties panel

What Locking Does

  • Locked elements can still be selected and inspected, but they cannot be moved, resized, or nudged with arrow keys
  • When selected, a locked element shows an amber dashed outline with a padlock badge instead of the usual resize handles
  • Non-position properties (colours, visibility conditions, actions) remain fully editable
  • Locking is editor-only and has no effect on how participants experience your Ripple at runtime

Groups and Duplicates

  • Locking any element in a group locks all members of that group
  • Duplicating or pasting a locked element creates an unlocked copy, ready to position

Unlocking

Use the same methods as locking: right-click and select Unlock, click the padlock in the layers panel, or click the padlock in the element header bar.

What's Next?

Explore each element type and feature in detail: