Layouts: Classic and Studio

Drawbridge comes in two layouts. Classic is the one it has always had: a toolbar of words across the top, the Shapes palette on the left and the Properties card floating over the drawing. Studio is the new one, and the one Drawbridge opens in: an app bar that names the document, a tool dock floating over the drawing, the pages down the left and the facts of what you have selected docked on the right.

They are the same editor. Switching changes the chrome around the drawing and nothing in it: your drawings, files and exports are identical whichever layout made them, and a file opens the same in either. Classic is not on its way out — both layouts stay.

Choosing one

Drawbridge opens in Studio until you choose otherwise. Open the app menu and use the Layout row under the theme toggle: Classic or Studio. The same switch heads the Presets section of Edit layout. The change is immediate, with no reload, and the choice is remembered on this device: choose Classic once and Drawbridge opens in Classic from then on. In Classic the app menu is the ☰ button at the top right; in Studio it is the ☰ button in the same place.

The first time you are in Studio, a tip says where Classic is and offers a Back to Classic button.

Studio, region by region

The app bar. On the left: the Drawbridge mark (it opens About), the document's name and, beside it, its state — Saved, Saving… or Unsaved changes. The name is a menu: New, Open, Save, Save as…, Revisions, Storage… and Templates…. In the middle, the views: Draw is the drawing; Tables is the page as rows (see Tables under Files); Checks lists what looks unfinished on the page, with its count beside the name (see Troubleshooting); Pack puts the drawings and the tables you choose in one file (see The handover pack under Export). On the right: Import, Export, Share — which opens the same sharing panel as the app menu's Share… — and ☰, the app menu.

A view in a window of its own. Tables, Checks and Pack can each open in a window beside the main one, so you can keep the table or the checks up while you draw. Hover a view's name and press the ↗ in its corner, right-click the name and choose Open in New Window, or drag the name down off the bar and let go; on the desktop app, View ▸ Open in New Window too. To have it as a tab instead, right-click and choose Open in New Tab, or ⌘-click (Ctrl-click) the ↗ — in a browser, and in the desktop app on a Mac, where it joins the window's own tabs. The window belongs to the page you opened it from and says so in its title — Pack, which covers every page, is one window for the whole document. It is the same document, not a copy: picking a row there selects the device in the drawing (on another page, the main window goes there), an edit there is the drawing's, and ⌘Z (Ctrl+Z) in any window undoes the last step wherever it was made. Deleting a page closes its windows; closing the main window closes them all, and the desktop app opens them again where they were the next time it starts. Draw stays in the main window. Views in windows are a Studio feature.

The app menu in Studio also carries what has no place of its own in the bar: under This page, Layers, Quick shapes and the View menu; under Edit, Redo and Replace. View, Quick shapes, Blocks and Layers open as submenus: their options appear beside the menu, level with the row you pressed, and the menu stays open while you flip a switch — Esc, a press elsewhere or ☰ again puts both away. Layers is also a panel you keep while you work: click shapes on the drawing to select them for Move here, and the menu goes while Layers stays, hanging from the ☰ button. The preferences — Auto-save, Auto link detection, Fill the other end's address and the two resets — are folded under one Preferences row: press it to show them, and the menu stays open while you change one. It is folded again the next time the menu opens. Blocks lives on the page card (below); it joins This page only while the Facts panel is floating or hidden, where the card cannot be seen. Align is on the Facts panel too: select two or more and it is the Arrange section at the top of their card.

The tool dock, floating along the bottom of the drawing:

Tool Key What it does
Select V Puts away whatever is armed, so the next press on the drawing selects
Device D Opens the device picker at the pointer — type a name, press Enter — and closes it again
Cable C Draw a cable between two devices
Zone Z Draw a zone
Rack R Place a rack
Text T Add text
Flow F Draw a flow arrow
Undo Undo the last change (⌘Z / Ctrl Z); Redo is ⇧⌘Z / Ctrl ⇧Z, and in the app menu

Themes. Studio comes in six looks: ☰ → Preferences → Theme picks one, and the change is immediate. Each has a light and a dark side and follows the same light-or-dark setting as the rest of the app; the pictures below show each one light on the left and dark on the right — click one to see it full size. Your cables keep their speed colours in every theme. A theme changes how the app looks while you work, including the drawing surface; the files you export — SVG, PNG, PDF, the HTML viewer — never change with it. The choice belongs to this computer, not to the drawing. Classic has no themes of its own.

Warm slate is the one Studio starts in: warm greys, an ink-black primary, brass for what is live.

Studio in Warm slate, light beside dark

Graphite is an instrument panel: cool greys, cockpit lettering (B612), and in dark mode white for what is live — the chrome has no colour, only the network does.

Studio in Graphite, light beside dark

