---
title: "Canvas Bar - CE.SDK Glossary"
description: "A secondary toolbar for scene-level actions, configurable at both top and bottom of the canvas. The only CE.SDK UI surface with two independent positions."
url: "https://img.ly/glossary/canvas-bar/"
type: "page"
---

> This is the markdown version of [Canvas Bar - CE.SDK Glossary](https://img.ly/glossary/canvas-bar/). 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).

---

# Canvas Bar

The Canvas Bar is a secondary toolbar for tools that affect the canvas or the scene as a whole, rather than a specific selected block. It sits at one of two positions: top of canvas or bottom of canvas. It is the only UI surface in CE.SDK with two independently configurable positions.

Most integrations leave the Canvas Bar empty by default, placing zoom and page controls in the Navigation Bar instead. It becomes useful when the integration wants canvas-management tools closer to the canvas surface itself, or when the Navigation Bar is hidden.

## Two positions, configured separately

The Canvas Bar Order API requires an `at` parameter specifying which position is being configured. Top and bottom are independent: changes to one do not affect the other. Both positions are empty by default. This dual-position model is unique to the Canvas Bar among all editor locations.

In practice, integrations use the two positions for different purposes.

- **Bottom position** typically carries page navigation controls in multi-page documents, since page thumbnails often sit near the bottom of the canvas.
- **Top position** is sometimes used for text formatting controls during text editing mode, kept close to the text being edited rather than far away in the Navigation Bar.

## What goes in the Canvas Bar

The default Canvas Bar (when populated) carries scene-level and canvas-level actions.

- **Add Page** for adding new pages to multi-page documents.
- **Zoom controls** as an alternative location for zoom in/out and fit-to-canvas, keeping zoom accessible without requiring the Navigation Bar to be shown.
- **Page management** for reordering, deleting, or duplicating pages in multi-page workflows.
- **Canvas-wide toggles** for things like grid display, ruler visibility, or other canvas-level display settings.

## Edit mode contexts

The Canvas Bar supports edit mode-specific layouts at each position. Component orders are configured with both an `at` (position) and a `when` (edit mode), so entirely different toolsets can appear at the same position depending on the active mode. Modes without an explicit configuration fall back to the Transform mode order for that position.

## Where the Canvas Bar matters most

- **Design Editor.** Multi-page documents benefit from page management tools close to the canvas, where thumbnails typically appear.
- **Photo Editor.** Typically minimal or hidden. Single-canvas photo editing does not need page management.
- **Video Editor.** May carry timeline zoom controls or scene-level settings, though timeline-specific navigation is primarily handled by the Timeline component.

The Canvas Bar is configured via the Canvas Bar Order API. In integrations where the host application provides its own page management UI, the Canvas Bar can be hidden entirely via the Feature API.

See [navigation-bar](https://img.ly/glossary/navigation-bar.md) for the global toolbar that the Canvas Bar complements, and [canvas](https://img.ly/glossary/canvas.md) for the workspace the bar sits next to.

## Links

- [Canvas Bar Customization](https://img.ly/docs/cesdk/react/user-interface/customization-72b2f8.md): How to configure the canvas-anchored toolbar for page management.

---

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