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. 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. 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

View vs Edit modes

The toolbar starts with a View / Edit toggle. View is the read-only experience your audience gets — browse climbs and their details without changing anything. Edit reveals the drawing tools. The ← button (top-left) returns you to My Topos.

The tools

In Edit mode you get these tools:

• Select (S) — pick climbs and annotations, drag their anchors, and pan the photo.
• Draw climb (D) — draw a new climb line.
• Variation (V) — draw a variation that starts on an existing line; if you click empty rock, it reminds you to start on a climb's line.
• Add belay (B) — with a climb selected, click its line to place a belay and split it into pitches (see below).
• Annotate… — a dropdown of extras to place on the photo: Label, Arrow (click where it starts, then where it points), Height indicator, Belay (symbol), Approach / descent line, Placeholder climb (a dashed line for a climb you don't want to fully detail), and Topo title (the topo's name drawn onto the image).

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:

• Press Enter, double-click, or hit Done to finish.
• Press Backspace to remove the last point you placed.
• Press Esc to cancel the whole line.

When you finish a climb, the editor selects it and focuses the name field so you can type its name straight away. 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 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.

• The climb's overall grade becomes the hardest pitch and its length the total — unless you set a grade or length on the climb itself, which always wins (useful for trad, where the overall grade isn't simply the hardest pitch).
• Click a pitch row to highlight just that stretch on the photo.
• When you're viewing a topo, multi-pitch climbs show a small "3p" button on their row — press it to unfold the pitches. They stay folded away by default so a big crag list still fits on a phone screen.
• Belays stay stuck to the line — drag an anchor and the ring moves with it.
• × on a pitch row removes the belay above it (that pitch merges into the one above). Single pitch undoes the whole breakdown and hands the pitch's grade and length back to the climb.

Branching and merging

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

• Branch — start drawing on an existing line and the new line shares that start point.
• Merge — click an existing line while drawing and a small chooser appears: Follow to end (continue along that line to its top), Stop here, or Cancel. A yellow ring shows when your cursor is snapping to a line.

Editing anchors

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

• Drag a handle to move that point.
• Double-click the line to insert a new anchor.
• Alt + click an anchor to delete it.

Keyboard shortcuts

Press ? at any time for this list:

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 several photos — 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.

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 while in Edit mode. To manage a photo:

• Rename it by clicking its title on the active thumbnail (or, on touch, tap the active thumb again for a menu).
• Reorder by dragging thumbnails, or via ← Move left / Move right → in the touch menu.
• Delete with the × on the thumbnail — you'll be warned if climbs or annotations are drawn on it.

4. Editing the base image

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

• Enhance — eases grain and crisps up edges, so a small or soft photo holds up when you zoom in. Useful when the only photo you have of a crag is a low-resolution one. It cannot add detail the camera never captured, and it applies at the photo's own size, so nothing gets bigger. Very heavy noise is left alone rather than smeared. Click once to see it on the canvas; Save keeps it, Cancel puts the original back.
• Rotate — ⟲ 90° / ⟳ 90°, or type an exact number of degrees and press Apply.
• Flip — Horizontal or Vertical.
• Crop — drag the corners; hold Shift to keep the proportions. The crop is applied when you save.
• Brightness, Contrast and Saturation sliders, with Reset adjustments to zero them.

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

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; in Edit mode you can drag list rows to reorder them, and the × deletes a climb. The Climb details inspector below then lets you edit:

• Name
• Discipline — sport, trad, boulder, deep water solo, etc. (this drives which grades are offered)
• Grade — picked from the topo's configured grade system for that discipline
• Stars — quality rating, following the topo's star scale
• Tags — Eliminate (and, for boulders, Sit Start and Highball); a grade tag — Soft or Hard shows "6a (soft)" / "6a (hard)", Slash shows the grade and the next one up, "6a/6a+" (UK trad slashes only the adjectival grade: "E8/E9 6c") — one at a time; and the status tags Project and Broken (the grade gets a "?") and Unclimbable (the name is struck through)
• Length — entered in your preferred unit (m or ft)
• First ascent (optional) — e.g. "J. Smith 1987"
• Description — free text. Pasted coordinate pairs become map-pin links automatically, and typing @ opens a picker to mention another climb (or, on multi-photo topos, a photo or a stack) — "Start as for @Stagedivin', then step right". In the viewer the mention is a chip that selects what it names, and it always shows the climb's current number and name, so renaming or reordering never leaves it stale. Mentions only ever point within the same topo.
• Line end — Top out (an arrow), Lower off or, for boulders, Drop off (both an anchor dot), or None
• Line colour — a swatch palette, "topo default", or a custom colour
• Line style — topo default, Solid, Dashed, or Two-tone dash

