The editor at a glance

Summary

Blotter Builder is a single-screen browser editor built around a central artboard. Everything else on the screen is one of four supporting areas: the upload and layer rail, the creative tool rail, the inspector, and the canvas controls that sit over the artboard's lower edge.

Use it when

• You are opening Blotter Builder for the first time and want to know where each control lives before you commit to a design.
• You are following a step in another article that names a panel — Uploads, Layers, Adjust, Options, or Export — and need to find it.
• You are switching between a laptop and a phone and the controls have moved.
• Artwork has disappeared from view and you need to identify which control brings it back.

Before you begin

Nothing. The editor opens at https://blotterbuilder.tdl.fyi with an empty Classic square artboard, and no account or upload is required to look around.

The first time you open the application in a browser, a full-screen introduction appears, headed Welcome to Blotter Builder by TDL. Dismiss it with Click here to get started or Skip intro. Both dismiss the introduction and reveal the editor; the introduction does not return on later visits in the same browser.

Steps

1. Dismiss the introduction with Click here to get started or Skip intro.
2. Look at the centre of the screen. The white square is the artboard — the printable area of one blotter sheet. The darker surface around it is the stage, which holds the artboard but is never printed.
3. Look at the left rail. Its sections run top to bottom: Uploads, Library, Templates, Layers, and Saved drafts. This rail is where artwork enters the design and where placed items are managed.
4. Look at the narrow vertical strip between the left rail and the artboard. This is the creative tool rail: Select, Eyedropper, Pencil, Brush, Eraser, Shape, Pen, and Text. Each button names its keyboard shortcut — Select is V, Eyedropper I, Pencil N, Brush B, Eraser E, Shape U, Pen P, Text T.
5. Look at the right rail. This is the inspector. With an empty artboard it shows Format, View, Options, Color, Creative properties, Creative filters, and Export.
6. Look at the lower-right corner of the artboard. These are the canvas controls: undo, redo, the current zoom percentage, and Fit.
7. Select a placed layer on the artboard. The inspector adds a Transform group above Color and an Adjust group below Creative filters, and the canvas controls add Recenter and Fit to frame.

What changes

Reading the layout changes nothing in the design. The states described above appear and disappear on their own as you work:

• The Getting started panel covers the middle of the artboard while the artboard is empty. It lists five steps and carries Open options, Open uploads, and Open export buttons. It disappears as soon as artwork is placed on the artboard, and it is a screen overlay only — it is never part of an export.
• Adding a file to Uploads does not put anything on the artboard. The upload appears as a card in the Uploads section with a ⋯ actions menu (Place image, Fill canvas, Remove background, Delete); the artboard stays empty, and Getting started stays visible, until you choose one of the placement actions.
• Placing artwork creates an entry in Layers — the first placed image is named Image 1 — with inline ↑, ↓, Hide, Lock, Delete, and ⋯ controls.
• Once you have made changes, the Saved drafts section reports Saved on this device. with a timestamp. Reopening the editor then offers a Recover unsaved design? dialog with Restore recovered design, Discard recovery, and Not now; the dialog states Nothing will replace the current canvas until you choose restore.

Print note

The layout itself has no effect on the printed edition. The stage, the Getting started panel, rulers, and guides are on-screen references and are not included in exports.

Three placeholder disclosures are visible in the inspector from the moment the editor opens, and they do affect what you can conclude from the screen:

• A Grid — Placeholder badge in View, with the note that 0.25in grid/perforation spacing is provisional — not yet confirmed against physical stock.
• A note under Bleed / safe zone (desktop) that bleed and safe-zone lines use placeholder margins (0.125 in bleed, 0.25 in safe).
• A Color profile — Uncalibrated badge in Export, with the note that print export uses a placeholder colour profile and that colour is not final.

Treat on-screen grid alignment, margins, and colour as provisional until those disclosures change.

Warnings and limits

