How I built Ziptree

May 27, 2025

A courtyard with a solitary tree, surrounded by walls, under a clear blue sky, creating a tranquil atmosphere.
A courtyard with a solitary tree, surrounded by walls, under a clear blue sky, creating a tranquil atmosphere.

Building Ziptree: A Simple Drag & Drop Folder/ZIP Viewer

Some time 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.

And it also works on mobile.

Final thoughts

What started as a random tweet turned into a real tool. And the best part is…

  • 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!