When you select an annotation instead, the inspector shows its own controls — the label Text (selected ready to type over when you place it), a Rotation slider for the abseil symbol (a belay is symmetric, so has none), 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:

• Topo name
• Crag location and Parking — the location box is generous about what you paste, so you rarely need to look coordinates up by hand. It understands:
  • a decimal lat, lng pair — e.g. 53.3481, -1.6247;
  • a map link from Google Maps, Apple Maps, Bing Maps or OpenStreetMap — paste the whole URL and the coordinates are pulled out for you;
  • a UK Ordnance Survey grid reference — e.g. SK 2510 8353 — converted to latitude/longitude automatically;
  • degrees, minutes and seconds — e.g. 53°20'53"N 1°37'29"W;
  • a geo: URI.
  A ✓ or ✗ beside the box shows whether what you entered was understood. Or click Map to place a marker by hand — the map dialog lets you click to place, drag to pan and scroll to zoom, with Clear / Cancel / Save.
• Photo locations (multi-photo topos only) — a collapsible section to pin each photo's wall or sector.
• Description — a paragraph about the crag or topo as a whole: the style of climbing, the rock, when it's in condition. It sits in the viewer's crag-info card (titled About & approach once there is one), under the map links and walk-in stats and ahead of the approach notes, and becomes the page's link-preview text, and takes @ mentions like a climb description.
• Approach notes and Access notes — free text for directions and restrictions. Coordinate pairs become map pins, and @ mentions a climb, photo or stack ("the path arrives below @Main wall") that readers can tap to jump there.
• More info links — external links (UKC, Mountain Project, 8a.nu, …).
• Tags — country and disciplines are added automatically from the location and climbs, plus manual groups (aspect, approach, tidal, family-friendly, and so on) you toggle on. Tags feed the public search filters.

7. Topo settings

Click Settings for Topo settings, which control how the topo is drawn and which grade systems it uses:

• Grades — grade systems per discipline (Sport, Trad, Boulder and Deep water solo), and Star ratings: a count scale (0–3, 0–4 or 0–5 stars) or the hollow/black quality system (no star, ☆ hollow star, ★ black star).
• Numbering — Variation numbering.
• Text & labels (in Style) — Climb labels sets the size of the numbers on the photo; Show grades under climb labels; then a size and colour each for Grade labels, Text labels (which also scale height indicators and arrows), the Topo title and Belays & abseils. Styling is per element type, so every label on a topo matches. New topos start with sizes picked from the first photo's resolution.
• Lines — Stroke width, Default colour, Default style (and dash colour) for new lines; Extra lines — the style and width of a climb's further lines, which match the climb itself unless you change them; and Dark outline behind lines for readability over busy rock.
• This photo (multi-photo topos) — a per-photo size nudge and the cover photo.
• Viewer — Zoom to the climb when selected (off by default).

At the bottom, Save as my defaults makes new topos start from this topo's settings, 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, the account button opens Your account, in three tabs:

