Quick Start 3
Build a Cockpit
Assemble two to six VizSpecs into a multi-panel side-by-side layout, save it as a Cockpit, and share a single link with your audience.
What you'll use
The Cockpit Editor at compose/cockpit/.
You'll need at least one saved VizSpec to assign to a panel.
If you haven't created one yet, start with Quick Start 2.
Steps
1
Open the Cockpit Editor
Click ⊞ Cockpit Editor in the top navigation.
You start with a blank cockpit draft. The right panel shows an onboarding
guide and will display a live multi-panel preview as soon as you assign
VizSpecs to panels.
2
Load an existing cockpit or start from a template
In the Quick start section:
Load existing Cockpit — pull a saved cockpit into the draft for editing. Select from the dropdown and click Load.
Templates — apply a pre-configured panel layout (2 panels side-by-side, 3 columns, 2×2 grid). Templates replace the full draft — fill in your VizSpecs and identity fields after loading.
Load existing Cockpit — pull a saved cockpit into the draft for editing. Select from the dropdown and click Load.
Templates — apply a pre-configured panel layout (2 panels side-by-side, 3 columns, 2×2 grid). Templates replace the full draft — fill in your VizSpecs and identity fields after loading.
3
Set the cockpit identity
Open Identity:
ID — a unique slug used as the filename:
Label — the display name shown in the cockpit viewer's topbar. Example: Innovation Network — Overview.
ID — a unique slug used as the filename:
cockpit-{id}.json.
Example: innovation-overview.Label — the display name shown in the cockpit viewer's topbar. Example: Innovation Network — Overview.
4
Choose a grid layout
Open Layout and select the grid arrangement:
Split Horizontal — two columns side-by-side (best for 2 panels)
Split Vertical — two rows stacked (portrait screens)
3 Columns — three equal columns
2 × 2 Grid — four panels in a grid
The live preview on the right updates immediately. You can have up to 6 panels regardless of layout — extra panels wrap or scroll.
Split Horizontal — two columns side-by-side (best for 2 panels)
Split Vertical — two rows stacked (portrait screens)
3 Columns — three equal columns
2 × 2 Grid — four panels in a grid
The live preview on the right updates immediately. You can have up to 6 panels regardless of layout — extra panels wrap or scroll.
5
Add panels and assign VizSpecs
Open Panels and click + Add panel.
For each panel:
VizSpec — select a saved VizSpec from the dropdown. The panel preview renders immediately using the full production engine.
Title — an optional label shown in the panel header. Example: Communication Network.
Up to 4 panels render live in the preview. If you add more than 4, a Render preview button appears to trigger rendering on demand (to avoid performance impact).
VizSpec — select a saved VizSpec from the dropdown. The panel preview renders immediately using the full production engine.
Title — an optional label shown in the panel header. Example: Communication Network.
Up to 4 panels render live in the preview. If you add more than 4, a Render preview button appears to trigger rendering on demand (to avoid performance impact).
6
Reorder and manage panels
Panels can be reordered in two ways:
Drag and drop — grab the ⠿ handle on the left of any panel row and drag it to a new position.
Arrow buttons — use the ↑ / ↓ buttons on each panel row to move it one position at a time.
To remove a panel, click ✕. Each panel has a stable internal ID (
Drag and drop — grab the ⠿ handle on the left of any panel row and drag it to a new position.
Arrow buttons — use the ↑ / ↓ buttons on each panel row to move it one position at a time.
To remove a panel, click ✕. Each panel has a stable internal ID (
panel_id) — reordering
and reassigning VizSpecs never breaks the panel's identity.
7
Edit a panel's VizSpec (drill-down)
If a panel's VizSpec needs changes, click the ✎ button
on that panel row. The editor saves the current cockpit draft to the session,
then opens the VizSpec Editor pre-loaded with that VizSpec.
After saving the VizSpec, click ← Cockpit in the VizSpec Editor's topbar. You return to the Cockpit Editor with your draft exactly as you left it.
After saving the VizSpec, click ← Cockpit in the VizSpec Editor's topbar. You return to the Cockpit Editor with your draft exactly as you left it.
8
Save the Cockpit
Click Save in the topbar. In the modal:
Filename — pre-filled from the ID:
If the file exists, enable Overwrite to replace it.
Click Confirm save. The cockpit is written to disk and immediately available in the Cockpit viewer.
Filename — pre-filled from the ID:
cockpit-{id}.json.
Keep the cockpit- prefix.If the file exists, enable Overwrite to replace it.
Click Confirm save. The cockpit is written to disk and immediately available in the Cockpit viewer.
Cross-panel selection
Cross-panel node selection is always active — no configuration required. When a user clicks a node in any panel of the Cockpit viewer, the same node is highlighted in every other panel simultaneously. This makes it easy to compare how one person appears across different network views (e.g., by department vs. by role, or communication vs. hierarchy).
Viewer vs. Editor
| Cockpit Editor | Cockpit Viewer | |
|---|---|---|
| URL | compose/cockpit/ | cockpit.php?id=cockpit-{id} |
| Purpose | Author and configure | View and present |
| Who uses it | Analyst, configurator | Client, stakeholder |
| Editing | Full form UI | Read-only |
| Live preview | Yes (up to 4 panels) | Yes (all panels) |
Next step
Ready to share your Cockpit or embed a visualization?
See Quick Start 4 — Share & Embed.