Plan website information architecture with a drag-and-drop tree builder. Visualize URL hierarchy, silo structure, and navigation depth.
Site architecture usually lives in a spreadsheet where indentation is the only hint of hierarchy, and nobody notices the deepest page sits five levels down until the site is live. This tool replaces the spreadsheet with a visual tree: you add pages as nodes, drag them into parent-child relationships, and the site's structure becomes something you can see, rearrange, and judge. The thing most people get wrong is how fast depth accumulates: a product nested under a category under a section is already three clicks from home, and depth is exactly what this tool makes visible.
A concrete input and expected output from the current implementation.
Input
Pages added as nodes: Home, Services, Website Design, Case Studies, About, Contact. Dragged into this arrangement: Services, About, and Contact under Home; Website Design under Services; Case Studies under Website Design.
Expected output
A rendered tree of six pages in four levels. About, Contact, and Services sit one click below Home, Website Design two clicks below Home, and Case Studies three clicks below Home, the deepest node in the tree.
Each parent-child edge adds one click of distance from Home, so Case Studies inherits Website Design's depth plus one. The output is the hierarchy exactly as arranged, with depth following mechanically from the nesting the user drew.
Pages are added as nodes, then dragged onto other nodes to form parent-child edges. The result is a rooted tree: every node except the root has exactly one parent, so there is never ambiguity about which section a page belongs to. Re-parenting a node takes its whole subtree with it, and deleting a node removes its children as well.
Each page's depth is the number of edges between it and the root, recomputed as the tree changes, so dragging a page deeper visibly increases its click distance and the distance of everything below it. A page's silo is the top-level branch it hangs under; pages in the same branch share a silo, which keeps topical grouping readable at a glance.
There is no universal number. The old 'three-click rule' is a widely repeated heuristic, not a standard, and usability research has argued it is a myth. Use the depth the tree shows to ask why a page sits where it does: whether real visitors would follow that path, and whether the page could live one level up instead.
A silo is one top-level branch of the tree: a section such as Services or Blog with everything nested beneath it. Silo planning means each topic's pages live inside a single branch rather than spread across several, so the hierarchy matches the site's topical groupings. In the tool, pages that share a branch share a silo, and pages in different branches do not.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Shorten URLs with local redirect tracking via localStorage. See click counts and generate a QR code for each link.
Build UTM-tagged URLs for campaign tracking with source, medium, campaign, term, and content parameters.
Enter 2+ headlines and see simulated previews in Google results, email subject lines, and social posts side-by-side.
Count characters for Twitter/X, LinkedIn, Facebook, and Instagram with platform-specific limits and warnings.
Calculate click-through rates from impressions and clicks with industry benchmarks and trend analysis.
Check email subject line length against best practices for desktop and mobile with preview text optimization.