---
title: "Canvas and visual content"
url: https://developers.dagio.ai/canvas/
---

# Canvas and visual content

   
                                  
                                                                                   
              
                
          
   

## Create a Surface

Choose **Page**, **Slide** or **Board**, then choose a template. **Document** starts a Page with a
full-width rich text component and its formatting toolbar. **Blank Page** starts an empty stack.
The template supplies the initial content; both use the same Surface and its View, Edit and Layout
modes. The layout remains fixed after creation.

## Compose a Page

Use **Layout** to organize a Page's blocks. A Layout offers **2 columns**, **3 columns** or
**Main + right column**. Its illustrated choices adapt to the available width without an internal
scrollbar. The selected Layout shows pale column guides. Drag a block by its move handle into
another column, including an empty one, or before/after another block; the current Model's
permissions still apply. Columns and the Page stack recalculate their layout automatically.

A Board inside a Page has a bottom height handle. Drag it to change the Board's height without
stretching its contents. Other blocks keep their automatic content height. Click an empty area
outside the content to clear the selection; the block's tools and menus retain their target.

## Choose a Canvas

Choose a tool, then click the board to place its object there. A crosshair indicates placement;
**Escape** cancels without creating an object. For shapes, sticky notes and images, choose the
shape, color or image first, then click the board. **Draw** keeps its freehand drawing gesture.

The text selection frame follows its dimensions during editing. List markers and text share
font, size, color and alignment. Toggle styles on and off without reopening the menu; **No list**
removes the list. New text starts with 0% background opacity and a border weight of 2, within
the Model's limits.

Insertion tools remain available when nothing or several objects are selected. Scroll the left
toolbar when its tools exceed the available height. Available tools follow the board's Model;
selecting an object does not change its insertion capabilities.

**Audio**, **Video** and **Map** add link cards. Click an empty card or double-click it to enter
a URL; **Edit media** changes its URL, title and description. Audio accepts Spotify and SoundCloud,
Video accepts YouTube and Vimeo, and Map accepts Google Maps place/search links, including short
share links. Audio/video titles are retrieved from the provider and remain editable. Use **Play**
or **Interact with map**, then **Finish interaction** to return pointer gestures to the board.
Google Maps place/search requires the administrator's Maps Embed configuration. Provider embedding
restrictions apply. Static exports retain the source text and link rather than an interactive player.

**Image** opens a menu beside the vertical toolbar, aligned to its bottom. Unsplash search runs
automatically after typing; **Upload your own** imports a local file. Select a photo, then click the
board to place it. Hover an image or focus its credit control to reveal the corner info icon. Click it to open
photographer and Unsplash credits with their links; click outside or press Escape to close. Unsplash requires server
configuration. **Image settings**, immediately before **Position**, contains **Show caption**;
hiding it keeps its content. Image and caption share one selection frame; double-click the caption
to edit its text. **Replace image** reopens the picker while keeping the caption and frame. Crop,
Rotate left and both flips are direct toolbar icons. Cropping happens on the image in the board,
with resize handles and a small toolbar above it. Zoom enlarges the photo inside the fixed crop
frame. Formats include Original, Square, Circle, Landscape, Portrait and Wide. The horizontal
caption follows the visible width after cropping or rotation.
Resizing an image keeps its width-to-height ratio, with or without a caption. Use the corner handles; side handles are hidden and Shift does not unlock distortion.
Apply confirms the crop; Cancel or Escape discards it. The original image file stays intact.

Use **Draw** for freehand drawing. Choose the pen, selection tool or whole-stroke eraser, then
adjust color and width. Undo/redo edits the drawing draft. **Save** applies it in one Canvas action;
**Cancel** discards it. Finish or cancel the draft before saving the Surface. Draw appears when
the Model admits its vector paths, groups and contour styles.

Use **Table** for an editable board table. Double-click to edit cells; letter and number handles
select columns and rows. Its dedicated toolbar controls header, grid, background and cell colors,
fonts and styles, horizontal (left/center/right) and vertical (top/middle/bottom) cell alignment, cell types, row/column insertion and deletion, and optional title and
caption. Cell types include text, numbers, currency, percentages, ISO dates/UTC date-times and
checkboxes. Formatting keeps the entered value; 0.25 displays as 25%. **Reset cell background** removes the cell override and restores the table or header background.
These free tables do not edit
business Fields or evaluate formulas. Tables support up to 40 rows, 20 columns and 400 cells.

Use **Sticky note** to choose a background color and edit text directly in a borderless note.
In Board mode, enable **Double-click to add a sticky note** in **Surface settings** to insert a
note at the pointer on empty space. This editor-session preference starts off; double-clicking
objects still edits their content. Model permissions and page protections apply.
Character formatting uses the same text controls as shapes. **Show author** displays the creator
when the host supplied their identity. **Add emoji** opens the shared searchable picker; reaction
pills show participant counts and toggle your own reaction. These personal actions require an
authenticated participant. The local service-key host currently saves anonymous notes only.

