Sketch a Next.js route tree by painting it

Trees want to be drawn

An App Router project is a tree — segments nested in segments, layouts wrapping subtrees, groups that organize without routing. Yet we mostly design that tree by making folders one at a time, which is like planning a building by laying bricks.

The structure painter is a free, no-login canvas where the tree is drawn. The board is a grid: a row is a level, a column is a position in it. Sweep the paint tool straight down and you get a chain of nested routes; sweep across a row and you fan a parent out into siblings. The tree falls out of the geometry rather than out of gesture rules.

More than boxes

Four views sit over the one board. Routes is the tree itself. Components attaches real shadcn/ui parts to pages — a Header on six routes is one component, not six copies. State shares Zustand stores between the pages that read them. Nav draws the paths people actually travel and marks who may be where, with role guards that read as guards everywhere they appear.

Layouts and route groups are first-class: declare a layout where subtrees share chrome, group segments without changing URLs, and the inspector shows the exact file each route becomes on disk.

The download is real

Export produces a genuine Next.js App Router skeleton — page.tsx per route, layouts where you declared them, component and store stubs with your notes printed into their doc blocks. Take it as a .zip, or as a shell command: a POSIX script for Linux/macOS or a PowerShell script for Windows that recreates the whole tree when run in an empty folder — handy when the project is destined for a remote machine or a container.

And if you built a theme in the theme generator, it rides along automatically as the skeleton's app/globals.css — the tools share your browser, so they share your work.

Where it leads

Your board persists locally between visits. When the sketch starts feeling like a project, Nodlume is the application designer built from the same canvas — with domain modeling, architecture design, an API designer, a data model that grounds generated types, AI that generates route trees and working code, and real-time collaboration.

Design your application

Carry the route tree into a full project with data, APIs, access rules, tests, and generated scaffolding — open projects to start.

Q&A

Question: What does the structure painter create when you export a sketch?

Answer: A real Next.js App Router skeleton: a page.tsx for each route, layouts where you declared them, and component and store stubs with your notes in doc blocks. You can download it as a .zip or create it with a shell script.

Question: How does painting on the grid translate into a route tree?

Answer: The grid maps the app structure. Rows are route levels; columns are positions within a level. Paint downward to make nested routes; paint across a row to make sibling routes under one parent.

Question: What are the four views available on the board?

Answer: Routes, Components, State, and Nav. Together they shape the route tree, attach shadcn/ui parts, share Zustand stores, and map paths with role guards.

Question: Can the tool represent layouts and route groups?

Answer: Yes. Layouts and route groups are first-class parts of the design. You can declare shared layouts, create route groups that don't change URLs, and inspect the exact files that will be generated on disk.

Question: What happens when the sketch becomes more like a full project?

Answer: The board stays saved in your browser. For a larger workspace, Nodlume adds domain modeling, API design, generated types, AI-generated route trees and working code, and real-time collaboration.