Tree · Folders & files · PNG + SVG
Map your project at a glance.
Paste a folder tree and Codeshot styles directories and files into a tidy image — perfect for READMEs, docs and onboarding guides.
What is the Project Structure generator?
A file tree image tool styles a repository’s folder structure, accenting directories so the layout is easy to scan. It explains a codebase in a README or onboarding doc far better than a bullet list or a raw code block.
Codeshot is free and runs entirely in your browser — no account, no watermark, and nothing you paste is uploaded. Export a retina PNG or a scalable SVG, or copy the image straight to your clipboard.
When to use it
- README project layouts
- Onboarding and contributor docs
- Starter-template walkthroughs
- Architecture overviews
Why use Codeshot for file tree image?
Folders that stand out
Directory names pick up an accent while tree lines stay quiet.
README ready
Clean images that explain a repo layout better than a code block.
Paste from your shell
Works with output from tree, exa or a hand-written structure.
How to turn a file tree into an image
- 01
Paste the tree
Drop in your folder structure, with or without tree glyphs.
- 02
Frame the shot
Pick a theme, backdrop and font.
- 03
Export & share
Save a PNG or SVG, or copy to clipboard.
Project Structure — frequently asked questions
How are folders detected?+
Entries that end with a slash are treated as folders and given an accent color; everything else is a file.
Do I need the tree command?+
No. Paste output from tree or write the structure by hand — both render cleanly.
What can I export, and is it free?+
Export a high-resolution PNG or a scalable SVG, or copy straight to your clipboard. Codeshot is completely free — no account, no watermark, no limits.
Explore all 17 Codeshot tools
One studio, 17 focused generators — each with its own controls, content and look.