**Color** adds a card with a swatch, hex code and a suggested color name. Double-click to customize
the name. Its toolbar contains color and emoji reactions. In the Color menu, **Generate linked
palette** creates twelve cards around the source: they follow its color changes while keeping
custom names. **Automatic color name** restores generated names. **Make independent** detaches one
card; **Make palette independent** detaches the palette before deleting its source. Reactions
require a personal identity supplied by the host.

A Canvas is Surface content for visually organizing elements, notes and references. Use it to prepare a client workshop or arrange proposal ideas. A graph view instead represents relationships among existing objects.

| Element         | Expected value                         | Purpose                  |
| --------------- | -------------------------------------- | ------------------------ |
| Canvas document | Admitted native format and version     | Preserve spatial content |
| Elements        | Typed identities, geometry and content | Compose the visual       |
| References      | Authorized objects                     | Connect business content |
| Policy          | Model-admitted capabilities            | Control changes          |

## Example

Create **North Studio preparation** with Needs, Constraints and a Client record link. Positions belong to the Canvas. The link retains client identity; moving its representation does not move the client into another Workspace.

## Preserve the native format

The font control displays the selected family. Search the complete bundled Google Fonts catalogue
or filter by category. The family list is static; opening it does not query the workspace or a font
service. Static CSS and font files load only for families used in the Surface or visible previews.
The Model declares enabled families and actual variants. An unavailable face is reported explicitly.

Use **Checklist** to insert a native text object with checkable tasks. Double-click to edit it.
**Checklist settings → Show title** controls its optional title. Drag a task by its handle to
reorder it; Arrow Up/Down on the handle offers the same command with a keyboard. Checks and text
styles follow their task.

Drop a connection on empty space to choose its target: **Add the same object**, text or a shape.

**Shapes** and **More shapes** share a searchable catalogue with collapsible categories: Basic shapes,
Flowchart, Callouts, UML, Data Flow and Wireframes & app mockups. The compact Shapes menu opens at the
top of the vertical toolbar; only its categories scroll. Pack management is hidden for now.
Marketplace packs and imports are planned. Wireframes are editable vector stencils, not interactive
application controls. Existing Models can enable vector shape packs in the Builder's Canvas settings.

**More shapes** opens the native catalogue with search by name or category. Choosing a target creates
the object and its connection together; Escape or clicking outside cancels without adding objects.

Open **Object connections** in the bottom bar and enable connections to show the selected object's
four ports. Hover a port to preview placement, click to create a linked duplicate, or drag to an
existing object to connect it. Repeated copies use free positions along the chosen side without
moving existing objects. Attached connections share the Line tools, with the allowed routing
choices in **Line type**. These are graphical connections inside the Surface.

For a free line, use the color circle for line color and opacity, and **Line type** for the stroke
style and width. **Line start** and **Line end** choose arrowheads, circles, diamonds, bars or
cardinality endings; **Swap line ends** exchanges them. Use the text button or double-click the
line to edit its centered label. Its text toolbar replaces the line toolbar and supports the same
mixed character styles as shape text.

Double-click a text block to write directly inside it. Its single toolbar combines character
formatting, text color, left/center/right alignment, bulleted and numbered lists, background,
border and Position. Different characters can retain different fonts, sizes, colors and styles.
Open **Advanced text settings** for letter spacing and line spacing, with sliders and numeric values.
Click outside the block or press **Escape** to finish. The block can grow vertically to fit its
content; opening and closing without changes does not save a new revision.

To add an image, choose its declared destination and complete the requested information. PNG and
JPEG files are limited to 5 MiB; the Model may impose a smaller limit. The image is independent
content: access to the Canvas is not transferred to it. If your current input cannot be retained,
keep the Canvas open and resolve that input before trying the image choice again.

If the destination form asks for a reference, search for and choose an authorized record in that
form. The choice stays pending with the image’s other information and is saved by the same
confirmation, not by a separate relation change. A required reference must be resolved before the
preview. You can remove a reference only when the form explicitly offers that absence.

If image creation is not confirmed, resume the same request without replacing the file or creating
another image. When creation is confirmed but insertion fails, resume only inserting the saved
image. Creating the image, inserting its reference into the Canvas and saving that placement are
distinct steps; a saved image does not by itself confirm that the Canvas placement is saved.

In **Resources**, use **Find resources** to find an accessible component or library. If a search,
next page, source read or preview fails, **Retry** repeats that same read. New text you are entering
is not submitted by this retry: use **Find resources** to start a new search. A library does not
grant access to its referenced components.

