Design Lab

Design Lab is Glyphfield's layered composition tool. Its public tool ID is material. It combines the shared Shader Library with a portable layer document (CanvasDocument schema 2 with Design Lab metadata source version 4), direct canvas editing, saved checkpoints, still export, and GIF and MP4 export encoded in the browser.

Use it for posters, social images, key visuals, stickers, and short shader clips. Animation is the tool for sequences of scenes on a timeline. The expression tools produce fixed-format social images and slides.

Every layer kind and editing tool is described in Layers and editing. Converters and image effects are in Effect layers. Shader layers, preview quality, shader time, and shader sequences are in Shaders and time. The export settings, saved designs, project files, and the source document are in Export, saving, and source.

Layout

Both sidebars collapse from their edge handles and resize when their edge is dragged. A focused resize handle also accepts the arrow keys. Widths and the collapsed state are stored in this browser. On narrow screens the panels stack. The collapse buttons are labelled Collapse Shader library and Collapse Design Lab controls, and they become Expand Shader library and Expand Design Lab controls when collapsed.

The save status shows one of Opening, Saving, Saving name, Unsaved changes, Saved, Autosave failed, Loading autosave, Preparing assets, Autosaved, Autosaving, or Save failed. File contains Open project file, Download project file, and Edit source code. A failed file or export action shows an Error button that opens the full message.

Canvas and artboards

The canvas is an open workspace. It holds loose layers anywhere, including at negative coordinates, and has no output size. An artboard is a named, sized output surface on the canvas. Exports contain only the layers inside the selected artboard.

• Choose Canvas in the artboard bar, or click empty canvas, to add loose layers. Loose layers have the same controls as artboard layers.
• Drag a layer out of an artboard to make it loose. Drop a layer with its center inside an artboard to move it into that artboard. The layer menu also offers Move to canvas and a destination for each named artboard.
• Select loose layers and choose Frame selection to create an artboard around them. The new artboard keeps the layers' size on the canvas and adds 48 px of padding.
• Effect layers belong to an artboard. They cannot be added to the loose canvas.
• Saved designs and project files keep the loose canvas and every artboard.

Artboard setup offers these presets and a custom size from 120 to 4096 px on each side:

Add creates an empty artboard with the size and background color of the active artboard. Duplicate active artboard also copies its layers. The loose canvas has a fixed reference size of 1600 × 900, and its layers can extend past it.

Navigate the canvas

• Scroll to zoom around the pointer. Zoom ranges from 5% to 800% and opens at 40%.
• Drag empty canvas to pan. Hold Space and drag, or drag with the middle mouse button, to pan over content.
• Click an inactive artboard to select it, or drag its surface to move it. Double-click a layer on an inactive artboard to enter that artboard with the layer selected. Any artboard can be dragged by its name label, and a focused label moves with the arrow keys.
• Fit canvas fits every artboard and loose layer. Reset view returns to the starting view. The percentage button resets the zoom to 100%.
• Inactive artboards and loose-layer previews that are off screen release their shader renderers. Selection, editing, and export keep the active renderers.

The Artboard map is a minimap in a bottom corner of the canvas. Click or drag inside it to pan. Its action row has Fit all, Center (centers the selected artboard at the current zoom), and Tidy (arranges the artboards in a grid and fits them). Drag the map's header to move it, and it docks in the nearest bottom corner on release. With the header focused, the left and right arrow keys dock it, and Escape cancels a drag. Hide artboard map collapses it.

Keyboard shortcuts

Press ? or choose Keyboard shortcuts in the canvas toolbar to open the shortcut sheet. Escape or Close keyboard shortcuts closes it. The sheet and the key handler read the same list in src/lib/designLabShortcuts.ts.

Layer and edit shortcuts work while Design Lab has focus or the pointer is over it. Undo, redo, F, + and − work while the canvas has focus or the pointer is over it. No shortcut runs while a text field, menu, dialog, or list box has focus.

Option/Alt shortcuts and the ⌘/Ctrl chords read the physical key, so they work on keyboard layouts where Option or Shift produces another character. Duplicate, delete, cut, and the order chords act on the canvas selection. When no canvas layer is selected, they act on the layer chosen in the layer list. Delete and cut skip a locked layer. ⌘/Ctrl + X with no layer selected does nothing, and ⌘/Ctrl + C with no layer selected copies the artboard. I and K open the image picker. E on the loose canvas shows a message and adds no Effect layer. Align shortcuts need two or more layers, and distribute shortcuts need three.

Browser API

The Browser API (window.glyphfield.studio) exposes these Design Lab actions while Design Lab is the active tool, in addition to the standard source and control actions. describe() returns the current action list and contracts.

Each Design Lab page lists the inputs and outputs of its actions. The Studio Browser API reference describes the lifecycle, controls, and errors.

HTTP

POST /api/generate with kind: "design-sequence" returns a response-schema-1 envelope. Its document is a version-3 compatibility source for Design Lab, with a resolved shader timeline and browser commands. Apply response.document with applySource, then read the normalized CanvasDocument again before further edits. The server does not render Design Lab pixels. See Generation API.

Limits and requirements

Text, mark, image, sticker, and shader layers rotate about their centers, and the angle is stored in the range −180° to 180°. Effect layers cover the artboard and do not rotate. While a layer is dragged, it snaps within 6 screen pixels to the artboard's edges, center, and rule-of-thirds lines, and to the edges and centers of other layers.