README

The web began with static websites, unchangeable.

It evolved to support web apps, fully dynamic.

There's something missing, in between: dynamic, but limited to a single web document.

malleable web pages

1. An ordinary web page, built with front-end HTML, CSS, and JS
2. That can edit itself

It edits itself through admin controls its creator bakes into the page, so anyone who forks or downloads it can also edit it easily.

The changes it makes to itself are persisted by giving HTML one new feature: the ability to overwrite itself.

why not build a full-stack web app instead?

Coding up a malleable web page feels like writing a Google Doc.

1. You write the front-end code
2. Get the UX working as expected
3. Other people can use it immediately

If you have a self-contained, interactive page whose value lies in its interface and visual output, a malleable website is a better, lightweight alternative to a full-stack web app.

scenarios

Imagine you and your friends want to keep track of your backstories in a role playing game:

Lucas: <textarea persist=""></textarea><br>
Sophia: <textarea persist=""></textarea><br>
Finn: <textarea persist=""></textarea>

Or you want to check off a packing list with your partner:

<input type="checkbox" persist="">
<input type="text" value="Car snacks" persist=""><br>
<input type="checkbox" persist="">
<input type="text" value="Movie tickets" persist=""><br>
<input type="checkbox" persist="">
<input type="text" value="Lucky mini golf shirts" persist="">

Or you want to take some notes:

<div contenteditable="true">Edit me!</div>

Ordinarily, these static websites are unchangeable.

With hyperspace, they become malleable.

HTML backend

Malleable web pages work in a simple and elegant way.

Whenever their DOM changes, their HTML is saved to the user account editing them.

Developers get to skip hooking up APIs, rendering templates, wrangling user accounts, and managing state.

It's DOM all the way down.

1. Visuals = DOM
2. State = DOM
3. DB = DOM

Just one big state machine. (Or, if you prefer: a live-editable XML database with a nice UI layered on top)

flattening the stack

There have been many attempts at flattening the web stack into new primitives.

1. Laravel + Inertia.js: routes and components that you write once, but run on both client and server.
2. FastHTML + HTMX: server calls and rendering with HTML attributes.
3. Remix: mixes full-stack APIs into client-side React code.

My first attempt at building malleable web pages flattened the stack into data + templates. By adding a few attributes to HTML, it could extract data when it changed and render it later.

Now we're flattening the stack even further: just HTML.

self-updating HTML

a malleable website is:

1. A single page of HTML
2. you design and code yourself
3. that can update itself with embedded admin controls
4. and that other people can view or clone.
5. It allows for infinite flexibility in design and local output
6. and it's self-contained to a single web document.
7. It's perfect for personal apps and single-purpose websites.

features

1. Self-Updating HTML: Sites can overwrite themselves, so they're single-layered, persistent, and malleable.
2. Portable: Each page is a self-contained HTML document, so it can be easily hosted by other platforms or apps.
3. Front-end Focused: Build full dynamic interfaces using nothing but front-end HTML, CSS, and JS.
4. Live Editing: Edit your app and its code in production.
5. Fork and Remix: clone and build on top of others' work.
6. Persistence: Changes are saved automatically, turning every user interaction into a lasting update.
7. Simple Deployment: Paste your front-end HTML code and publish.
8. Personal UI: Design an admin interface unique to your app.

our library of malleable pages

project log (WIP)

[img: loop panphora.gif]

1. 🌍 [link: video demo]
2. 🎥 [link: code walkthrough]
3. 🤙 [link: interactive demo]

kanban board (WIP)

[img: loop kanban.gif]

1. 🌍 [link: video demo]
2. 🎥 [link: code walkthrough]
3. 🤙 [link: interactive demo]

page writer (WIP)

[img: loop page-writer.gif]

1. 🌍 [link: video demo]
2. 🎥 [link: code walkthrough]
3. 🤙 [link: interactive demo]

build a malleable web page

1. Sign up
2. Paste your HTML
3. Click publish

Any changes you make to your malleable web page (using your app's UI or the built-in code editor or even your browser's DevTools) will persist.

Viewers and guests to your site will not be able to edit it.

a series of compounding hacks

How it all started:

Back at my second job, immersed in the simple ecstasy of traversing the DOM with jQuery, our backend developer hacked together an anything-goes /user-data route and handed it off to the front-end team.

We could POST anything to that route and it would save it to the current user's account. It was magical.

5 years later I read about sending rendered HTML templates over the wire instead of JSON to simplify how much state the frontend has to manage.

One job interview at a session replay company later — who told me they were sending whole HTML documents over the wire to render the session replays in their app — and I had the foundation for an epiphany.

The epiphany came on a midday walk when I asked myself the question: "What is a web app, really?"

The answer surprised me: in many cases, it's the ability to modify HTML through a nice UI and share the result.

By that point, I had built about 30 small web projects and come across the same problem over and over again: I could build useful frontend apps in hours, but making them persistent took months (user accounts, database, API routes, templating, state management, file handling, deployment, hosting).

The answer was simple, but scary: allow users to make any change they want to their page (primarily through its UI), send the page's full HTML over the wire, and save it to their user account. Then send it back when they (or another user) requests it.

I took a 4 year detour down the web-stack-framework-making-rabbit-hole because I thought JSON + HTML made a great combo, but I've since come around to the idea that pure HTML is a much more pleasurable stack to work with.

I take strong inspiration from Coda, Notion, Val.town, mmm.page, and LLM artifacts. I think we're entering a new era of personal, malleable computing where coding feels more like interacting with real objects you can mold, and less like static data locked in a UI you have no control over.

hyperspace principles

1. Use Native Technology: Leverage standard web technologies so we don't end up reinventing the web.
2. Default to Open Source: Foster the rapid evolution of ideas by coding as much as possible in the open.
3. User Experience Over Profits: People come first because we're building a product. Making it intuitively tangible is our focus.
4. Do It The "Wrong" Way: All rules should be rewritten regularly to serve the people they're meant to serve.
5. Flatten the Stack: We want people to create simple, malleable digital objects that can easily fit in other people's heads.

hyperspace vision

Our long-term goal is to foster small, independent businesses that deconstruct, reverse engineer, and subvert large corporations (who have hyper-scaled and subsisted largely through ecosystem-destroying, predatory behavior) and replace them with an ecosystem-nurturing collective that uplifts every individual.