For a selected instance, the resource search shows whether the observed source matches its pinned
revision or offers another revision to review. A source missing from that search page is not
declared removed or inaccessible. Reading another revision of the same component preserves your
parameters and variant for explicit review; it does not apply the update or save the Canvas.

The **Snap to objects** option in Grid settings starts disabled. When enabled, a move can align to
page or object edges and centres. Hold **Alt** for a free gesture. Guides stay local to the editor;
they do not create objects or save a layout.

Resize a frame with its handles or dimensions in **Position**. A manual resize switches to fixed
sizing: objects keep their dimensions while the Layout may realign them, unless column width fitting is enabled.

The selected container's **Frame** menu offers an optional title and **Minimize**, which hides its
contents without deleting them. **Arrangement → Column** stacks objects and enables **Fit objects
to column width**. Drop an object into an automatic frame to insert or reorder it. Nested frames
can form rows with their own background and border through the existing color and border tools.
Images keep their proportions; pinned objects, rotated objects and lines retain their geometry.

Dragging an unpinned object outside an automatic Layout frame releases it onto the board. It keeps
its position and no longer follows the frame. This requires permission to reparent objects; groups
and pinned objects retain their membership. A move that stays inside an automatic Layout immediately
returns to its calculated position.

The **Grid settings** menu groups the **Show grid**, **Snap to grid** and **Snap to objects** toggles. The grid uses dots. Spacing ranges
from 4 to 200 board units. Hold **Alt** to move an object freely. When both snapping options are enabled, a nearby object alignment takes priority on its axis;
the grid applies on axes without an object alignment. These settings are local to the session; they are not part
of the document or its exports. Saving retains the current board framing.

**Select** toggles object interaction. When enabled, you can select and edit permitted objects.
When disabled, the hand cursor pans the Surface, even when dragging from an object. Inserting an
object enables Select again. The selected object's toolbar floats at the top of the Surface.
**Page** and **Layout** stay in the bottom bar. Layout opens an offset illustrated-card menu above
that bar, within the visible Surface, for the active page or its selected container.

Fill, text, text background and border colors provide a color selector, a hexadecimal field and
the shared palette.

**Border color** also controls border opacity independently of the fill and object opacity. Its
toolbar icon keeps a fixed color. Shape and text menus open centered below their icons, with
spaced semibold titles. The style button shows an italic, underlined B.

The small object menu sits below the object with their right edges aligned. It provides locking,
duplication, deletion and **More**; the padlock shows the current state. More and right-click open
the same actions. **Layer**, **Align to page** and **Tag** open beside the menu, to the right or
left depending on the available space. **Show layers** opens the object list in Position.
Light gray tag pills appear below the object's left edge.

**Align to page** uses the actual page dimensions, with a visible page boundary on the board.
An object positioned by an automatic Layout remains managed by that Layout unless pinned.
**Fit surface** frames the page; the mouse wheel zooms around the pointer.
**Copy/Paste** copies objects within the same Surface using fresh identities. If the copied source
changes, copy it again. Pasting from another Surface is unavailable.

**Board** displays an open board without a page boundary. Page dimensions, page alignment and
pagination are disabled; **Fit surface** frames the objects. **Pages** restores the page frame,
dimensions and page management. Switching formats preserves objects and their positions. This
choice is available for a single-page document; with multiple pages, explicitly return to one
page before selecting Board. The format choice never hides or discards pages. In expanded view,
**Position** remains available as an overlay on the right.

In a record, **Surface settings** groups the Board/Pages format and Fields. The **Page** menu
keeps the active page's dimensions and background. Use **Links** to open existing relations and
application links; closing it returns to Surface settings. For Data records, **Graph** is offered
when the Model enables a Canvas view. It displays that Query's authorized capture and indicates
when it is bounded; it does not represent the entire Workspace. Knowledge and Content spaces
retain their declared Links/Graph capabilities.

For shapes, the fill swatch, border settings and separate border-color button belong to the shape
toolbar. **Position** opens the right-hand object panel in place of Fields; close it to return to
Fields. Double-click a shape to edit its text directly. The text toolbar replaces the shape
toolbar at the same position, with font, size, character styles and text color. Text alignment
belongs to the shape toolbar. The top, side and bottom controls use a compact layout.

While editing shape text, dragging selects characters even when starting inside an existing
selection. It does not drag the selected text into another object. Double-click selects a word.

The **Page** menu provides a background color selector and palette. The percentage menu contains
only zoom and **Fit surface** framing controls.

