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 you have two ways in:

• New topo from photo — pick a crag photo and 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.
• Open .topo / exported .html — reopen a project file you saved earlier (.topo) or an Interactive HTML topo you exported, and carry on editing it.

You can also drag a photo anywhere onto the home page to start. 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.
• Annotate… — a dropdown of extras to place on the photo: Label, Label + arrow, 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.

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

• 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
• 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
• Line end — Anchor (lower-off), Arrow (tops out), 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, Add arrow / Remove arrow for labels, a Rotation slider for 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:

• 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.
• Approach notes and Access notes — free text for directions and restrictions.
• 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:

• Stroke width and Text size, plus a per-photo size nudge on multi-photo topos.
• Default colour, Default style and Dash colour for new lines.
• Grade systems per discipline — Sport grades, Trad grades, Boulder grades and Deep water solo grades.
• Star ratings — choose a count scale (0–3, 0–4 or 0–5 stars) or the hollow/black quality system (no star, ☆ hollow star, ★ black star).
• Show grades under climb numbers, with grade-label size and colour.
• Zoom to the climb when selected.
• Dark outline behind lines for readability over busy rock.

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, where you can set:

• Display name — shown as "by <name>" on your public topos (leave empty for none).
• Light mode — a light/dark theme toggle for this browser.
• Length units — Meters or Feet; climb lengths are shown converted to your preference.
• Topo defaults — with a Clear button, plus Sign out.

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. There's a Send edit link… button and a QR code to open it on your phone.

The save-status button in the toolbar always tells you where a topo stands — "Saved on this device only", "Backing up…", or synced. 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 with Save .topo (or ⌘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:

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

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 via Open .topo / exported .html. The Copy image button copies the current photo straight to your clipboard to paste into a message or document.

11. Browsing public topos

The /topos page lists every topo shared publicly, newest first. You can:

• Search by crag 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.

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).
• 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 is a collapsible section under the topo name, with 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.