We live in a screen-based world, but the modern web has traded creative freedom for algorithmic optimization and cloud dependency.
Zine Engine exists to reclaim the browser as a site for tactile, autonomous art. We concede the hardware—the mobile device, the browser engine—but we reject the corporate ecosystem. It is an offline-first, drag-and-drop digital scrapbook that outputs 100% static, dependency-free HTML. You build it off the grid, and it lasts forever.
Here is the "why" behind how it works:
- Scrapbooking Over Systems: Creation should be immediate. There are no databases, CMS, or deployment scripts. Just drag, drop, layer, and save.
- The Conceded Canvas: We accept the mobile screen as our baseline medium, but we refuse to let algorithms break the art apart to fit other devices. Your layout acts as a fixed poster that simply scales up proportionally on a desktop, preserving your exact spatial intent.
- Vernacular Motion: We prioritize web-native culture over slick production. There are no complex animation timelines—motion is achieved strictly through mindful layout and the raw inclusion of GIFs.
- Architectural Autonomy: You build the paths. There is no auto-generated navigation. Every page is a blank sheet you connect manually, aided by an engine that quietly maps your local files so you can link them effortlessly.
- The Subversive Stack: We use heavy modern frameworks to build the editor, but strip them away before it reaches your hands. The app you download requires zero dependencies, no cloud accounts, and no internet to run.
- HTML as the Artifact: Digital art shouldn't rot when servers die. The exported zine is purely static, acts as a lossless backup, and leaves no trace of tracking scripts or external libraries.
Before you proceed, decide how you want to interact with this engine. Choosing the wrong route can lead to unnecessary setup and frustration!
You do not need to install any development dependencies, compile code, or run npm commands. You can run Zine Engine completely offline and "off the grid."
<<<<<<< HEAD
- Do not click the green "Code" button. Instead, go straight to the Releases tab on the right side of this page. =======
- Do not click the green "Code" button. Instead, go straight to the [Releases] tab on the right side of this page.
d8cff0fd7ab8cc3985fa534171e399baaa02309a
- Download the
Zine-Engine-Release.zipfrom the latest release. - Unzip the file anywhere on your computer.
- Open your terminal or command prompt, navigate to the unzipped folder, and run:
node run.js
- Open http://localhost:3000/editor/ in your browser and start designing! Your publications will be saved directly into your local
zine-dist/folder.
You want to modify the editor's UI, add new layout components, or hack the core compiler. The codebase is a robust, full-stack application.
- Editor Tech Stack: React, Vite, Tailwind CSS.
- Dev Server: Node.js, Express, Multer.
To start hacking on the engine:
- Clone this repository to your local machine:
git clone https://github.com/your-username/zine-engine.git cd zine-engine - Install all development dependencies:
npm install
- Boot the development workspace:
npm run dev
- Modify files in
editor/andsrc/to your heart's content. To compile changes for the distribution build, run:npm run build
Zine Engine maintains a strict separation between The Factory (the source code and editor environment) and The Tool (the zero-dependency standalone package):
editor/contains the static HTML/CSS/JS files for the publishing interface.server.jsis the full Express-based server used during development.server/run.jsis a tiny, native Node.js HTTP server that handles static asset serving and local file persistence using only standard Node modules. It is bundled asrun.jsin the final release package.zine-dist/is the storage folder where the editor compiles and writes your custom pages (layouts, index.html files, uploaded image assets, andstate.jsontemplates).
