Scene

A scene is the root container for everything in a CE.SDK design. Pages, blocks, variables, layout settings, metadata: all of it lives inside one scene. Loading a scene loads the design. Saving a scene saves the design. Exporting renders the scene.

Every scene has a mode, set when the scene is created and fixed for its lifetime. The mode decides which capabilities and UI surfaces are available.

Design mode is for static content: images, text, shapes, multi-page layouts, PDFs. This is the mode the Design Editor, Photo Editor, and every design-focused Starter Kit run in. Pages in a design scene are discrete units of the document (slides, sheets, format variants), arranged side by side.

Video mode is for time-based content: video clips, audio tracks, animations, captions. The Video Editor runs in this mode. Pages in a video scene have duration and a timeline. The Timeline UI component only appears in video mode; a design scene has no timeline.

The mode decision shapes the rest of the product. Pick design mode for any flow producing static or print output. Pick video mode for any flow producing MP4 output.

Every scene follows the same shape: Scene → Pages → Blocks. The scene block is the root; pages are direct children; blocks live on pages; groups create additional nesting under a page.

Within a page, blocks are arranged according to the scene’s layout mode. The default is Free, where each block has an explicit position. The alternatives auto-arrange children:

• Free is the default. Blocks have absolute positions and can be moved independently. The right choice for most design and video work.
• VerticalStack arranges blocks vertically in sequence with automatic spacing and alignment.
• HorizontalStack arranges blocks horizontally in sequence.
• DepthStack stacks blocks along the depth axis, for layered compositions where blocks overlap intentionally.

Layout mode can be changed after the scene is created.

Scenes can be saved to a Base64-encoded string for lightweight database storage, or to a self-contained binary archive that bundles all referenced assets. Loading reverses either format. Because all CE.SDK platforms share the same engine, a scene saved on web loads identically on iOS, Android, or a Node.js server.

See scene-file and scene-archive for the two persistence formats, and page for how pages divide up the scene.