• Try demo artwork loads a file labelled Demo only — not for production. The Templates section carries the same restriction: Template only — not for production — replace with your own artwork before ordering. Neither is intended for an edition you will order.
• Clear local recovery in Saved drafts discards the on-device copy of your work. There is no separate copy unless you are signed in and have saved a cloud draft. Device recovery expires after 14 days and is removed if site data is cleared.
• Discard recovery in the Recover unsaved design? dialog is the same irreversible action taken at reload. Choose Not now if you are unsure.
• Both side rails scroll independently of the page. If a control named in these articles is not visible, scroll inside the rail before concluding it is missing.

Desktop and mobile

The layout switches at a viewport width of 768 px.

768 px and wider — the three-rail layout described above: left rail, creative tool rail, artboard, inspector.

Narrower than 768 px — the same functions are redistributed:

• The header collapses to a single Open navigation menu button.
• The creative tool rail becomes a horizontally scrolling strip directly under the header.
• The artboard fills the middle of the screen, with the canvas controls still overlaid on its lower edge.
• A bottom bar replaces both side rails with five buttons — Uploads, Layers, Adjust, Options, Export — each opening a sheet titled after it (Uploads tools, Layers tools, and so on) with a Close button and a drag handle.

Sheet contents observed at 390 × 844:

Two differences are worth noting before you plan work on a phone:

• Saved drafts sits in the left rail on desktop but in the Options sheet on mobile.
• Rulers (desktop) and Bleed / safe zone (desktop) are labelled as desktop controls in Options.

The Color, Creative properties, and Creative filters groups are not in any of the five bottom-bar sheets above. Instead, selecting a tool in the top tool rail opens a separate sheet, Creative tools, that contains all three — see Artboard, stage, and tool rail for the full mobile behaviour and per-tool content.

Troubleshooting

Related topics

• Classic, Wide, and Hexagon formats
• Artboard, stage, and tool rail
• Supported files and upload limits
• Place vs. Fill canvas
• Grid and realistic preview
• Device recovery

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 — first-run dialog Welcome to Blotter Builder by TDL with Click here to get started and Skip intro; did not reappear after a page reload in the same browser.
• Observed — desktop region structure and section order in both rails, the eight creative tools and their shortcut letters as given in each button's accessible name, and the canvas controls with tooltips Undo (Ctrl+Z) and Redo (Ctrl+Shift+Z).
• Observed — pressing B with focus on an unrelated button switched the active tool to Brush, confirming the shortcuts are global to the editor.
• Observed — Try demo artwork added Demo artwork (non-production).jpg, 2048×2048px · 4.98 MB, to Uploads without changing the artboard; the ⋯ menu offered Place image, Fill canvas, Remove background, Delete.
• Observed — after Place image, the Getting started panel was removed, Image 1 appeared in Layers, Transform and Adjust appeared in the inspector, and Recenter and Fit to frame appeared in the canvas controls. Transform reported 21.33 × 21.33 in · 0° and a red 96 DPI — LOW badge for the 2048 px demo file.
• Observed — mobile sheet titles and contents at 390 × 844, per the table above.
• Observed — reload after edits produced the Recover unsaved design? dialog with Stored: Only on this device and the three listed buttons.
• Product source — the layout breakpoint is a (width <= 767px) / (width >= 768px) media-query pair in the application stylesheet, governing the left rail, inspector, tool rail, and mobile bottom bar. Confirmed observationally: at 768 px the three-rail layout was active and the bottom bar was display: none.
• Observed — Color, Creative properties, and Creative filters are reachable below 768 px, but not through the bottom bar: selecting a tool in the top tool rail opens a separate Creative tools sheet containing all three. Verified in Artboard, stage, and tool rail.
• Needs product confirmation — undo and redo remained disabled after Place image and after dragging on the artboard at 1280 × 720. Undo and redo behaviour belongs to Undo, redo, fit and recenter; this article claims only that the controls exist and are disabled when nothing is available to reverse.

Verification log