Studio Design

Widget Toolbar Actions

5 min readUpdated

Use the widget toolbar to duplicate, reorder, align, and reuse layout elements across scenes.

The widget toolbar is one of the fastest ways to work efficiently in Studio.

It helps you adjust structure without reopening settings for every small change.

Where to find it

The toolbar floats at the top of the canvas as a single rounded pill. It is always visible. When you select a widget, the relevant actions light up; with nothing selected, they fade to indicate they are unavailable.

Each action is a compact icon button so the toolbar stays out of your way even when the side panels are open. Hover over any button to see a tooltip with its name.

What the toolbar is for

Use the widget toolbar when you want to:

  • Undo or redo your last change
  • Duplicate a widget
  • Change its stacking order
  • Align widgets, space them evenly, or tidy a group in one click
  • Lock a widget so it can't be moved by accident
  • Move it to another scene
  • Copy it to another scene
  • Snap it to the grid
  • Delete it

These actions are especially helpful when you are building a sequence of related scenes that should feel consistent.

Undo and redo

The first two buttons in the pill step backward and forward through your recent edits — the same Cmd/Ctrl + Z (undo) and Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y (redo) shortcuts work everywhere in the editor, not just with a widget selected.

Duplicate

Duplicate is the fastest way to preserve styling and layout while changing the content.

Use it for:

  • Repeated question cards
  • Matching button styles
  • Consistent labels
  • Cloned score or hint areas

A strong pattern is to duplicate first, then edit the content. That is usually faster and more consistent than rebuilding from scratch.

If Duplicate, Copy to scene, or copy and paste tells you a widget "isn't available right now", that widget has been paused and can't be copied for the moment — the ones already in your lesson keep working. See When a widget is greyed out.

Align & distribute

The alignment button opens a menu for lining widgets up, spacing them evenly, and tidying a messy group in one click. Beside it, Lock freezes the selected widgets so you can't drag or edit them by accident.

Both are covered in Aligning and distributing widgets.

Move to scene

Move to scene removes the widget from the current scene and places it in another one.

Use it when:

  • A widget was created in the wrong scene
  • A prompt belongs later in the flow
  • A scene is being simplified and content needs to relocate

This is useful for restructuring without losing your work. Select several widgets with Shift-click to move them together: a question and its prompt travel as one. _Step by step: Split a crowded scene into two._

Copy to scene

Copy to scene keeps the original widget where it is and creates a copy in another scene.

Use it when:

  • You want a repeated instruction block
  • You need the same score display in several scenes
  • You are building a recurring callout or navigation control
  • You want a template-like starting point for another step

Copying a button copies what it does too, including any path you drew from it on the Lesson Graph. To make a second version of a question on another scene, copy the question and its text, and add a fresh Submit button there. Step-by-step: Give students a second try after a review.

If the widget should appear in many scenes and stay synchronized, consider whether it really belongs on a layout instead — layout widgets are live-linked, so one edit reaches every scene that uses the layout.

Send forward and backward

The toolbar lets you control layer order. You can also right-click a widget and use Arrange to bring it forward, send it backward, move it to the front, or move it to the back.

That matters when widgets overlap, such as:

  • Placing text over a shape
  • Placing hotspots over an image
  • Putting a button above a decorative panel
  • Keeping a timer or score visible above other elements

Layer order is part of readability. If an interactive widget feels hard to notice or click, check whether it is buried visually.

When widgets overlap, the one you added last sits on top. To put a photo in front of its neighbors on a collage, select it and click To Front. Step-by-step: Tilt and layer photos like a scrapbook page.

Snap to grid

Snap to grid helps clean up alignment quickly.

Use it when:

  • Several copied widgets drift slightly out of line
  • You want a neater row or column
  • A scene feels visually messy after experimentation

It is a simple tool, but it makes a scene feel more intentional fast. For finer control — even gaps, exact spacing, or aligning to the scene — use Align & distribute instead.

Delete

Delete removes the selected widget from the current scene.

Before deleting, consider whether:

  • The widget should be moved instead
  • It belongs on a layout
  • Duplicating and revising it elsewhere would save time later

Copy and paste with the keyboard

You can copy and paste widgets with the usual shortcuts — Cmd/Ctrl + C to copy the selected widget (or widgets), then Cmd/Ctrl + V to paste a copy into the current scene, offset slightly so you can see it.

You can also paste text from outside Studio. Copy a sentence from a document, webpage, or another app, then:

  • If you are editing a text widget, the text drops in at your cursor like any other field.
  • If you are not editing a text widget, Studio creates a new text widget seeded with what you pasted — a quick way to pull copy from your lesson notes straight onto the canvas.

High-value workflow examples

  • Build a styled button once, then duplicate it for Next, Try Again, and Reveal Hint.
  • Copy a directions text block to three scenes that use the same task format.
  • Move a feedback widget out of a crowded question scene into its own follow-up scene.
  • Bring a hotspot layer in front of a diagram so the clickable areas stay usable.

Learn by doing

Was this article helpful?