Internal · Studio Jan Henrik Hansen
How the Prototypes page works
A short tour of prototypes.origin-infinite.com — what it is, how things get on there, and what makes it easy to use without writing code.
What it is
A small private site for sharing self-contained HTML experiments — design explorations, technical write-ups (like the one you're reading), client-facing previews. One folder per prototype, one URL per folder, newest first.
The point is the speed of publishing. Anything you can show in a single HTML file — a styled article, a Figma export, an interactive demo, a one-page deck — can be online and shareable in under a minute, without involving a developer. Every prototype shows up on the index with a title, a date, an author, and tags you can filter by.
Three ways to add a prototype
- Drop a folder in Dropbox. The most natural path if you're not a developer. Duplicate the starter folder in our shared Dropbox, rename it, edit the files inside, and within a few seconds it appears on the live site. For: anyone, no setup needed
-
Use the "+ Add prototype" button on the site. Pick an
.htmlfile or a.zipfrom your computer, fill in title and tags, hit upload. Good for quick one-offs. For: anyone, when the prototype is already a finished file - Push to the GitHub repository directly. The technical route for people working in code already. For: developers
The Dropbox workflow, step by step
Inside our SpaceMusic Dropbox, the folder 4_FORSCHUNG / F032_Prototypes / prototypes.origin-infinite.com is kept in two-way sync with the live site. Whatever sits there appears online. To add something new:
- Duplicate the folder called
_template. - Rename your copy to something like
2026-05-14-my-experiment. The date prefix puts it in the right place on the timeline; the words after are the URL slug. - Edit
index.html— whatever you want the prototype to look like. - Open
meta.jsonand replace the placeholder title, author, blurb, and tags. - That's it. Within roughly half a minute it shows up on
prototypes.origin-infinite.com.
The reverse works too. If a developer pushes a new prototype straight to the code repository, it shows up in Dropbox automatically. If you archive a prototype from the website, it moves into a Dropbox subfolder called _archive rather than disappearing.
What's actually behind it
Behind the scenes
Three pieces hand off to each other:
- Dropbox is where edits happen for anyone who isn't a developer. Familiar folder view, native sync, no logins.
- GitHub is the source of truth — every change is a commit, with full history, so we can roll back a mistake or look up who changed what.
- The live site rebuilds automatically whenever GitHub changes. It scans the prototype folders, generates the index, and publishes.
The Dropbox ↔ GitHub bridge is a small service we run called Sync. It quietly watches both sides and keeps them in step. You don't have to think about it.
On the index, three small features
Search & filter
Type in the search box to match titles, authors, blurbs, or tags. Click the chips above to filter by author or tag — combine multiple, they narrow the results.
Edit metadata
Each card has a small "⋯" menu. Edit changes the title, author, date, blurb, and tags without touching the file itself.
Archive, not delete
The same menu has Archive: the prototype disappears from the index but the files are kept in _archive. You can always restore it later by moving the folder back.
Why it's set up this way
Most "small publishing" tools force a choice: easy to use but locked into one place (Notion, Figma boards), or fully open but require code (a Git repo, a static-site generator, a CI pipeline). This sits in between. The site is just a folder of HTML files; the experience of adding to it is "duplicate something in Dropbox and edit". The technical scaffolding is invisible to the people writing content, and not in the way of the people writing code.