When your Model admits composed components, their definition can declare nested components and
named content zones. Each zone restricts its native object kinds and minimum/maximum contents.
Read the exact component source before changing a zone; moving a selected authored object or
clearing a zone remains an explicit Canvas edit. A source update preserves compatible authored
contents and refuses a removed or incompatible filled zone instead of silently discarding it.
Nested sources keep their own access requirements, protected objects and typography. An outer
component parameter, variant or override cannot bypass an inner component's protection.

When permitted by the Model, **Selection sources** binds a region to a Surface, an exact object,
or a declared Query in the open context. Review sources before confirming: their revisions and
Query snapshot are retained explicitly. A freshness observation does not replace any pin or
declare a source removed. Confirmation preserves your authored content; it does not regenerate a
synthesis or other regions. Removing a source region also removes its content, not just its
provenance.

For a table or chart bound to a Query, available columns come from scalar Fields actually declared
on its selected rows. An empty selection does not receive guessed columns. Identical names from
different Models or definitions remain distinct. Review the native preview before confirming:
a snapshot retains its values and sources, while a live view rereads the same bindings under
current access rules without changing business values.

In **Linked table and chart**, select an already saved empty group with free layout and fixed
dimensions. Enter the declared Query and its typed parameters, then read its native columns before
choosing them. Chart categories, series and drawing bounds are explicit; decimal bounds retain
the series format and unit without approximate conversion. Review the returned rows before
confirming the object. Business values are edited in their Forms and Batch, not copied Canvas
cells. A live view does not mean realtime updates or coediting.

Duplicating a complete selection or page keeps its components, authored zones, source regions
and data objects together. New identities belong to the copy; references and snapshots remain
the ones actually retained. Copying part of an instance does not silently detach it. An edit
made before copying remains in the exact intent, and saving rechecks access and sources.

Rich text blocks retain their admitted paragraphs, lists and formatting. Apply or cancel an open
text edit before saving or exporting the Canvas; an incompatible structure is not silently
replaced with plain text.

Saving preserves local history. Undo or redo compiles against the current saved content; if that
command requires unavailable earlier source evidence, it is refused explicitly without clearing
the history stack. Copying grants no additional access to cited sources and does not turn a
retained snapshot into recalculated data.

**Retry** does not repeat an insertion, configuration change, detachment or save. After a change is
refused, check the current Canvas and its configuration before continuing; the message is not a
save confirmation. Save Surface before previewing a different source revision.

The Canvas engine owns editing, selection, viewport and content operations. App composition embeds it as a native editor. Tool-based changes and exports follow the same format and permissions.

The [native formats reference](https://developers.dagio.ai/native-formats/) links content types and policies; [graph views](https://developers.dagio.ai/graphs/) document business relation visualization.

## Coedit a Canvas

In an authorized coediting session, you can change independent objects or attributes without
replacing your colleagues' contributions. If two changes touch the same attribute, or a required
parent, lock or layout has changed, Surface reports the conflict and requires an explicit review.
A conflict is not a saved change.

Undo compensates your own change; it does not restore the entire scene. Other attributes and
customizations are retained. If removing your change would replace another person's work,
review the conflict instead of forcing the undo. Permissions and Model protections also apply
to this operation. See the [collaboration rules](https://developers.dagio.ai/collaboration/) for the required plan
and access.

## Export a saved version

Choose a saved Canvas, its pages or whiteboard region and a format permitted by its policy. PNG,
JPEG and SVG select one page; PDF can combine multiple pages. Surface prepares an exact snapshot
with its authorized images and fonts, then rendering runs as a separate server job without
substituting a newer source version.

Status reads and cancellation requests retain the original job. Requesting cancellation does not
guarantee that a remote renderer has already stopped. A ready file is downloaded only after its
bytes and receipt are verified; current source access and a host supporting file downloads remain
required. After an unknown response, resume the same request without creating another render.
The text background control is a color dot with a **Background** tooltip. Checklist settings appear
immediately before **Position**; **Show title** hides the title without deleting it. Checklists keep
padding around their content and their full frame height while editing. Sticky note colors open at
the top of the vertical toolbar; notes have a light shadow on the board.

<!-- surface-examples:start -->

## Applied examples : Visual content in the record

Insert the Canvas editor, then an Asset when a separate visual resource is needed.

### Configuration

Component properties `NativeContent.props`. [Properties and accepted values](https://developers.dagio.ai/surface-components/#nativecontent).

```json
{
  "recordProfileKey": "client",
  "contentKind": "canvas"
}
```

### Variation and connection

Component properties `NativeContent.props`. [Properties and accepted values](https://developers.dagio.ai/surface-components/#nativecontent).

```json
{
  "recordProfileKey": "client",
  "contentKind": "asset"
}
```

### UI layout example

The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.

1. Client need
2. Options
3. Selected proposal
4. Sources

<!-- surface-examples:end -->