Design website sitemaps as visual tree diagrams with page types, URL slugs, and hierarchy levels.
You plan the site structure page by page: each node gets a label, a URL slug, a page type (home, listing, detail, and similar roles), and a position under a parent. The tool draws the result as a branching tree where hierarchy level equals depth - home sits at level 0, its children at level 1, and so on - making parent-child relationships visible at a glance. The surprise for most users: this is a design tool, not an analyzer. It cannot inspect your site or its routes; every node is a page you entered, and the tree is only as complete as your input.
A concrete input and expected output from the current implementation.
Input
Five pages added to the builder: / (home, no parent); /about (page, under /); /products (listing, under /); /products/app (product, under /products); /pricing (page, under /).
Expected output
A tree diagram arranged by level: Level 0: / (home). Level 1: /about (page), /products (listing), /pricing (page). Level 2: /products/app (product).
Hierarchy level is depth below the root. /products/app hangs under /products, which hangs under /, so it renders at level 2 while its parent renders at level 1. Page types appear as badges on each node.
Every page is a node with exactly one parent, which makes the structure a tree. The hierarchy level shown on a node is its distance from the root: home is level 0, pages attached to it are level 1, their children level 2, and so on. Because levels are derived from position rather than typed by hand, a page's level is its depth, and the diagram stays consistent by construction.
Each node displays the page's label and its URL slug, and carries the page type you assigned. Types control the node's badge and color, so the tree communicates page roles at a glance - which entries are landing pages, which are listings, which are detail pages - without reading every slug. The whole diagram arranges nodes in branching columns beneath the home page.
No. This tool produces a planning diagram of your site's structure; an XML sitemap is a machine-readable file that search engines fetch to discover URLs. The visual tree helps you decide the hierarchy, but it is not the XML file. If your site needs one, the CMS or static-site generator usually emits it from the same structure.
The tool ships with a fixed set of page types and you assign one to each node; the exact list appears in the UI. Types are a visual convention - each one gets its own badge and color - so the point is grouping: pages of the same type read as the same kind of page across the tree. Pick the closest match for anything unusual.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.