Blueprint is a drafting table: the chrome is pale paper, the drawing surface cyanotype blue, and the drawing on it white line work — hollow square tiles, white labels, each family's icon in a pale version of its colour — with what you select marked in amber, the way a checker redlines a drawing.

Studio in Blueprint, light beside dark

Swiss is signage: white chrome, square tiles, grey rules, and one red for what is live.

Studio in Swiss, light beside dark

Fabric is a security console: white panels on a cool grey, Inter throughout, the left dock as a slate sidebar — the pages, Shapes, whatever you dock there — and one signal red for what is live: the lit tool, the page you are on, what you select. In dark the whole chrome takes the sidebar's slate.

Studio in Fabric, light beside dark

Bubblegum is pastel: pink chrome, lavender lines and one candy pink for what is live; in dark it is a violet-black with a brighter pink.

Studio in Bubblegum, light beside dark

Your own buttons on the dock. The + at the dock's end lists every command Drawbridge has — the same list ⌘K (Ctrl K) searches. Tick one and it joins the dock after Undo, as a button with an icon and a short word: Page for New page, PDF for Export PDF, Schedule for the cable schedule. Pressing it does exactly what the command does from its menu. Untick it to take it off, or right-click a button you added to open the list again. The dock takes six of your own, and they belong to this computer rather than to the drawing, so a file you send someone does not rearrange their dock.

The dock never runs into the zoom controls beside it: it shows as many of your buttons as the window has room for, in the order you added them, and the rest come back when the window is wider — the list says how many are waiting. On a narrow window even the + gives way; ☰ → Dock buttons… opens the same list at any size.

The lit tool is the one armed. To add a device: point where it goes, press D, type a few letters of its name and press Enter — see The device picker under Shapes. The palette is still there to browse, as the Shapes drawer: switch it on in Edit layout and it floats along the drawing's left edge.

The view cluster, in the bottom-right corner: zoom out, the zoom level, zoom in, Fit, Isometric — with its quarter turn beside it while the view is isometric — and the overview map, which is off in Studio until you press it.

The status line, at the drawing's top left: what is on the page and what is selected — "11 devices, 18 cables, 1 selected", or "Empty page" — and, while the View menu hides anything, how much: "…, 2 hidden by View". ☰ → View shows what and puts it back. When Drawbridge has something to tell you — "Panels locked", "Layout copied" — it says it there for about four seconds instead of in a pop-up at the bottom, with its action beside it when it has one; point at the message's buttons and it waits for you. Anything that went wrong is still a pop-up at the bottom, above the tool dock, and so is a notice that stays until you close it, so neither is missed.

The pages strip, down the left: one card per page, a small picture of the page over its name, with the page you are on outlined. Click a card to go there, double-click its name to rename it, drag it up or down to reorder, and use the × in its corner to delete it — a page with something on it asks first. The + at the top of the strip adds one. A picture catches up a moment after you stop changing that page, and the others stay as they are. Dock the pages anywhere other than down a side — the bottom, or floating — and they are a row of names, as in Classic.

Rows or pictures. When the strip is wider than one card — Shapes docked above it, say, or a wider dock — two buttons at its top choose the layout: rows, a small picture beside each name, so many pages fit in a short strip; or pictures, the cards, as many to a line as fit. Until you choose, a short strip shows rows and a tall one pictures; your choice is kept on this device. ↓ 3 more at the foot says how many pages are out of view below, and a press brings the next one up.

The Facts panel, docked on the right: what is selected, in the same tabs as Classic's Properties card. With nothing selected it stays where it is — so the drawing does not change width every time you click — and shows the page card: the page's name and counts, its blocks as a checklist, the document's title and revision, the text scale and line weight, and the branding. See In Studio: the page card under Shapes.

The drawing sits on warm paper with a fine grid every 24 px — three steps of the 8 px snap, so every line is a place a device can land. Everything live on it is brass: the selection ring and its handles, the marquee, a device a cable is about to land on, a smart guide. The grid and the brass are on screen only; an export is the same from either layout.

In a narrow window

Under 1100 px wide, Studio makes room for the drawing: the tool dock shows its icons alone and moves to the drawing's bottom-left corner — hover a tool for its name and key — and the pages strip shows the page names without their pictures. Widen the window and both come back.

Studio is made for windows at least 1024 px wide. Narrower than that, the drawing between the pages strip and the Facts panel gets small and the controls along its foot start to meet; ☰ stays within reach at any width, and ☰ → Layout → Classic switches to the layout that folds its toolbar into a menu and keeps the drawing wide.

Each layout keeps its own arrangement

Studio and Classic remember their panels separately. Edit layout in Studio arranges Studio and in Classic arranges Classic, Reset to default goes back to that layout's own starting point, and arranging one never moves anything in the other. Studio's Presets begin with Studio, its own starting point, where Classic's begin with Default. Everything else about the workspace works the same in both — floating panels, tabs, the layout file, Lock panels — see Your workspace.