Classic canvas

Route/editor Route/paths PlanDesigner plandesigner PlanPathspaths

The Data Designer (/editor) and the Paths editor (/paths) are the two canvases the workspace unifies. They remain the studio's default surfaces until an installation moves its rollout flag to default, and they redirect into the workspace at only, carrying the project, version, domain and selection. The suite dropdown lists them as Designer and Paths Editor; the launcher cards are Data Designer and Paths.

Both surfaces share the studio header — project and version pickers, the Canvas | Code toggle (Canvas | Code | Journey on paths), Tags, the Schema quality pill and the Settings gear — a footer with the project, version, Read-only and Unsaved state, zoom, grid and snap-to-grid, and, at the preview and default stages, a dismissible banner about the workspace.

The Data Designer

A React Flow canvas of the version's classes, their properties and the edges between them.

Sidebar — sections Classes, Properties, Groups and, when the operator sets NEXT_PUBLIC_REPO_WORKFLOWS=1, Workflows (imported Arazzo workflows, with Linked, Workflow, Error and Unlinked step badges). Each has a search box. Drag + New Reference onto a class or + New Group onto the canvas. The footer: Import classes, Class templates, Add class, Browse property templates, Suggest properties with AI, Add property. A class's menu: Hide class on canvas, Edit class, Delete class.

Tools rail (top left) — a Read Only Mode chip; Expand and Collapse all properties; Search (Ctrl / ⌘+F); Focus and Focus on group; and hide filters for Empty classes, Unconnected classes, Deprecated classes, Hide group members, Node ghosts, Selected only and Show all nodes.

Search rail — searches with type filters (All, Class, allOf, oneOf, anyOf; Any, Has properties, No properties), Recent Searches, a Dependency graph overlay (all, depends-on, dependents, trace chain), Impact Analysis for the selected class, and a Focus mode with degree controls (Esc exits).

Canvas objects — class nodes (with Hide class, Delete class, Edit property, Remove property from class, Change colors), groups (Duplicate group (all classes)) and sticky notes. Relationships are drawn by connecting a property handle to a target class.

Floating panels — Schema Metrics (classes, properties, relationships, quality, complexity, docs gaps, naming, "Why is this score?"), Schema timeline (Compare schema scores, Export version history as PDF), Version scoring, Reference lint (Run lint), Spacing (distribute horizontally or vertically), and a Memory Profiler.

Presentation mode — a slide-by-slide walk through the canvas: ← → and Space change slide, N shows speaker notes, T resets the timer, Esc exits.

Layouts, snapshots and diagram export

The layout menu saves and loads named layouts (name, description, notes), auto-saves at an interval, exports and imports layout JSON, and distinguishes your personal default from the team default. Quick snapshots capture, compare and gallery the canvas (Import shared snapshot, Copy JSON, Download JSON, Pin as team default). Arrange top-to-bottom or left-to-right, or Group classes with the same tag.

The Export menu writes the diagram as PNG, SVG, JPG, PDF, Mermaid (.mmd), PlantUML, GraphViz DOT, GraphML or Canvas JSON. The Export Canvas wizard chooses the range (full canvas, viewport, selected groups), resolution, quality, background, whether to include UI elements, the grid, notes and a timestamp, and the page size and orientation.

Canvas Settings

The Settings gear: Behavior (click-to-focus); Data & History (search history, Clear History); Grid (show, snap, smart guides, size, style); Background (colour, image, cover / contain / tile, gradients, texture, blur); Edge Styles (solid, dashed, dotted, double; arrow, diamond, circle, open heads; direct, optional, weak, bidirectional); Edge Routing, Edge Animation, and a Preview. Light Mode and Dark Mode are here too.

Dialogs

The class edit dialog (form, JSON, YAML and Example tabs; tags; discriminator mapping; pattern properties; an AI mode), the property dialog, Edit Property in Class, Extract Property to Class, Select Type, Manage Tags, Import Classes, the two template libraries and Confirm Delete are described on Schemas.

Right-hand panels

The Contract Inspector rail (tabs Document, Paths, Components, Problems; search "name, get /path, tag:, #/pointer"; Edit document metadata…; "Open the Code view to evaluate readiness") and the Reference Preview pane — a live consumer-docs preview with Desktop, Tablet and Mobile frames and Show applied draft ("Add a path, operation, or schema and it will appear here without publishing.") — sit beside all three classic views.

The Paths editor

A drag-and-drop canvas for paths and operations — "Drag from sidebar → Drop on canvas", "Drag classes/properties from sidebar → Drop on operation nodes", "Click operation nodes to configure". With nothing selected: No Project Selected — "Please select a project and version from the header to view paths."; with a version: Select a Path — "Choose a path from the sidebar to start creating endpoints."

The API Designer sidebar has tabs Paths, Operations, Classes, Properties, Security and Servers: HTTP method chips to drag onto a path, parameter chips (Query, Path, Header, Cookie), the create-path form, Import paths from OpenAPI, and Delete Path. The canvas offers Auto layout and confirms every removal (Delete Operation, Unlink Class, Remove Class from Canvas, Delete Parameter, Unlink Response, Delete Response). The panels — operation, parameter, response, request body, Security Schemes, Servers — and the Journey view are on Paths.

Keyboard

Ctrl / ⌘+F search · Esc leave focus, then isolate, then search · Alt+Shift+[ / Alt+Shift+] collapse / expand all groups · Ctrl / ⌘+Shift+A the assistant.