Studio

Overview

Studio is the creative heart of Dimension — describe what you want, and the AI Composer writes the React/TypeScript code. The live preview updates in place. When you’re happy, Publish.

Natural Language

Describe what you want in plain English — AI writes the code

Real-Time Preview

See changes instantly with your actual data as you build

Full Ownership

All code is yours — download, modify, run anywhere

Privacy by Design: by default the AI sees your data schema (field names like deviceName, osVersion) but never your actual data values. Tenant admins can opt in to AI data access under Settings → AI. See Security & Privacy.

Builder Mode

Dimension has two modes:

Mode	Purpose
View (default)	The Gallery and any launched app run in read-only mode for end users
Builder Mode	Toggled via the wrench icon next to the Dimension logo. Exposes Workspaces, the Planner, the left rail (Connect Data, Create Actions, Build Apps, Store Credentials), and a Composer entry point on every screen

Workspace overview in Builder Mode showing the Vulnerability Management description, workspace counters for Data feed (1), Action (1) and Studio app (1), labels pointing to the left-rail shortcuts Connect Data, Create Actions and Build Apps, and the Planner panel

When Builder Mode is on, each app tile in the Studio list has a right-click context menu:

Right-click context menu on the Exploited Vulnerabilities Dashboard tile in the Studio list, showing Open in new tab, Copy link, Launch, Edit, Select, Migrate, Export, Clone, Unpublish and Delete

Menu item	What it does
Open in new tab	Launch the published app in a new browser tab
Copy link	Copy the published Share URL to clipboard
Launch	Open the app in the current tab (View mode)
Edit	Open the app in the Studio editor for the current workspace
Select	Start a multi-selection, so you can open or delete several apps at once
Migrate	Move the app and its dependencies to another workspace
Export	Download the app so it can be imported elsewhere
Clone	Create an editable copy in the current workspace
Unpublish	Take the published version offline. The draft stays
Delete	Delete the app. It goes to Settings → Deleted Entities for 30 days

Editor anatomy

When you Edit an app, the Studio editor opens. Here’s every region:

Studio editor: the Exploited Vulnerabilities Dashboard preview on the left (totals, a bar chart of the top 10 vendors and a Newest additions table), the Composer conversation on the right, and Data sources, Actions, Draft/Published and Publish in the bottom bar

Region	Contains
Breadcrumb	Studio → app name with editable icon (left-most ▼ opens the icon picker — emojis + curated icons)

Button	What it does
↻ Reload	Reload the live preview without losing chat history
`< >` X-Ray	Open the source-code viewer (Files + Key Value Store)
⛶ Fullscreen	Hide the Composer panel and expand the preview
⋯ Menu	Open the editor’s main menu (covered below)

Live preview (centre)

The middle column renders the app live with whatever data sources you’ve wired. Changes from Composer prompts appear here within seconds.

Element	What it does
Data sources counter	How many Data Feeds are wired. Click + to add. Disabled while Published
Actions counter	How many Actions the app can invoke. Click + to add. Disabled while Published
Draft / Published toggle	The two state chips at the bottom-centre. Click Published to promote
Publish button	Commits the current Draft to Published
3-dot menu (next to Publish)	Unpublish when the app is currently Published

Data sources and Actions are only editable while Published is off. Hover the disabled add button on the Published view and Studio shows “Unpublish to make changes to data sources”.

Composer panel (right side)

The AI Composer lives here. Header shows the conversation’s credit usage and a Clear Chat button. The conversation thread shows your prompts plus Composer’s step-by-step trace (Thought for X seconds, Created App.tsx, Saved Changes, summary bullets). The input footer has Add image, Inspect component, Add component template (+), and Send. The textbox placeholder changes contextually:

Build anything… — on a fresh app, before any prompts
Enhance or amend… — once the app has been generated, signalling iterative edits

Click ⋯ in the top-right of the editor:

Studio editor ⋯ menu open on a published app, showing Show Tutorial, Clone, Share URL, Generate PDF, Delete and Advanced

