Quick Topo Create a topo →

Quick Topo user guide

Turn a crag photo into an interactive climbing topo — draw the lines, add grades and approach notes, then share a link or export print-quality images and PDFs.

Quick Topo is a free web app: there's nothing to install and no account is needed to make, save or export a topo — everything works straight from the home page. This guide walks through the whole app, screen by screen.

1. Getting started

From the home page, tap New topo from photo and pick a crag photo — the editor opens on it. JPEG, PNG, WebP and HEIC/HEIF (iPhone) photos are all accepted. If the photo carries GPS data, the crag location is filled in for you automatically.

The same button reopens a file you saved earlier: pick a project file (.topo) or an Interactive HTML topo you exported instead of a photo, and carry on editing it.

On a computer you can also drag a photo or a .topo file anywhere onto the home page. The top bar offers a search box to jump to any topo and a ⋮ menu for Record approach, Recorded approaches (a library of GPS walk-ins saved on your device) and your account settings. Below the buttons you'll find My topos (everything saved on this device or in your account), Public topos and a Map of located public topos (which automatically frames a ~50-mile radius around you when location permission is already granted). Your work is saved automatically in the browser as you go — but a browser is not a backup, so see Sharing & backup once a topo matters to you.

2. The editor

Editing & viewing

The editor is always ready for editing. Once a topo is shared, a View button appears in the toolbar (under ⋮ on phones) to open its public read-only page — the exact view your readers see, down to the climb you have selected. On that public page, the ⋮ menu has an Edit option that brings you straight back to the editor. The ← button (top-left) returns you to where you opened the topo from.

The tools

In the toolbar you get these tools (shown as compact icon buttons on phones):

Drawing mechanics

With Draw climb or Variation active, click along the line of the climb to drop anchor points. A hint bar shows at the bottom with a Done button. To finish a line:

When you finish a climb, the editor selects it and focuses the name field so you can type its name straight away. Pressing Enter in the name, grade or stars field (or ⌘Enter / Ctrl+Enter in the description) finishes editing and re-arms the draw tool for the next climb. The same click-to-place mechanics apply to the Approach / descent line and Placeholder climb tools.

Multi-pitch climbs

Any climb can be broken into pitches. Select it, then press Make multi-pitch at the bottom of the climb details panel (or B) and click its line wherever a belay is — a ring appears on the line, labelled with the pitch that starts there (P2, P3…). Each pitch gets its own row where you can set a grade, a length and a note like "slab to a bolt belay" — pitch notes can @-mention other climbs and photos just like a description.

Branching, merging and hidden sections

Lines can share starts, middle sections and ends, which is how variations and linked pitches are drawn:

Editing anchors, labels and using the magnifier

With a climb selected (Select tool), its anchor handles appear on the line:

Keyboard shortcuts

Press ? at any time for this list:

KeyAction
SSelect tool
DDraw climb tool
VVariation tool
BAdd a belay to the selected climb (multi-pitch)
OMark a hidden / behind-feature section on the selected climb
TOpen climb table editor
EnterFinish the line being drawn
Backspace / ⌘ZRemove last point while drawing
EscCancel drawing / deselect
Drag a numberMove a climb's number and grade label by hand (double-click puts it back)
⌘Z / ⇧⌘ZUndo / redo
⌘SSave project file (.topo)
FZoom to fit
DeleteDelete selected climb / annotation
Double-click / double-tap lineAdd an anchor there
Double-click / double-tap anchorRemove that anchor (or Alt + click)
Space + drag / middle-dragPan
Hold ShiftMagnifier cursor (desktop)
Start drawing on a lineBranch off it (shared start)
Click a line while drawingMerge into it
?This help

Use Fit (or F) to zoom the photo back to fit the screen at any time.

3. Multiple photos per topo

A topo can hold up to 50 photos when you're signed in (10 without an account) — handy for a crag with more than one wall or sector. A photo strip runs along the bottom of the canvas. Click a thumbnail to switch to that photo; the drawing tools then act on the photo you're viewing. Climb numbers stay continuous across all the photos, and an untitled photo automatically displays the name of its first climb until you give it a title of its own.

To add a photo, click the + tile at the end of the strip (you can add several at once) — or, on a desktop, drag photos from your computer straight onto the editor. To manage photos and stacks (groups of adjacent photos showing the same buttress or sector):

