Zines are small-circulation, self-published magazines about whatever you feel like putting on paper: photos, comics, poems, political rants, fun facts from niche obsessions, you name it.
They are pretty easy and cheap to make: you just print a page, maybe cut it up a bit, fold it a little, and then you have a cute little 8-page book! If you want to copy one, just unfold it and put it on a copy machine. I think this convenience plays a role in their long and unruly history, spanning science-fiction fanzines in the 1930s, 1970s punk rebels, and queer zines in the 1990s. Speaking of punks a good ressource I found is the “Punk’s Guide to Printing Zines”
For a personal example: I once made a few zines for a friend when she moved away, commemorating some of the good times we’d had together (and the bad jokes). I had worked with pen and paper then.
Here is the kicker: if you want to design your zine digitally, preparing the page correctly for printing can turn out to be bit of a PITA if you are no photoshop wizard. There is some browser tools, but they want me to upload my designs to somebody else’s server. Instead, I want something that works fully in the browser, is easy to use, and stays free without ads. So I built it.
What could go wrong?
My needs
As always, I started by writing down my needs:
- Support for the the classic 8-page mini-zine format, both A4 or US Letter
- Import images and PDFs, place them on pages, and provide basic transform and editing tools.
- Export one PDF that I can print at 100%, fold, cut, and turn into a zine.
- Run everything locally in the browser.
- Show clear, animated assembly and folding instructions.
The last bullet point was the toughest nut. So let me spill the beans on how I did it.
Animating how to print and fold an 8-page mini-zine
For the folding instructions, a few diagrams would have been the sensible way. But as AI models are becoming more capable, I tend to push things just a liiiittle further, partly to feed my curiosity about whether the model could actually do it. I ended up with a fully animated Three.js folding engine inside my zine editor.
Have a look! Drag the scene to rotate it.
The first version Codex came up with treated the paper directly as a collection of rotating rectangles. That was a pain to animate and iterate on the animations though and formats with cuts make for complex interplays between these rectangles.
Instead, the folding engine I ended up with has three parts: (a) a TypeScript model describes the fold and cut lines. Then, (b) each instruction/step in the assembly guide is a little keyframed script, that can control crease angles, trigger some cuts, change the camera position, etc. And finally, (c) a kinematic evaluator, given the folds and cuts, can compute the resulting paper panels and their transformations resulting from the steps’ crease angle changes.
Then, React Three Fiber renders the result with the actual page textures, travelling scissors, shadows, and staples.
Making the editor convenient to use
Once the complicated bits worked, I added the small conveniences that make the editor pleasant enough to use for more than five minutes:
- Optional printer-margin and fold-overlap lines show where the physical printer gives up and where the paper will crease. The editor can snap objects to them, too.
- Added undo and redo buttons
- Autosave writes the current project and its assets to IndexedDB, in case your browser crashes.
- You can also export the project to a
.zine.zip, e.g. to continue the work on another machine.
There is also a preflight check, which points out empty pages, images below 150 PPI at their printed size, content hanging off the page, and objects very close to folding creases in the final zine.
Some dragons remain
Nothing is perfect!
- ZineTool is not optimized for mobile screens. Below 900 pixels, it rejects the device outright and asks the user to return with a larger screen.
- The animated guides use Three.js through React Three Fiber and thus require WebGL. A fallback would mean maintaining a second set of SVG animations or pre-rendered videos next to the real guide. I decided against that for now, since I have spent long enough on this project already. I have others to finish!
- SVGs are rasterized at high resolution instead of staying vectors.
Tech stack
This whole site runs on Astro 6, and the editor is a React island. Konva handles the canvas, Zustand holds the project state, pdf.js imports PDF pages, pdf-lib writes the exports, and Three.js plus React Three Fiber power the assembly guides. The 3D code is lazy-loaded, so only when a guide actually appears.
Try it!
You can use ZineTool right here. Pick A4 or US Letter, throw in some images or a PDF, and get back a printable PDF. It needs no account and does not upload or track anything. Oh, did I mention that already?
That’s all!
Go make something small, foldable, and maybe even a little silly, if you dare! :-)