A hands-on tour · you're already inside it
The fastest way to learn Origami is to watch a deck do the thing it's describing. So this one does — every fold you flip through is the feature it explains. Open it in the Studio and start poking.
one fileno appno networkyou can edit this
Start here
No install, no sign-in, no loading spinner reaching for a server. An Origami deck is one self-contained HTML file: the data, a tiny renderer, the fonts, the images — all inside.
Double-click and it plays, anywhere a browser runs. Open it in the Studio and the very same file becomes editable — no import, no export.
Email it, archive it, drop it in git. There's no "master copy" living in some app's cloud — the artefact travels whole.
What's inside the file
A JSON block: fold order, kinds, theme tokens, any custom blocks. The single source of truth for the deck.
One inert <template> per scene. It never runs until the runtime mounts it — that's why a stray file can't bite.
An inline table of data-URIs — images, subsetted fonts, the crane — plus a ~29 KB embedded viewer. The file carries everything it needs.
≈ 29 KB viewerfonts embeddedno CDN, ever
The first thing to try
Open this deck in the Studio and click this sentence. It goes editable. Type. That is the entire learning curve — there's no mode to switch into first.
Even a checklist you can actually tick:
Build with
Select a block, hit ＋, pick another. Everything on this fold is a block — and each renders identically in the Studio, on file://, and to an AI.
Callout. Pull a note out of the flow — tone it green, amber or red.
Traffic light — click the lamp to set status
…and headings, ledes, columns, dividers, icons, images, code — every one recolourable, resizable, realignable.
Make it yours
Select text and a small toolbar appears above it: colour a word, realign the block, size it up, swap the font.
Tint just a few words, or tone a whole block. A colour-only style is safe — it never trips the padlock.
Right-aligned, one size up. Six sizes, three alignments, per block.
align L/C/R6 sizestone or #hex4 fonts
The panel on the left
Every scene is a fold. The rail is the outline: add, rename, reorder, duplicate, tuck, hide. Drag a row to reshuffle; the whole deck follows.
Card — a slide (you're on one). Scroll — a flowing document. Ledger — a live spreadsheet. The New menu leads with these three.
Then a shelf of ready-made kinds — Roadmap, Tracker, Flowchart, Node graph, Scratch pad — each a live component, one click to drop in.
Origami · a Document fold · v1.0
Pick Scroll from the New menu and the fold reads as a continuous A4 document instead of a slide. Same editor, same blocks — it just flows. This whole fold is one.
The contents list above and the numbers on these headings are not typed — the runtime builds them from the headings as you write.
Sections number themselves, sub-sections nest, callouts and code sit inline, and a page break starts a fresh printed page.
Add a Section or Subsection block and the counters shift to fit. Move one and they renumber. Nothing to keep in sync by hand.
A Scroll exports to a real Word .docx — headings, lists and tables become Word headings, lists and tables, not a screenshot.
Scroll → Word (.docx)
Deck → PowerPoint (.pptx)
Either → PDF (A4 or 16:9)Long documents shouldn't split mid-thought. Drop a page-break block wherever a printed page should end — like the one right below this line — and Print to PDF or export to Word starts a fresh page exactly there. No stray widows, no section sliced in half.
Card, Scroll and Ledger are the same engine wearing different clothes — which is why a table, a chart or a callout drops into any of them and just works.
A spreadsheet that travels in the file — formulas bake to safe values
Numbers that arrive with a flourish
Drop a stat block and the figures count up on arrival; add a trend card and it sketches a sparkline. What the viewer costs the reader:
A live chart, from the same figures
A live, colour-coded table — search it, sort it
A live kind · swimlanes, lenses, milestones
A live kind · click a cell to edit, set a status, tick to close
A live kind · the mental model for editing
A live kind · a free-positioned relationship map
A live kind · your OneNote for the year
Capture anything — ideas, snippets, to-dos. Colour a card, pin it, search the board, drag to reshuffle. All in the runtime, so the file stays inert.
The escape hatch
Define a typed block once — give it fields (text, a number, a dropdown, a colour) and an inert HTML template. The Studio auto-builds the editor for it, and the definition rides inside the file. The three cards below are one custom block, placed three times — live, right now:
Open this fold in the Studio → ✎ fields to edit a card, or ＋ → ✦ New custom block to make your own. An AI does it with one define_block call.
Pure declarative SVG/SMIL — <animateTransform>, <animate>. No script, no <style>. It animates everywhere and opens with no padlock.
Declarative animation is inert — so Folio doesn't flag it active.
It all travels in the file
A theme is a set of tokens baked into the file — pick a preset (Paper, Boardroom, Meadow, Dusk) or roll your own colours. Fonts embed as subsetted woff2; nothing ever phones a CDN.
Background, ink, accent, rules — set them once and every fold follows. Save a custom theme to reuse it across decks.
The origami crane is the default mark — and it's a declarative SMIL animation flying inside an <img>. It wears the deck's accent, or pin it a colour of its own. Replace it with your logo and Folio never repaints yours.
4 presets + customembedded woff2recolourable masthead
When it's ready to leave your screen
Full-screen, keyboard-driven, speaker notes on your side only. One tab, no cloud.
Serve the deck as a real localhost page — video embeds light up, and the room opens it over your wifi from a QR. View-only.
PDF, PowerPoint, or Word — self-contained, bundled libraries, no external binaries. It picks the right format for the fold.
Safe to open, free to make
Authors build freely; the recipient is protected when they open it — the Office-macro model, done right.
Inert by default. A normal deck carries no script, no remote URL, no live style — so it just renders, and a recipient never sees a warning. (This very deck is inert. No padlock.)
Padlock on open. A deck that does reach for active content opens locked and scrubbed in the Studio, sandboxed, until you choose to trust it.
The one script every deck may carry is the inert <script type="application/json"> data behind each live block — the runtime reads it; the browser never runs it.
Built for an AI to drive
origami_guide() call hands an agent the whole format contract, so it authors a valid deck having never seen one.origami-mcp so the AI edits the file directly over stdio and you watch it build.Now you try
Open it in the Studio, change a heading, drag a fold, drop a chart, tweak a custom card. Everything you just watched is one click away — and when you're done, it's still one file you can send to anyone.
open in the Studiomade with origami