Menu item	What it does
Show Tutorial / Exit Tutorial	Toggle the in-app guided tutorial overlay
Clone	Create an editable copy in the current workspace (becomes your Draft)
Share URL	Open the Share URL dialog with a customisable slug. Disabled while in Draft
Generate PDF ▸	Submenu — A4 Portrait, A4 Landscape, A3 Portrait, A3 Landscape, Schedule (Coming Soon)
Delete	Permanently delete (only enabled if you own it)
Advanced ▸	Submenu — see below

Advanced submenu

Item	Action
Inspect Element	Enter selection mode — click any element in the live preview to reference it in your next Composer prompt. Equivalent to the cursor button in the Composer footer
Export	Download the complete package — source code, dependencies list, README, schema
Migrate	Move this app + its Data Feeds + its Actions to a different workspace

Draft and Published

Every app has two states:

State	Visibility
Draft	Your unpublished changes — visible only to you while you build
Published	What everyone with access to the workspace sees

The toggle and Publish button live at the bottom-centre. Unpublish is in the 3-dot menu next to Publish. Publishing makes the app visible to everyone with access to the workspace and exposes the launch surfaces (Gallery, Command Menu, Share URL).

X-Ray — source code viewer

Click < > in the editor header to open X-Ray:

X-Ray view of the Exploited Vulnerabilities Dashboard: tabs for Files, Key Value Store, Private Key Value Store and the CISA Known Exploited Vulnerabilities data source, a file tree with a components folder and App.tsx under a Draft/Published toggle, a Download Package button, and the empty state Select a file on the left to view its source

X-Ray has two tabs:

Files tab

A file-tree explorer of the React/TypeScript source the AI generated. Click any file to view its source on the right. Top of the panel has a Draft / Published toggle for diffing. Bottom of the panel has a Download Package button (same artefact as ⋯ → Advanced → Export). A freshly-built app with only a header and button shows a single App.tsx at the root and a components/ folder (visible in the X-Ray screenshot). Larger apps generate additional files as components are added.

Key Value Store tab

A per-app, persistent key-value store for state, configuration, and small bits of data the app needs to remember across sessions. Use it for:

User preferences — “Save the user’s selected department filter to the KV store under pref:dept”
Workflow state — partial form data between page navigations
App-level config — values an end user can edit from the in-app Settings page
Counters and cursors — sync watermarks, page-position memory

Composer wires the KV store automatically when you ask:

"Save the chosen department filter to the KV store and
restore it next time the user opens the app."

"Persist the analyst's notes for each device in the KV store
under key `notes:<device-id>`."

The X-Ray view of the KV Store exposes the live keys and values for inspection.

Studio Apps tab

The Studio Apps list shows every app in the workspace, grouped into Published Apps and Unpublished Apps, with a + New button and the Gallery of templates below:

Studio apps list for the Vulnerability Management workspace: a New button, a Published Apps section with the Exploited Vulnerabilities Dashboard tile, the Gallery section below with Blank Canvas Light and Blank Canvas Dark, and the Planner on the right

Each tile has a 3-dot menu in the top-right (the same Show Tutorial / Clone / Share URL / Generate PDF / Delete / Advanced menu as inside the editor) and shows the app’s icon and name. Hovering a tile surfaces quick actions for opening the app.

Templates available right now

The expanded Gallery section at the bottom of the Studio apps list:

Studio Gallery: Start from a ready-made app. Preview it, then import it and everything it needs. Official entries are Blank Canvas Light, Blank Canvas Dark, Exposure management, Licence management, MFA coverage, Patch management and Shadow AI, with the Planner on the right

Blank Canvas Light (Official) — light-mode starting point
Blank Canvas Dark (Official) — dark-mode starting point (ideal for SOC wall displays)

Click any template to start a new app in the current workspace. Press ⌘K (or Ctrl+K) anywhere in Dimension to open the palette:

Command Menu palette open in Builder Mode with a Search, navigate, or type a command box, a Studio section with Create New App, a Vulnerability Management section listing its app, data feed and action, a Security Operations section with Go to Security Operations, and the Commands section starting with Home

The palette is grouped:

