How I built Ziptree
May 27, 2025
Building Ziptree: A Simple Drag & Drop Folder/ZIP Viewer
A few days ago, I had a simple question: Is there a tool where you can drop a .zip file and instantly see its structure, formatted cleanly?
The replies were mostly command-line solutions—install this, run that, use the tree
command—which is great for people using terminal, but that's just not lightweight and visual. I wanted something user-friendly. Something where you just drag, drop, and instantly see the .zip file structure.
When no one had a solid answer, I figured it was time to make one. So, I built it.
Say hello to Ziptree.

The Idea
I wanted something simple.
Drag & drop a .zip file
Instantly see the structured output, formatted like file tree
No extra steps, no command-line installs, just works
Because building with Next.js and Vercel is so easy now, it made sense to make this a Next.js app for speed, flexibility, and easier deployment.
Building it with Next.js
1. Handling drag & drop for .zip files
To extract .zip contents, I'm using JSZip. This lets Ziptree read files directly from the browser without a backend. Everything happens client-side.
2. Formatting the file structure output
I didn’t want to use a bulky library for rendering trees, so I went manual with a recursive function that prints the output like this:
Looks clean. No unnecessary UI, just monospace goodness. It's simple, practical, and easy to read and navigate.
3. Styling with Tailwind & Radix UI
Tailwind was a no-brainer, since I’m already familiar with Tailwind classes. For colors, I used Radix UI colors, which helped make light/dark mode seamless. (I could talk for days about how impressive Radix colors are.)
Theme automatically adapts based on system settings, but you can also change the theme manually
File structure text is always high contrast
The "Copy" button lets you grab the output in one click
The "Refresh" button lets you reset the whole view
Next.js 15 & deployment issues
React 19 vs. dependency hell
At first, I was on React 19, but some libraries (like react-json-view
) didn’t support it.
Because of that, I had to:
Downgrade to React 17 for compatibility, and then upgrad, and then downgrad again…
Fix broken peer dependencies with
--legacy-peer-deps
Manually install
@babel/plugin-proposal-private-property-in-object
(yes, that was a real issue)
Deploying to Vercel
Since Next.js + Vercel are best friends, deployment was smooth. After a few iterations, Ziptree was live, fast, and working as expected.
Final thoughts
What started as a random tweet turned into a real tool. The best part?
No installs – works straight from the browser
No setup – just drag, drop, and see your folder structure
Built with Next.js 15, Tailwind, and Radix UI for a smooth experience
If you ever need to visualize a .zip structure quickly, Ziptree is here.
Try it out at ziptree.xyz — and let me know what you think!