4. Editing the base image

Click Image in the toolbar to open the Edit image panel. Here you can:

Cancel discards the changes; Save bakes the edits into the image. Note that saving clears the undo history, so it's a good moment to be sure.

5. Climb details & table editor

The right-hand panel lists every climb under Climbs, in guidebook order. Click a climb (in the list or on the photo) to select it; drag list rows to reorder them, and the × deletes a climb. Selecting a climb slides its details pane in over the list, with ‹ All climbs to return and ‹ Prev / Next › to step through adjacent climbs in order:

To edit many climbs at once, click Table (T) at the top of the climbs list. It opens a spreadsheet-style table where you can Tab across cells (name, discipline, grade, stars, length, first ascent and description), drag rows to reorder climbs, or paste multiple rows from a spreadsheet (Excel, Google Sheets, Numbers or TSV/CSV text) to update or add climbs in bulk.

When you select an annotation instead, the inspector shows its own controls — the label Text (selected ready to type over when you place it, and supporting @-mentions just like a climb description), a Rotation slider for directional symbols, Colour and Style for descent/placeholder lines, and a Delete annotation button.

6. Crag info

Click Info in the toolbar (it's under the ⋮ menu on narrow screens) to open Crag info, which holds everything about the crag itself:

7. Topo settings & style

The toolbar separates rules and behaviour (Settings) from how the topo looks (Style):

At the bottom of either dialog, Save as my defaults makes new topos start from this topo's configuration, and Restore my defaults applies your saved defaults to the current topo.

8. Accounts & sign-in

You never need an account, but signing in keeps your topos with you on any device. Sign-in is by magic link: open Sign in, enter your email, press Email me a link, and click the link we send (it works once and expires in 15 minutes) — no password. Once signed in, you stay signed in on that device for up to 400 days of use so you aren't caught logged out without signal at the crag.

The account button opens Your account, in three tabs:

Sign out sits at the bottom of the dialog.

9. Sharing & backup

By default a topo is local-only: it lives in this browser's storage and there's no other copy. The Share button opens Share & back up, and Back up & create links makes a hosted copy — a real backup — plus two private links:

The status pill floating in the corner of the photo always tells you where a topo stands: red while it exists only on this device (or a sync failed), orange while changes are syncing, and green once they're safe on the hosted copy — settling to a small green tick when nothing's changed for a few seconds. Tap it to see the current backup state and a log of what each sync in this session carried and how long it took. Once shared, your changes and added photos sync to the hosted copy automatically.

Other options in the dialog:

You can still keep an offline copy at any time: choose Project file (.topo) in Export (or press ⌘S), which downloads the project file to your computer.

10. Exporting

Export opens Export topo. Pick a Format and the relevant options appear:

FormatBest forOptions
ImageA picture of the topoImage type — PNG (lossless), JPEG (smaller; quality slider), WebP (small, high quality; quality slider), SVG (vector) or Social card (1200×630 with the title). Resolution and include-details for the raster types.
Project file (.topo)Backup; reopen and edit later—
Interactive HTMLTap-able topo that works offline—
PDFPhoto pages plus a climb tablePage size; include climb table
Developer ZIPPhotos, SVG overlays and JSON for programmers—
Print…A guidebook layout, on paper, as a PDF, or as a printed bookletPaper; orientation; climb table placement; descriptions; introduction page; order a printed copy (shared topos, where enabled)

The options mean:

The Interactive HTML export is a single self-contained file — the photo and all data are embedded — so it works offline and can be reopened for editing by picking it with New topo from photo on the home page. The Copy image button copies the current photo straight to your clipboard to paste into a message or document.

11. Browsing topos

The /topos page lists topos, newest first, in four views chosen at the top:

In every view you can:

Each card carries an offline badge: green means the topo is already saved and opens without signal; tapping the badge opens download options to pick the image quality (Original, High or Medium, with sizes shown) and climb types to keep on your device, or to remove a download and free space. A downloaded topo's Map link, image export and print layout all work offline too.

12. The interactive viewer

Anyone opening a view link (or your exported HTML) gets the read-only viewer. It shows the photo with the climbs drawn on, and a list of climbs beside it (or in a draggable bottom sheet on phones):