• General — Display name (shown as "by <name>" on your public topos; leave empty for none), the Light / Dark appearance toggle for this browser, Length units (Meters or Feet), Map links, Walking pace, and your Topo defaults with a Reset button.
• Storage — how much of this device the app is using and what for: topos you made here, downloaded topos, offline map tiles and the app itself, with the largest copies listed. It explains when this browser may discard stored data (Safari clears a site's data after seven days without a visit unless the app is on your Home Screen; other browsers clear least-recently-used sites when space runs low) and, where the browser supports it, lets you ask it to keep the data. Remove frees space by dropping downloaded topos — one at a time, all of them, or just those made by other people. Topos you made here are never deleted from this tab: delete them from My topos.
• Advanced — Location on the crag map and the Usage trace recorder for reporting slowdowns.

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:

• View link — safe to share with anyone; it opens the read-only interactive viewer.
• Edit link — private. Anyone with it can edit, and it's also your backup key: it's the only way to keep editing this topo from another device or if you lose this one. Save it somewhere safe. Its QR button shows it as a code to scan and open on your phone.

The status pill 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 what each sync carried and how long it took. Once shared, your changes sync to the hosted copy automatically.

Other options in the dialog:

• List publicly — adds the topo to the Quick Topo home page and /topos, and lets search engines find it. If you're signed in, Show "by <name>" controls author attribution.
• Embed — an iframe snippet for a blog or club site, with a Theme (Dark/Light) and an optional pre-highlighted climb.
• Version history — snapshots of the hosted copy (one per change, at most one every 10 minutes, newest 20 kept). Restoring keeps the current version as a snapshot too, so nothing is lost.
• Rotate edit link — invalidates the old edit link and mints a fresh one (use it if the link leaked).
• Delete share — removes the hosted copy.
• Update share — pushes the latest state to the hosted copy.

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:

The options mean:

• Image type (Image) — PNG, JPEG, WebP, SVG or a social card.
• Resolution (PNG/JPEG/WebP) — Full resolution, 4K (3840px long edge) or 2K (2048px long edge).
• Quality (JPEG/WebP) — a slider from 50 to 100.
• Include approach & climb details (with location QR codes) (PNG/JPEG/WebP) — appends a guidebook-style panel with the title, approach/access notes, QR codes for the crag and parking, and the climb table.
• Page size (PDF) — A4, US Letter, or Fit to image (300 DPI). Multi-photo topos get one page per photo.
• Include climb table page (PDF) — adds a listing page with grades, stars, lengths and descriptions.
• Print… — a guidebook-style document: an introduction page with the topo at a glance (climbs by type, grade and star distributions), the about, approach and access notes with the crag map, and QR codes for the interactive topo, crag and parking; then a page per photo with the topo on top and the climb table beneath (or on its own page, or left out). Page numbers sit centred in the bottom margin. Your browser's print dialog handles the rest and can Save as PDF. Paper is A4, A5 or US Letter. Readers have the same Print in the viewer's ⋮ menu with the same options, remembered on their device (⌘/Ctrl+P opens it too), so a shared topo prints just as well. Where printing is enabled, the same dialog offers Order a printed copy: an A5 saddle-stitched booklet, printed and posted by Peecho, with price and delivery shown at their checkout. A shared topo also has a print preview page — the booklet laid out as pages you can leaf through, with Print / Save as PDF and the order button.

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:

• All — every topo shared publicly, plus your own (including ones only on this device), your favourites and your downloads. The search box at the top right of the home page searches this view.
• Mine — everything on this device and in your account, with other people’s topos you can edit (from an edit link they sent you) under Shared with me. The home page’s My topos → View all opens this view.
• Favourites — other people’s topos you marked with ♥ Favourite on their page (needs an account, so they follow you to every device). Favouriting a topo also downloads it.
• Downloaded — everything that opens on this device with no signal: your own topos here, and anyone’s you downloaded.

In every view you can:

• Search by crag name.
• Sort by date created, date updated or name.
• Filter by country and discipline dropdowns.
• Narrow further with tag filters (aspect, approach and so on).

Each card carries an offline badge: green means the topo is already saved and opens without signal; red means tap to download it (the page, data and previews) into your device's cache for offline use. A downloaded topo's Map link works offline too: the map around the crag, parking and approach track is saved with it (down to about street level — zooming in further, or panning well away, needs signal).

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:

• Tap a climb — on the photo or in the list — to highlight its line and show its details (grade, length, description).
• Mentions in a description or the approach notes appear as small chips. Tap one to jump to what it names: a climb is highlighted and framed as if you had tapped it in the list, a photo is brought up in the filmstrip, and a stack of photos opens on its first photo.
• Use the Copy link button in a climb's detail to grab a link that opens the topo with that climb pre-selected.
• Multi-photo topos show a filmstrip of thumbnails (a chip row on mobile); tap one to switch photo. On a phone you can also swipe between photos, and the arrow keys flip photos (←/→) and step through climbs (↑/↓).
• Approach & access (or About & approach, when the author wrote a description) sits under the topo name; tap it to slide in a panel with the description, approach and access notes, map links and a GPX download for GPS apps.
• Hosted pages also offer Export (a full-resolution image with details), Share, and a Report this topo link.