Export, saving, and source

Design Lab, the layered composition tool, exports the selected artboard. Loose canvas layers are not exported. Exporting while the loose canvas is active shows the message "Select an artboard to export. Loose canvas layers are saved in your project." The library, inspector, zoom controls, selection handles, and layer dock do not appear in an export.

Export settings

The first click on Export in the tool header renders a PNG and opens the export review, which shows the file and the export settings. After that, Export reopens the review. The review shows the output size, and for motion it shows the frame count, duration, and frame rate.

Export size preset in the tool header sets the width without opening the review, and it shows Custom for a width that matches no preset. Width and height are rounded to even numbers. The defaults are 960 px, Balanced, 1.6 seconds, 30 FPS, and Blended loop.

Quality maps to these encoder settings:

MP4 uses H.264 when the browser can encode it and another MP4 codec otherwise. If no MP4 encoder is available, the export reports an error and does not produce a GIF in its place. Files are named <identity>-design-lab-<width>x<height>.<format>. Shader sequence exports are named <identity>-design-lab-shader-sequence-<width>x<height>.<format>, and their length comes from the sequence.

What each format captures

• PNG and JPG freeze the frame that is visible when the export starts, then render the full composition at the output size. JPG composites transparency over the artboard's background color.
• GIF and MP4 sample motion forward from the current frame and restore the paused pose afterward.
• Exports do not add captured-frame assets to IndexedDB and do not resume playback.
• Blended loop records extra frames, crossfades the tail into the head, and checks that the last frame closes onto the first. It edits the end of the clip and does not find a native repeat period in the shader. Raw motion keeps the clip unmodified and can show a seam when it repeats.
• Stateful materials such as Fluid Energy support exact still export. Motion export that samples them by timestamp is refused.
• Effect layers with image effects run at the full output size for every frame and need WebGPU.

Resolution and readiness

During an export, shader layers render at up to 8 times the device pixel ratio. The render is limited to an 8192 px edge, and each shader to the larger of 120,000 pixels and the export's pixel count. A shader that covers the artboard therefore renders at about the export resolution, and a smaller shader layer renders above its size on the artboard. The live preview quality setting does not affect exports.

Export waits for materials, fonts, and images to be ready. Prismatic sphere waits for its environment lighting. If a resource does not load, the export reports a readiness timeout and does not export a placeholder. Text being edited on the canvas is committed before the export starts.

Saved designs and autosave

The working draft autosaves while you edit. Named checkpoints are separate:

• Save checkpoint creates a named checkpoint, or updates the selected one with Save changes.
• Saved designs lists checkpoints and marks the Current one. Clicking the current row closes the picker and keeps your edits.
• Save as independent copy (Clone) and Save as linked copy (Fork) create new checkpoints from the current edits and leave the original unchanged. A fork records its parent.
• Each row has Rename, Clone, and Delete. Delete asks "Delete this checkpoint?" with Cancel and Delete. Rename with Enter or Save name, and discard a rename with Escape or Cancel rename.

Unsaved changes means the working draft differs from the selected checkpoint. The draft itself can still be autosaved. A checkpoint stores the complete CanvasDocument: artboards and loose layers, dimensions and background, every layer's ID, kind, name, geometry, visibility, lock, opacity, and blend mode, text and typography, assets, order and groups, materials on content layers, shader settings, captured PNG references, native frame state, the shader sequence and timeline, and the export settings.

Checkpoints and autosave are kept in IndexedDB in this browser. If loading fails, saving pauses while recovery retries, so an empty canvas cannot overwrite the previous design. A small recovery journal keeps work while IndexedDB is briefly unavailable. Clearing site data removes local work. Download a project file for an independent backup.

Project files

File → Download project file saves a .glyphfield.json file with every artboard, the loose canvas, embedded images, fonts, and captured shader frames. File → Open project file replaces the current workspace with a project file. + → Import project… in the Studio project menu opens a project file as a new project. See Project files.

Source format

File → Edit source code shows the Design Lab source: a CanvasDocument with schemaVersion: 2 and Design Lab metadata sourceVersion: 4. Start from readSource() instead of writing a document from memory.

{
  "schemaVersion": 2,
  "brandId": "gt",
  "capabilities": ["animation", "assets", "constraints", "guides", "history", "layers", "pages", "text"],
  "pageIds": ["<page id>"],
  "pages": { "<page id>": { "width": 1600, "height": 900, "background": "#070707", "elementIds": ["shader-canvas-1", "logo-brand"] } },
  "elements": {},
  "assets": {},
  "metadata": {
    "tool": "design-lab",
    "designLab": {
      "sourceVersion": 4,
      "ratio": "wide",
      "exportSettings": {},
      "groups": [],
      "layerShaders": {},
      "shaderSequence": {},
      "timeline": {},
      "workspace": { "activeArtboardId": "artboard-main", "activeSurfaceId": "artboard-main", "artboards": [], "canvas": {} }
    }
  }
}

• page.elementIds is the layer order, back to front.
• Element kind is shader, effect, text, logo, or image. Element data holds the layer settings and its layerType.
• Layer IDs start with shader-, effect-, text-, logo-, or asset-. Group IDs start with group- and artboard IDs with artboard-.
• Element bounds x and y are positions. For most layers, width and height are scale factors of the layer's default box. Effect layers always cover the artboard, and their bounds are the artboard's size in pixels. A rotated layer stores its angle in bounds.rotation.
• Asset IDs are brand-asset:<library id> for identity assets and resource:<layer id> for embedded files. Captured frames use shader-frame:<sha256>.
• element.locked records a lock. Effect layers store converter fields and, for an image effect, effectId and effectProps.
• metadata.designLab.workspace stores the artboards and, in canvas, the loose-layer snapshot. activeSurfaceId: "canvas" means the loose canvas is being edited. An optional artboard displayScale keeps the on-canvas size of a framed selection and does not change the export size.
• metadata.designLab.identity holds the typography snapshot of an imported project.
• Shader elements may carry frameState (the editable native time recipe) and frameSnapshot ({ version: 1, assetId, width, height }, a lossless PNG in assets).

A generated design-sequence document has version: 3. Applying it normalizes the active source to this format. See Source formats.

Browser API

The Browser API (window.glyphfield.studio) has these export and workspace actions:

mode: 'shader-sequence' is valid for GIF and MP4. Without download: true the action returns the Blob without saving it, and studio.download(artifact) saves it later. Run exports one at a time.

const studio = window.glyphfield.studio;
if (studio.activeTool() !== 'material') throw new Error('Open Design Lab first.');
const artifact = await studio.invoke('design.export', { format: 'mp4', mode: 'shader-sequence' });
if (!(artifact.blob instanceof Blob) || artifact.blob.size === 0) throw new Error('The export is empty.');
studio.download(artifact);

design.workspace.move keeps world-space boxes, text layout, and appearance. IDs change only when the destination already has a layer with the same ID. beside places layers next to their source artboard when moving them to the canvas. Read the source again after a move.