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 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 set of 320px-wide Twitch panels. 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 set 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.
• List - rules, commands or prices: a label on the left, a value on the right.
• 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. Scenes only.
• Sound - a loop or a one-shot tied to this scene. Scenes only.

On a panel set the Add tab also has Panel, one more panel in the set. Whatever you add lands in the middle of what you are looking at, 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. The Find a layer box at the top of the tab narrows a long list.
• Shift-click to add a layer to the selection, or shift-click a selected one to take it out. Drag a box on empty canvas to select everything it touches.
• Cmd/Ctrl + A selects every unlocked layer.
• Escape clears the selection.

The settings sidebar edits whatever you have selected. With one layer it shows that layer's settings; with several it shows the settings they share and writes a change to all of them, with Mixed where they differ. With nothing selected it stays empty.

A small bar floats above the selection with the everyday actions: copy this look, paste a copied look, duplicate, bring to front, send to back, hide, lock and delete. Copying a look takes a layer's styling - colours, fonts, borders - and pastes it onto any other layer, even one of a different kind.

Moving and resizing

• Drag a layer to move it. Alt + drag drags off a copy and leaves the original where it was.
• Drag any of the eight handles around a selected layer to resize it. Hold Shift to keep the proportions you started with, or Alt to resize from the middle.
• Arrow keys nudge by 1px. Shift and an arrow key nudges by 10px.
• Dragging a handle will not take a layer below 8px; type a smaller W or H in the sidebar if you need a hairline.
• For exact numbers, use Position in the sidebar: X, Y, Width and Height. Rotation is a number from -180 to 180 degrees (or drag just outside a corner; hold Shift for 15 degree steps), and Opacity runs 0 to 100 percent. Panels do not rotate: they export as upright images.

Snapping and guides

While you drag, the layer snaps to the artboard's edges and its two centre lines, to the edges and centres of every other visible layer, and to gaps that match a gap you already have. It pulls from about 6 screen pixels at any zoom, and pink guide lines - with a pink bar showing the gap in pixels - show what it caught. Each axis is worked out separately, so a layer can snap horizontally to one neighbour and vertically to another.

Hold Cmd/Ctrl while dragging to place something exactly where you want it with no snapping. Hold Alt and point at another layer to see the distance between the two. Hidden layers are never snap targets, and resizing does not snap at all.

Aligning and spacing

The Arrange button in the toolbar opens Left, Center, Right, Top, Middle and Bottom, plus Space across, Space down, Bring to front and Send to back. The same align buttons sit at the top of the settings sidebar.

• 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, use Bring to front and Send to back in Arrange or the bar above the selection, or press Cmd/Ctrl + ] and [.

On a scene, the Background row sits at the very bottom of the Layers tab. A new scene has none, which keeps the browser source transparent; select it to give the scene a colour, gradient, image or shader.

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.

Panel sets

• Each panel grows to fit what is on it, and dragging a panel takes its contents along.
• Cmd/Ctrl + click selects a layer through the panel it sits on; double-click goes into a panel.
• There is no snapping to the workspace edges on a panel set, only to the panels and layers on it.
• Download gives you a ZIP with one PNG per panel. See exporting a panel to Twitch.

Entrance animations

Each layer on a scene 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

The right of the toolbar has Undo and Redo, Arrange, Duplicate and Delete, then the canvas buttons: Fit (zooms the artboard to the window), the keyboard shortcuts sheet, and Copy source URL on a scene (the copy icon) or Download on a panel set. Share as template, the last button, sends a copy to the template library for review. The zoom controls sit at the bottom right of the artboard; below 25% zoom, shadows and glows are drawn simplified so the canvas stays smooth.

Keyboard and mouse

The keyboard button in the toolbar opens this same list inside the editor. Plain scroll, a two-finger swipe or the middle mouse button also pan the canvas.

Editing

Arranging

Moving

The canvas