How it works — Prototypes

What this is

A lightweight host for shareable HTML prototypes. The whole site lives in a GitHub repo (SpaceMusicZH/Prototypes) with one folder per prototype under sites/. Adding a new folder — by any of the three methods below — triggers a rebuild and the prototype appears on the landing page automatically. Hosted at prototypes.origin-infinite.com.

Adding a prototype

Three ways, pick whichever fits:

From this site. Click + Add prototype in the header, pick a .html file or a .zip, fill in title and tags, submit. The server commits a new folder to GitHub and the site redeploys within ~30–60 seconds.
From Dropbox. The Dropbox folder 4_FORSCHUNG/F032_Prototypes/prototypes.origin-infinite.com/ is kept in two-way sync with the sites/ folder in the repo. Duplicate _template/, rename the copy YYYY-MM-DD-your-slug, edit index.html and meta.json. Within ~30 seconds the sync engine commits to GitHub and the site rebuilds. Edits made in Dropbox propagate to GitHub; archives made on this site propagate back to Dropbox. The sync dashboard is at sync.spacemusic.tv.
Via git. Create a folder under sites/, drop in index.html plus meta.json, commit, push to main. dev push redeploys.

meta.json schema

{
  "title":  "Human-readable title",   // required
  "author": "armin",                   // optional
  "date":   "2026-05-13",              // optional — falls back to folder prefix
  "blurb":  "One or two sentences.",   // optional — appears on the card
  "tags":   ["ui", "experiment"]       // optional — clickable filters on the index
}

Folder naming

Folders use the pattern YYYY-MM-DD-slug. The date prefix drives default sort order (newest first). Use the Date field in the Add modal to backdate a prototype if you're uploading something you made earlier.

ZIP rules

index.html must exist at the ZIP root, or inside a single top-level folder (which gets stripped).
Path traversal (..) is rejected. macOS metadata (__MACOSX/, .DS_Store) is stripped.
Caps: 100 files, 20 MiB uncompressed total.

Search & filter

The search bar matches against title, author, blurb, and tags. The tag chips at the top toggle filters — selecting multiple tags shows prototypes matching any of them (OR). Search and tag filter combine: matches must satisfy both. Click Clear filters to reset.

Editing & archiving

Each card has a ⋯ menu in the top-right with two actions:

Edit opens the same form as the upload modal — title, author, date, blurb, tags. The file isn't editable here; edit it via Dropbox or git if needed.
Archive moves the folder from sites/<slug>/ to sites/_archive/<slug>/. It disappears from the index but the files remain in the repo, still visible in Dropbox, and can be restored by moving the folder back. Archive is not delete.

Where files live

sites/<folder>/ — one folder per prototype (this is what you add to). Mirrored to/from Dropbox under 4_FORSCHUNG/F032_Prototypes/prototypes.origin-infinite.com/.
sites/_archive/ — archived prototypes. Visible in Dropbox, excluded from the index because the folder name starts with _.
sites/_template/ — starter folder a non-dev can duplicate in Dropbox to add a new prototype without writing JSON by hand. Excluded from the index.
_shared/ — optional cross-prototype assets; served at /_shared/.... Not synced to Dropbox (lives outside sites/).
_template/ — repo-level index page CSS + HTML and this docs page (different from sites/_template/).
build.mjs — scans sites/ and writes dist/.
serve.mjs — static server plus POST /upload and GET /me.

Folders starting with _ or . are excluded from the index but still served.

For AI agents

If you're an AI assistant being asked to add a prototype, read CLAUDE.md in the repo — it has the local recipe (folder name, meta.json, build + commit). The same conventions apply whether you upload via the button or push directly.

← Back to prototypes