---
title: "Layer Panel - CE.SDK Glossary"
description: "The panel that exposes the block hierarchy of a scene. Standard in Creator-facing surfaces, almost always hidden in Adopter-facing ones."
url: "https://img.ly/glossary/layer-panel/"
type: "page"
---

> This is the markdown version of [Layer Panel - CE.SDK Glossary](https://img.ly/glossary/layer-panel/). 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).

---

# Layer Panel

The Layer Panel shows the stacking order and visibility of every block in the current scene. It is the standard surface for managing complex compositions: select hidden blocks, drag to reorder, toggle visibility per element, lock blocks to prevent accidental edits.

The panel maps directly to CE.SDK's parent-child block hierarchy. The scene is the root; pages are direct children; blocks live under pages; groups create additional nesting. The Layer Panel exposes this tree visually, with groups as collapsible parent nodes and reordering operations equivalent to changing a block's position in the hierarchy.

## When the Layer Panel matters

The Layer Panel becomes valuable in compositions where blocks overlap or extend beyond the visible canvas: marketing banners with stacked text and image blocks, multi-page documents with shared elements, print layouts with locked backgrounds and several editable layers on top.

Without the Layer Panel, selecting a specific element in a crowded composition requires precise clicking, often with multiple attempts to navigate through stacked elements. With it, any block in the scene is one click away regardless of what is covering it.

## What the Layer Panel offers

- **Full block list** showing every element in stacking order, from front to back. Groups appear as collapsible nodes with their children indented.
- **Visibility toggle** to show or hide individual blocks without deleting them. Useful for previewing the design with and without specific elements.
- **Drag-to-reorder** which is equivalent to bring-to-front and send-to-back operations performed from the canvas.
- **Direct selection** by clicking the block in the list. This is the main reason the Layer Panel exists: it solves the "I cannot click that block on the canvas because something is on top of it" problem.
- **Lock and unlock** to prevent specific blocks from being selected or moved during editing. Useful for anchoring backgrounds while the user focuses on foreground content.

## The hide decision

The Layer Panel is shown by default in the Design Editor. Most integrations make a deliberate choice about whether to keep it visible.

- **In Creator-facing tools**, the Layer Panel stays visible. Template authors building complex compositions need direct access to every block, including locked ones, to set up scopes and constraints.
- **In Adopter-facing tools**, the Layer Panel is almost always hidden. The Adopter should not see (or be tempted to manipulate) the locked blocks that make up the template structure. Hiding the Layer Panel keeps their attention on the editable content the Creator surfaced.

The Layer Panel is configurable per integration: shown, hidden, or repositioned. The decision is usually consistent with the role the editor session runs in.

## Where the Layer Panel does not appear

Layer Panel is a Design Editor surface. The Video Editor uses the Timeline as its primary organizational axis instead. Video clips and overlays are arranged by time and track, not by depth-of-canvas stacking. The Layer Panel is not part of the Video Editor Starter Kit by default.

See [block-hierarchy](https://img.ly/glossary/block-hierarchy.md) for the underlying tree structure the Layer Panel visualizes, and [timeline](https://img.ly/glossary/timeline.md) for the temporal equivalent in the Video Editor.

## Links

- [Layer Panel Guide](https://img.ly/docs/cesdk/react/create-composition/layer-management-18f07a.md): How to use and configure the layer stacking panel.

---

## 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