Editor.Canvas

The interactive workspace. Hosts every Editor.Section, handles drag / resize / pan / zoom, and paints the page background.

Editor.Canvas is where sections live. It's the interactive surface - pan, zoom, drag, resize, marquee-select, drop-image, render the page background. Children inside <Editor.Canvas> are rendered on top of the page (use Editor.Section, Editor.CanvasControls, etc.).

Installation

Already part of @docmosaic/react - no extra install.

Usage

<Editor.Root>
    <Editor.Canvas>
        <Editor.Section />
    </Editor.Canvas>
</Editor.Root>

Composition

Inside Editor.Canvas you can mount:

Editor.Section - one entry per section on the active page (auto-iterates).
Editor.CanvasControls - the floating zoom / fit-to-screen controls.
Editor.SelectionBounds - multi-select bounding rectangle.
Editor.SnapGuides - accent lines that paint during drag.
Editor.Ruler / Editor.Guides - auto-mounted by Editor.Root when showRuler is true.

The canvas applies a single scale to its content (finalScale = pageScale * zoom), so child sections can be authored in PDF points and still land in the right CSS pixels. You never write section.x from a mouse event in pixels - the hook divides by finalScale first.

Examples

Read-only canvas inside an editable root

Use Editor.StaticCanvas when you want a viewer surface but the rest of the editor stays mutable.

<Editor.Root>
    <Editor.Properties />
    <Editor.Toolbar />
    <Editor.StaticCanvas />
</Editor.Root>

Custom controls

Swap the default floating controls for your own.

<Editor.Canvas controls={<MyFloatingZoom />}>
    <Editor.Section />
</Editor.Canvas>

API Reference

Prop	Type	Default	Description
children	ReactNode	-	Two kinds of children are supported: 1. Section template a single non-overlay child rendered once per section. Pass `<Editor.Section />` (or a custom section component that consumes useEditorSection) to control how each section is rendered. Defaults to the bundled `<Section />` when omitted. 2. Canvas overlays primitives that opt in via the `__editorCanvasOverlay` marker (e.g. Editor.Zoom). These are rendered once, anchored to the canvas viewport, and have access to useEditorCanvas via context. Any number can be supplied alongside the section template.
readOnly	boolean \| undefined	-	Force the canvas into read-only mode regardless of the root's `readOnly` flag. Defaults to `false`. The effective read-only state is `root.readOnly \|\| canvas.readOnly` either one is enough to suppress drag, resize, drop, file upload, and section-toolbar buttons. Set automatically by Editor.StaticCanvas.
showControls	boolean \| undefined	-	Render the built-in top-right `CanvasControls` zoom strip. Defaults to `true`. Set `false` when the surrounding layout supplies its own zoom widget (e.g. the app-shell mounts a single bottom-center `Editor.Zoom`) so there is exactly one zoom control on the canvas.

Section - the unit of content
StaticCanvas - read-only variant
Ruler / Guides - overlay layers
Unit system - points vs CSS pixels

Editor.Canvas

On this page