---
title: "Scene - CE.SDK Glossary"
description: "The root container for everything in a CE.SDK design. The scene mode (design or video) and layout mode shape what the rest of the product can do."
url: "https://img.ly/glossary/scene/"
type: "page"
---

> This is the markdown version of [Scene - CE.SDK Glossary](https://img.ly/glossary/scene/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

# 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 versus video mode

**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.

## Scene structure

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.

## Saving and loading

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](https://img.ly/glossary/scene-file.md) and [scene-archive](https://img.ly/glossary/scene-archive.md) for the two persistence formats, and [page](https://img.ly/glossary/page.md) for how pages divide up the scene.

## Links

- [Scene API Reference](https://img.ly/docs/cesdk/react/concepts/scenes-e8596d.md): Methods for creating, loading, saving, and managing scenes.
- [Scene File Format](https://img.ly/docs/cesdk/react/create-templates/import/from-scene-file-52a01e.md): How CE.SDK serialises scenes and what the .scene format contains.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.
- **[Free Trial](https://img.ly/pricing.md)** - Start building with CE.SDK