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.
- Input:
- File or hierarchy tree
- Output:
- PNG, SVG, clipboard
- Cost:
- Free
- Account:
- Not required
- Processing:
- In your browser
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.
Do I need an account or any software to install?+
No. Codeshot runs entirely in your web browser — there is nothing to download or install, and no sign-up, login or email is required. Open the page, paste your content and export.
Can I use the exported images commercially?+
Yes. You keep all rights to the content you paste and the images you create, and you can use them in commercial blog posts, courses, slides, documentation and social media at no cost. There is no watermark on any export.
Can I customize the theme, font, background and size?+
Yes. Choose from a dozen real editor themes (Dracula, Night Owl, One Dark, GitHub and more), premium self-hosted fonts, gradient, solid or transparent backdrops, light or dark window modes, and adjustable padding, font size, shadow and window controls.
Does Codeshot work on mobile and in every major browser?+
Codeshot works in modern browsers on desktop and mobile, including Chrome, Firefox, Safari and Edge. A larger screen makes fine-tuning the frame easier, but you can create and export an image from a phone or tablet too.
Explore all 17 Codeshot tools
One studio, 17 focused generators — each with its own controls, content and look.