Canvas and visual content
Organize spatial content without confusing it with a business graph.
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 links content types and policies; graph views 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 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.
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.
{
"recordProfileKey": "client",
"contentKind": "canvas"
}Variation and connection
Component properties NativeContent.props. Properties and accepted values.
{
"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.
- Client need
- Options
- Selected proposal
- Sources