Website Sitemap & Wireframe Planner
Pages in a tree, a visual sitemap and grey-box wireframes for every page of a website.
Try before you buy.
- Free preview: the whole planner working, the sitemap and every wireframe with a MySmartCoPilot watermark, and the first rows and pages of the table and copy deck.
- Locked until you unlock it: download.
- Unlock: Pro pass, ₹179 for 30 days or ₹79 for 1 week, a one-time payment that never renews. Unlock: Pro pass, $5.99 for 30 days or $2.99 for 1 week, a one-time payment that never renews.
Ways to unlock shows how to get the full result.
Printing this result is locked in the free preview.
Pages
Drag a page onto another to put it under it, or to its top or bottom edge to place it beside it. Keys: Up and Down choose a page, Alt with the arrows moves it, Delete removes it, Enter edits it.
| No. | Level | Page | Path | Parent | Sections | Notes |
|---|
The address after the domain, such as /about/team/.
Sections, top to bottom
Section
Left empty, the wireframe shows grey lines in its place.
A note puts a numbered marker on the wireframe and is listed under it.
Choose a section in the list or on the wireframe to write its copy.
One page a line, indented under its parent (spaces, tabs, # headings or 1.2 numbers), with an optional path at the end; the whole text of a sitemap.xml; or a CSV with a Page column.
Start again
The plan you leave stays under Your plans on the Files tab.
Each page's address in sitemap.xml is this plus its path.
Sitemap picture
Wireframe of the selected page
The whole plan as a PDF
Lists and copy
Project
Your own work: the plan as a file to open here again on any device, and the page list as text.
Your plans
Plans are saved in this browser as you work; the 12 most recent appear here.
Locked in the free preview. Opens the ways to unlock this result.
Locked in the free preview. Batch runs unlock with a pass.
Locked in the free preview. Query results unlock with a pass.
About the Website Sitemap & Wireframe Planner
Plan a website before anyone designs or builds it. Type or paste the pages as an indented list, read an existing site's sitemap.xml, or build the tree page by page; drag pages to nest them, and move them with the keyboard. Each page gets a path of its own and a number such as 1.2.3, and the sitemap draws itself as a tree — the home page on top, the main sections in a row, everything below them in columns — or as an outline for large sites.
Every page has a low-fidelity wireframe: a stack of grey-box sections chosen from 90 blocks in 13 groups (navigation, heroes, content, features, social proof, pricing, calls to action, forms, media, team and blog, shop, app screens and footers), drawn at computer (1280 px) and phone (390 px) width with your own headings, text and buttons. Notes on a section become numbered markers listed under the wireframe, and the checks find shared paths, a missing home page, pages buried too deep and menus that are too long. With a Pro pass, download the sitemap as PNG, SVG or PDF, each wireframe as PNG or SVG, the whole plan as a PDF, the pages as CSV or sitemap.xml, and a copy deck in Word; without a pass the views show with a watermark as a free preview. Everything stays in your browser.
How to use it
- Paste a page list on the Import tab (one page a line, indented under its parent, with an optional path such as /about/) or the text of a sitemap.xml, and press Make the plan from this; or start from the example plan and change it.
- Arrange the tree on the left: drag a page onto another to put it under it, or use the toolbar and the keys (Alt with the arrows) to move, indent and outdent. Page adds a page beside the selected one, Subpage one under it.
- On the Page tab set the title, path and notes, then build the page from blocks: add, reorder and remove sections, and write each one’s heading, text, button and note. The Wireframe view shows it at computer or phone width.
- Look over the Sitemap view and the Checks tab, set the real site address, and read the plan as a Table and as a copy deck for the writer.
- With a Pro pass, download the PDF of the whole plan and the other files on the Files tab; without a pass they stay locked in the free preview. Save project file keeps your plan to open again on any device.
Examples
Home · About (Team) · Services (Web design, Branding, Search marketing) · Work · Pricing · Blog · FAQ · Contact
A 12-page sitemap in three levels, starter wireframes for each page (pricing tables on Pricing, a form and a map on Contact), and a PDF with the sitemap and all twelve computer wireframes.
The site’s sitemap.xml pasted in (180 addresses)
The pages nested by their paths, parent pages added where the sitemap skips them, and checks that flag four pages five levels deep.
Notes on the hero and pricing sections of five pages
A Word copy deck with one page per website page and a table of every section’s heading, text, button and note.
Common uses
- Agreeing the structure of a new website with a client before design starts.
- Planning a redesign or a migration from the current site’s sitemap.xml.
- Briefing designers, developers and copywriters with one plan, wireframes and a copy deck.
- Checking that the navigation is shallow enough and every page has a path of its own.
Writing a page list
Put one page on each line and indent a page under its parent with spaces or tabs. You can also use Markdown headings (# Home, ## About) or outline numbers (1.2 About), and list markers such as - or 1. are ignored. A path at the end of a line sets the page’s address (“About us /about/” or “About us — /about”); without one, the path is made from the title under the parent’s path. A top-level page called Home gets the path / and becomes the root of the others.
Reading a sitemap.xml or a spreadsheet
Paste the whole text of a sitemap.xml (or open the file): every <loc> becomes a page, nested by the parts of its path, and the site address comes from the first one. Where the sitemap lists /products/chairs/ but not /products/, the missing parent page is added and says so in its notes. A sitemap index, which lists other sitemaps, cannot be read directly: open one of the sitemaps it names. A CSV with a Page column (and optionally Level and Path or URL columns) reads too; this tool’s own CSV reads back with every page’s sections.
The wireframes
Wireframes are deliberately plain: grey boxes for pictures (with a cross), bars for running text, and your own headings, text and button labels where you write them. Each section is laid out for a 1280 px computer screen and again for a 390 px phone, where columns stack. A note on a section adds a red numbered marker at its right edge and is listed, with the page’s own notes, under the wireframe in the PNG, SVG and PDF.
Files
- PDF: the sitemap and every page’s wireframes in tree order, each on a page of its own size, as vector shapes with real text, so it stays sharp at any zoom and its words can be searched.
- PNG and SVG of the sitemap or of the selected page’s wireframe; the SVG keeps text as text, so a design program can edit it.
- CSV: number, level, page, path, parent, sections and notes, one row a page, ready for a spreadsheet.
- sitemap.xml in the sitemaps.org format, every address once, with characters outside plain ASCII encoded.
- Copy deck (Word): a page per website page with a table of each section’s heading, text, button and note.
- Project file (JSON): your whole plan, to open again here.
Limitations
- The wireframes are low-fidelity sketches of the structure: they do not show your fonts, colours or pictures, and they are not a website builder.
- A plan holds up to 500 pages, each with up to 40 sections.
- Very wide sitemaps are easier to read with the Outline layout or by zooming in.
- Plans saved in this browser (the 12 most recent) stay on this device; use Save project file to move one to another device.
Privacy
On this device: nothing is sent
Your plan never leaves your device: it is drawn and its files are made in your browser, and it is saved in this browser’s storage (IndexedDB); project files are saved where you choose.
Frequently asked questions
What do I get without a pass?
Without a pass, Website Sitemap & Wireframe Planner shows the whole planner working, the sitemap and every wireframe with a MySmartCoPilot watermark, and the first rows and pages of the table and copy deck. Until you unlock it, the result can’t be downloaded. A Pro, Premium or Ultimate pass, a one-time payment that never renews, unlocks the full result. The pricing page lists the passes and their prices.
What is the difference between this and an XML sitemap generator?
An XML sitemap generator lists the pages a live site already has, for search engines. This planner is for designing a site’s structure before it exists (or before a redesign): a visual tree for people, wireframes and notes. It can also write a sitemap.xml of the planned pages, and read an existing one to start from.
How deep should a website’s navigation go?
There is no magic number: the popular “three-click rule” is not backed by research, and visitors keep clicking as long as each link clearly leads towards what they want (The 3-Click Rule for Navigation Is False, Nielsen Norman Group). Every level is still one more choice to get right, so the checks point out pages four or more levels down: give the pages above them clear titles, or link to them from a higher page too. A long main menu is slower to scan, so the checks also flag a home page with more than seven pages directly under it.
Can I change a section’s block without losing its text?
Yes: choose another block for the selected section on the Page tab and its heading, text, button and note stay. The starter sections for a title replace all of a page’s sections, and Undo brings the old ones back.
Which addresses does sitemap.xml contain?
The site address from the Files tab followed by each page’s path, in tree order, each address once. Set the real address first: the plan starts with https://example.com.
Can I open the plan on another computer?
Save project file writes the whole plan as a small JSON file; open it with Open a file on the Import tab on any device. The page list can also be copied as indented text and pasted back.