Artboard, stage, and tool rail

Summary

The artboard is the printable design surface; the stage is the darker work area that holds it and never prints. The creative tool rail is the strip of eight tools next to the artboard, and each tool changes what the inspector shows and how clicks and drags on the artboard behave.

Use it when

• You want to know why clicking near your design sometimes does nothing and sometimes deselects a layer.
• You are choosing a creative tool and want to know what options appear before you commit to drawing, painting, or typing.
• You are following steps in another article that assume you already know the difference between the stage and the artboard.

Before you begin

Nothing to prepare. This article assumes you know where the tool rail and inspector sit — see The editor at a glance first if you have not opened the Builder yet.

Steps

Reading the stage and artboard

1. Look at the full darker rectangle in the middle of the screen. This is the stage. It never prints and has no fixed size of its own — it exists to hold and frame the artboard.
2. Look at the light rectangle (or hexagon) centred in the stage. This is the artboard. Its shape and proportions match the selected format exactly — switching Classic square, Wide, or Hexagon in Options reshapes the artboard and the frame around it together.
3. Note the narrow margin of stage between the artboard and the tool rail or inspector. This margin is part of the stage, not the artboard — clicking in it does not act on your design.

Using the tool rail

4. Select a tool in the rail — Select, Eyedropper, Pencil, Brush, Eraser, Shape, Pen, or Text — by clicking it or pressing its shortcut key (shown in parentheses on each button).
5. Check the Creative properties group in the inspector. Painting and drawing tools populate it with tool-specific controls before you draw anything:
   • Pencil — New paint layer, Brush size
   • Brush and Eraser — New paint layer, Brush size, Hardness, Tip shape (Round, Square, Calligraphic 45°)
   • Shape — Shape (Rectangle, Ellipse, Line, Regular polygon), Stroke width
   • Text — Font, Size, Weight, Italic, Underline, Alignment, Line spacing
   • Select, Eyedropper, and Pen leave Creative properties empty until you act with them.
6. Select a placed layer with the Select tool. The inspector adds Transform above Color and Adjust below Creative filters, and the canvas controls add Recenter and Fit to frame next to Undo/Redo.

Selecting and deselecting

7. Click a layer on the artboard with the Select tool to select it.
8. Click in the stage margin outside the artboard — this does not deselect the layer or change the active tool.
9. Press Escape to deselect the layer. Transform and Adjust are removed from the inspector.

What changes

• Choosing a format (Classic square, Wide, Hexagon) resizes the stage's frame and the artboard together, in the same proportions as the format's physical dimensions. See Classic, Wide, and Hexagon formats.
• Choosing a creative tool changes only the Creative properties group and how the next click or drag on the artboard behaves. It does not, by itself, create a layer or change existing artwork.
• Selecting a layer adds Transform and Adjust to the inspector and Recenter/Fit to frame to the canvas controls; deselecting (via Escape) removes them again.
• Recenter and Fit to frame did not change a selected layer's X and Y position values in Transform when tested after dragging the layer off-centre — they behave as view controls, not as ways to reposition a layer. To reposition a layer numerically, edit X/Y directly in Transform.

Print note

The stage, its margin, and the tool rail are editor chrome only — none of it is exported or printed. Only what is inside the artboard boundary is candidate content for export, subject to the placeholder bleed and safe-zone margins noted in The editor at a glance.

Warnings and limits

• The stage margin looks like empty canvas but is not part of the design. Dragging a layer into it does not clip or delete the layer — the layer's Transform values simply place it outside the printable artboard, which Review production readiness is expected to flag (see the Output chapter).
• Clicking inside the stage margin does not deselect a layer, which can be surprising if you expect a click-away-to-deselect pattern. Use Escape, or click directly on empty artboard space, to deselect deliberately.
• Needs product confirmation: exact scroll-wheel, pinch, and space-drag pan/zoom gestures on the stage. Repeated attempts to trigger a wheel-zoom or scroll-pan in this session did not produce a measurable change in the zoom percentage or stage transform, but the test tooling used to simulate these gestures is not confirmed reliable for this canvas, so this is recorded as unresolved rather than as "not supported."

Desktop and mobile

The stage and artboard occupy the same central position in both layouts. The tool rail is a vertical strip on desktop (768 px and wider) and a horizontally scrolling strip beneath the header on narrower viewports, per The editor at a glance.

On mobile, Color, Creative properties, and Creative filters are not in the bottom bar's Adjust sheet — selecting Adjust with a paint or shape tool active shows only Remove Background and its helper text. Instead, selecting any tool in the top tool rail opens its own sheet titled Creative tools, containing Color, Creative properties, and Creative filters with the same tool-specific content observed on desktop (for example, Font/Size/Weight/Alignment for Text, Shape/Stroke width for Shape). Select Close to dismiss the Creative tools sheet; it does not reopen automatically on its own — select a tool rail button again to bring it back.

Troubleshooting

Related topics

• The editor at a glance
• Classic, Wide, and Hexagon formats
• Select, reorder & rename (Layers and layout)
• Size, position, rotation & opacity (Layers and layout)

Verification note

Verified against Blotter Builder on 2026-07-20.

Source notes

Primary observations — all from the live application at https://blotterbuilder.tdl.fyi, 2026-07-20:

• Observed — DOM structure of the stage: a dark centerStage container holding a stageFrame/stage pair sized to the artboard format, with a fixed-width tool rail and inspector on either side. Switching format resized stageFrame/stage together (Classic square 594×594 → Wide 504×773 → Hexagon 527×601 in one test viewport), while the tool rail and inspector widths did not change.
• Observed — cycled all eight tools and recorded the Creative properties group's content for each, per the table in Steps. Select, Eyedropper, and Pen showed an empty Creative properties group with no layer selected and nothing drawn.
• Observed — selected a placed layer: Transform and Adjust appeared in the inspector; Recenter and Fit to frame appeared next to the existing Undo/Redo/zoom/Fit canvas controls.
• Observed — clicking in the stage margin (outside the artboard, inside the stage) with a layer selected did not remove Transform/Adjust from the inspector. Pressing Escape immediately removed them.
• Observed — dragged a selected layer from artboard-center (X/Y 3.75/3.75 in on a 7.5×7.5 in artboard) to X/Y 5.67/4.89 in, then selected Recenter and separately Fit to frame; X/Y and the zoom label (100%) were unchanged after each.
• Needs product confirmation — scroll/pinch/drag pan and zoom gestures; see Warnings and limits.
• Observed — at 390 × 844, the bottom bar's Adjust sheet showed only Remove Background with the Brush tool active — no Color, Creative properties, or Transform. Selecting Select, Brush, Shape, or Text in the top tool rail instead opened a separate sheet titled Creative tools containing Color, Creative properties (with the same tool-specific fields as desktop — confirmed for Text: Font, Size, Weight, Italic, Underline, Alignment, Line spacing), and Creative filters. Selecting Close dismissed it; it did not reappear on its own when a different tool was chosen afterward without tapping the tool rail again. This resolves the mobile reachability question raised in The editor at a glance.

Verification log