Canvas is where your business is mapped, built, and run.
Not a diagram, not a dashboard, not a brain. Canvas is the operating layer — one canonical model of how a company works, and the surface where its tools get made and used. This is its design system, rendered live from @revvitapps/canvas-ui.
One layer, three modes
Map · Build · Run is the whole model. Switch the mode below — the same chrome carries all three.
Map · Build · Run
Map
See how the business actually connects — departments, capabilities and the relationships between them, as one canonical atlas.
Build
Assemble tools on a governed whiteboard from an approved catalog. Validate before publish; nothing runs until it passes.
Run
Operate the published tools — command centers, field checklists, exception queues — with the same objects you mapped.
What the system enforces
A handful of rules make Canvas legible in any product and readable in greyscale.
Selection, or primary action, or a Revvit suggestion — never decoration or a chart palette.
Every state pairs colour with shape, border, hatch, icon or a visible word. Read it in greyscale.
Watch is a hatched neutral; blocked is danger with the reason attached. No green/amber/red.
Saira names the object, IBM Plex Sans tells its story, IBM Plex Mono carries identifiers.
Consume it
The showcase you are looking at imports the package. So does every Revvit product.
import "@revvitapps/canvas-ui/styles.css";
import { CanvasShell, Metric, Button } from "@revvitapps/canvas-ui";
<div className="canvas-studio" data-cs-theme="auto">
<CanvasShell mode="run" title="Acme Field Services" subtitle="tenant · acme-2201">
{/* your panes */}
</CanvasShell>
</div>