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):
- Select (S) — pick climbs and annotations, drag their anchors or number badges, and pan the photo.
- Draw climb (D) — draw a new climb line.
- Variation (V) — draw a variation that starts on an existing line (or joins one while drawing); 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).
- Mark hidden section (O) — with a climb selected, click a section of its line that passes behind an arête, roof or gully to dim it into a faint dotted path.
- Annotate… — a dropdown of extras to place on the photo: Label, Arrow (click where it starts, then where it points), Height indicator, Belay (symbol), Abseil (symbol), Corner / crack, Roof / overhang, Arête, Slab, 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 or ⌘Z (Ctrl+Z) 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. 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.
- 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, merging and hidden sections
Lines can share starts, middle sections 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. If two climbs with different starts have already joined below where you click, a small chooser asks which climb you're branching from.
- Merge — click an existing line while drawing and a chooser appears: Follow to end (continue along that line to its top — if it branches higher up, pick which finish by climb name), Follow, then leave… (share a mid-section, then click where your climb leaves it and keep drawing), Stop here, or Cancel. A yellow ring shows when your cursor is snapping to a line.
- Hidden / behind-feature sections — when part of a climb is out of sight behind a rock feature, click Mark hidden section in the climb's details (or press O) and click that stretch of the line. If the stretch needs splitting first, double-click the line where it disappears and reappears to add anchors there, then mark the segment between them. Hidden segments draw as a subtle dotted line and can be restored from the climb details or by clicking them again with the tool active.
Editing anchors, labels and using the magnifier
With a climb selected (Select tool), its anchor handles appear on the line:
- Drag a handle to move that point. On a phone or tablet, a magnifier loupe appears above your finger with a crosshair so you can see the exact hold underneath. On a computer, hold Shift at any time to bring up the magnifier cursor.
- Double-click / double-tap the line to insert a new anchor at that spot.
- Double-click / double-tap an anchor (or Alt + click) to remove it.
- Drag a climb's number badge on the photo to place its number and grade label by hand when starts cluster tightly together; double-clicking the badge resets it to its automatic position.
Keyboard shortcuts
Press ? at any time for this list:
| Key | Action |
|---|---|
| S | Select tool |
| D | Draw climb tool |
| V | Variation tool |
| B | Add a belay to the selected climb (multi-pitch) |
| O | Mark a hidden / behind-feature section on the selected climb |
| T | Open climb table editor |
| Enter | Finish the line being drawn |
| Backspace / ⌘Z | Remove last point while drawing |
| Esc | Cancel drawing / deselect |
| Drag a number | Move a climb's number and grade label by hand (double-click puts it back) |
| ⌘Z / ⇧⌘Z | Undo / redo |
| ⌘S | Save project file (.topo) |
| F | Zoom to fit |
| Delete | Delete selected climb / annotation |
| Double-click / double-tap line | Add an anchor there |
| Double-click / double-tap anchor | Remove that anchor (or Alt + click) |
| Space + drag / middle-drag | Pan |
| Hold Shift | Magnifier cursor (desktop) |
| Start drawing on a line | Branch off it (shared start) |
| Click a line while drawing | Merge 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):
- Rename a photo 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.
- Stack photos of one buttress by dragging a thumbnail onto a neighbour (or using Stack with… in the touch menu). A stack gets its own name banner above its thumbnails, a single section header in the climb list, and one shared pin on the crag map. Click the stack's × to unstack its photos.
- Delete a photo with the × on its 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 & 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:
- Name
- Discipline — sport, trad, boulder, deep water solo, etc. (this drives which grades and line ends are offered)
- Grade and Stars — picked from the topo's configured grade system and star scale
- Tags — Eliminate (and, for boulders, Sit Start and Highball, which appends
!to the grade, e.g.7A!); 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 always shows the climb's current number, name and grade, 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
- Draw another line — when the same climb appears in more than one photo (or from a second angle), add another line for it without creating a duplicate entry in the climb list
- Mark hidden section (O) — dim segments of the line that pass behind a rock feature into a faint dotted path
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:
- Topo name
- Crag location and Parking (including multiple parking spots) — 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 decimal lat, lng pair — e.g.
- Photo locations (multi-photo topos only) — a collapsible section to pin each photo's wall or stack.
- Approach tracks — draw the walk-in path on the map, import a
.gpxfile, or attach a walk-in from Recorded approaches (captured live with GPS from the home page's ⋮ → Record approach tool, complete with distance, ascent, elapsed time and waypoints like Parking, Fork, Stile and Crag). Elevations are looked up automatically so the viewer can show distance, ascent, estimated walking time and an elevation profile. - 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, 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 links that highlight that spot on the crag's annotated Map page alongside the crag, parking and walk-in, and @ mentions a climb, photo or stack ("the path arrives below @Main wall") that readers can tap to jump there.
- Access link & seasonal restrictions — add a primary access URL (e.g. a local access society page) and any yearly date-range restrictions with a status (Banned, Partial, Conditions or Advisory) and notes. While a restriction is in force (or within 30 days of starting), the viewer displays a prominent banner across the top of the photo that opens the access details when tapped.
- More info links — external links (UKC, Mountain Project, 8a.nu, …).
- Tags — country, climbing region (where located inside a curated region) and disciplines are added automatically from the location and climbs, plus manual groups for Aspect, Approach, Conditions (Sheltered / Exposed, Sunny / Shady, Fast-drying / Slow-drying, Rain-proof, Seepage, Buggy), tidal, family-friendly and more. Tags feed the public search filters.
7. Topo settings & style
The toolbar separates rules and behaviour (Settings) from how the topo looks (Style):
- Settings — Grades per discipline (Sport, Trad, Boulder and Deep water solo); Star ratings (0–3, 0–4, 0–5, or the hollow/black ☆/★ quality scale); Variation numbering (1a, 1b vs giving every line its own number); and under Viewer, Zoom to the climb when selected (off by default).
- Style —
- Text & labels — Climb labels sets the size of the numbers on the photo (with an automatic on-screen readability floor when zoomed out to fit); 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. New topos start with sizes matched to 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; and Dark outline behind lines for readability over busy rock.
- Colour by grade — optional per-discipline grade bands that colour lines (and optionally their grade labels and line styles) by difficulty.
- This photo (multi-photo topos) — a per-photo size multiplier so photos taken at different distances match visually.
- Cover photo — Choose cover photo lets you pick which photo represents the topo on cards, link previews and booklet covers, or upload a separate cover image altogether.
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:
- General — Display name (shown as "by <name>" on your public topos, with a link to your public author profile page; 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, the Usage trace recorder for reporting slowdowns, and Sign out everywhere to revoke every signed-in device if you lose a phone.
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 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:
- 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, and you also get a link to the topo's View stats page. - 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). Clicking a snapshot opens an interactive What changed comparison with a visual diff overlay on the photo (added lines in green, changed in amber, removed in red; toggle between Diff, Before and After, or switch between vs Previous and vs Current workspace). 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:
| Format | Best for | Options |
|---|---|---|
| Image | A picture of the topo | Image 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 HTML | Tap-able topo that works offline | — |
| Photo pages plus a climb table | Page size; include climb table | |
| Developer ZIP | Photos, SVG overlays and JSON for programmers | — |
| Print… | A guidebook layout, on paper, as a PDF, or as a printed booklet | Paper; orientation; climb table placement; descriptions; introduction page; order a printed copy (shared topos, where enabled) |
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 its location QR code and coordinates beside the heading) 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 front matter, contents, a How to read this guide legend, an alphabetical climb index with tick boxes, a graded list and ruled Notes pages. A shared topo also has an interactive 3D print preview page (
/print/:id) — the booklet laid out as turnable 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 of the home page searches this view, and links at the top let you browse dedicated pages by country and climbing region (
/topos/:country/:region). - 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, and narrow further with tag filters (aspect, approach, conditions and so on — tucked into a slide-up Filters sheet on phones).
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):
- Tap a climb — on the photo or in the list — to highlight its line and open its details (grade, length, description, pitches) with ‹ Prev / Next › buttons to step through the wall. If the topo has Zoom to the climb when selected enabled, the camera glides smoothly to frame the climb (and smoothly transitions across photos when you pick a climb on another wall).
- Filter & search climbs — on bigger crags, use the funnel icon to filter by discipline, grade and stars (hiding filtered-out lines on the photo too) or the search button to find a climb by name or grade.
- Mentions in a description, photo label or the approach notes appear as small chips showing the climb's number, name and grade. Tap one to jump straight to that climb, photo or stack.
- 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 the detail pane with the description, walk-in distance/ascent/time and elevation sparkline, approach and access notes, seasonal access restrictions, map links and a GPX download for GPS apps. If a seasonal restriction is currently active (or starting within 30 days), a banner across the top of the photo highlights it as soon as you open the topo.
- The annotated Map page shows the crag, parking spots, photo/stack pins, any coordinates tapped from the notes, and the approach track on a street or Satellite view, complete with an interactive elevation profile chart and an optional live GPS location dot.
- Hosted pages also offer ♡ Favourite, Download for offline use, Print, Export, Share, and Report this topo in the toolbar and ⋮ menu.