Using the canvas editor

The editor is three columns. On the left, a rail with two tabs: Add and Layers. In the middle, the artboard. On the right, the settings for whatever layer you have selected. The artboard is painted by the same renderer that paints your OBS browser source, so what you see while you design is what OBS gets.

The same editor builds a full 1920x1080 scene and a 320x160 Twitch panel. Placing, snapping, stacking and undo work the same on both. A panel leaves pulz as a flat PNG rather than a browser source, so the live widgets are scene-only and the Add tab on a panel offers elements alone.

Opening the editor

Adding widgets and elements

The Add tab lists elements first, then widgets grouped the way the widget reference groups them. The search box filters both lists by name and by description.

Elements are the pieces that are not live data:

• Text - a heading, a caption, a rule for chat.
• Image - a logo, a PNG frame, a GIF from Giphy or Tenor.
• Shape - a block, a divider, a frame to sit behind something else.
• Icon - any icon from the pulz set.
• Embed - any https page or widget, such as a Twitch clip or a tracker.
• Sound - a loop or a one-shot tied to this scene.

Whatever you add lands in the middle of the artboard at its default size, gets selected, and the rail flips to Layers. Widget defaults are sized for 1920x1080, so on a smaller artboard the new layer is scaled down to fit rather than hanging off the edge.

Selecting

• Click a layer on the artboard, or its row under Layers.
• Shift-click to add a layer to the selection, or shift-click a selected one to take it out.
• Cmd/Ctrl + A selects every unlocked layer.
• Escape clears the selection.

The settings sidebar shows one layer at a time. With nothing selected, or with several layers selected, it stays empty and you work from the toolbar instead.

Moving and resizing

• Drag a layer to move it.
• Drag any of the eight handles around a selected layer to resize it. Hold Shift to keep the proportions you started with.
• Arrow keys nudge by 1px. Shift and an arrow key nudges by 10px.
• A layer cannot go below 8px on a side.
• For exact numbers, use Position in the sidebar: X, Y, Width and Height. Rotation is a slider from -180 to 180 degrees, and Opacity runs 0 to 100 percent.

Snapping and guides

While you drag, the layer snaps to the artboard's edges and its two centre lines, and to the edges and centres of every other visible layer. The threshold is 8 artboard pixels, and a purple guide line shows what it caught. Each axis is worked out separately, so a layer can snap horizontally to one neighbour and vertically to another.

Hold Alt while dragging to place something exactly where you want it with no snapping. Hidden layers are never snap targets, and resizing does not snap at all.

Aligning and spacing

The Align button in the toolbar opens six options: Left, Center, Right, Top, Middle and Bottom. It acts on the selection, not on one layer.

• With one layer selected, these align it to the artboard - the way you put something in a corner.
• With several selected, they align to each other.
• Space across and Space down even out the gaps. They need at least three layers selected, and the outermost two stay where they are.
• Locked layers are skipped by all of it.

Stacking order

The Layers tab lists front-most first, so the top row is the layer nearest the viewer. Drag a row up or down to restack.

The two order buttons in the toolbar - bring to front and send to back - move the whole selection in one go.

Hiding and locking

Every row under Layers carries an eye and a padlock.

• Hidden takes a layer out of the artboard and out of the rendered source, and stops it being a snap target. It stays in the document, so unhiding brings it back untouched.
• Locked means the layer cannot be dragged, resized, nudged, aligned, spaced or deleted, and Select all skips it. Its resize handles disappear. You can still click its row to read its settings.

Entrance animations

Each layer can play one entrance when the scene loads, set under Entrance in the sidebar: Fade in, Rise up, Drop down, Slide from right, Slide from left, Pop or Blur in. Add a delay of up to 3000ms to stagger several layers.

Undo and autosave

• History holds 60 steps. A whole gesture is one step, so undoing a drag returns the layer to where it started, not one pixel back.
• Cmd/Ctrl + Z undoes. Cmd/Ctrl + Shift + Z redoes. Making a new change clears anything you could have redone.
• History belongs to the design you have open. Switching to another one starts it empty.

Autosave runs 900ms after your last change. The word next to the design's name is the truth of it: Saving while the write is in flight, Saved when it has landed, Unsaved when it has not. A failed save leaves it on Unsaved and retries on your next edit rather than claiming a save that did not happen. Closing the editor saves straight away.

Getting the design out

Three buttons on the right of the toolbar. Fit zooms the artboard back to the window. For a scene, Copy source URL puts the browser source address on your clipboard. For a panel, Download PNG renders the image. Share as template sends a copy to the template library for review.

Keyboard and mouse