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 for the global toolbar that the Canvas Bar complements, and canvas for the workspace the bar sits next to.
Links
Documentation and references for this concept.
Related Terms
Canvas
The primary workspace in the CE.SDK editor where users view, interact with, and compose their design, rendering the curr…
Navigation Bar
The global toolbar in the CE.SDK editor that handles scene-wide actions and navigation controls (including undo/redo, zo…
Page
A direct child of the scene that acts as the canvas on which all visible design elements are placed; itself a block of t…