Group	Contents
Current page	Actions for where you are, such as Create New App in Studio
Workspaces	Every app, data feed and action in the active workspace, and Go to links for your other workspaces. Enter to open
Commands	Home, Switch Workspace, Create New…, Toggle Theme, Import, Enter / Exit Builder Mode, Feedback, Settings

The header search field is dual-mode:

⌘F — search within the current view (e.g. filter the visible app tiles)
⌘K — open this Command Menu

Getting started

Enter Builder Mode

Click the wrench icon next to the Dimension logo. The workspace overview opens with the left rail and the Planner.

Create or open an app

New — open Build Apps in the left rail and click New, or pick Blank Canvas Light or Dark from the Gallery
Existing — right-click a tile and choose Edit, or hover and click the Edit action button
Pre-built — import an app from the Gallery. See Pre-built Apps

Connect Data (if needed)

Apps that need external data reference a Data Feed. Build the Feed first via its Composer, then click + next to Data sources at the bottom of the Studio editor.

Build with conversation

Type prompts in the AI Composer on the right. The live preview updates per prompt.

Publish

Click the Published chip at the bottom-centre. The app becomes visible to everyone with access to the workspace; a Shortcut is auto-created.

Application types

Dashboards

Real-time views of your security posture.

"Create an executive dashboard with:
 - Overall security score gauge at the top
 - Three metrics showing EDR %, Encryption %, Patch compliance %
 - Trend line of security score over 30 days
 - Top 5 risks as a horizontal bar chart"

Best for: Leadership reporting, NOC displays, team metrics. See the SOC Dashboard tutorial.

Reports

Detailed analysis exportable as PDF.

"Build a compliance report showing:
 - Summary metrics at the top
 - Compliance status by control as a table
 - Devices failing each control
 - Add a 'Generate PDF' button"

Best for: Audit documentation, client deliverables, board presentations. See the Compliance Scorecard tutorial.

Tools

Interactive applications with user input.

"Create a device validation wizard:
 - Page 1: Enter device name with autocomplete
 - Page 2: Show validation checklist (EDR, encryption, etc.)
 - Page 3: If all pass, show certificate. If fail, show issues."

Best for: Workflows, data entry, validation processes. Combine with Actions for write-back operations.

Trackers

Monitor specific initiatives or projects.

"Build a Windows 11 migration tracker:
 - Show overall progress percentage
 - Pie chart of migrated vs pending
 - Table of pending devices with owner contact
 - Filter by department"

Best for: Projects, initiatives, remediation campaigns. See the Patch Tracker tutorial.

Explore further

AI Composer

Composer footer, prompts, Inspect Component, component templates, Restore checkpoint

Components

The component library — General, Form, Popups, Navigation, Layout, Charts, Tables

Themes

Brand colours, dark mode, per-app overrides

Exporting, Sharing & Cloning

PDF, Clone, Share URL, Export, Migrate, X-Ray code download

Get started

Core Concepts

Build

Reference

Settings

Trust & Security

Overview

Natural Language

Real-Time Preview

Full Ownership

Builder Mode

Editor anatomy

Live preview (centre)

Composer panel (right side)

The Studio editor ⋯ menu

Advanced submenu

Draft and Published

X-Ray — source code viewer

Files tab

Key Value Store tab

Studio Apps tab

Templates available right now

Command Menu (⌘K)

Getting started

Application types

Dashboards

Reports

Tools

Trackers

Explore further

AI Composer

Components

Themes

Exporting, Sharing & Cloning

Overview

Natural Language

Real-Time Preview

Full Ownership

Builder Mode

Editor anatomy

Top toolbar (left side)

Top toolbar (right side)

Live preview (centre)

Bottom toolbar

Composer panel (right side)

The Studio editor ⋯ menu

Advanced submenu

Draft and Published

X-Ray — source code viewer

Files tab

Key Value Store tab

Studio Apps tab

Templates available right now

Command Menu (⌘K)

Getting started

Application types

Dashboards

Reports

Tools

Trackers

Explore further

AI Composer

Components

Themes

Exporting, Sharing & Cloning