README

a digital piece of paper

Imagine sitting down to build a whole app: APIs, database calls, endpoints.

Now imagine having to do none of that.

Back to basics.

Just HTML, CSS, and JS.

Peace.

Your own little, self-contained page, where you can build one thing and focus on making it do one thing well.

Maybe it visualizes your monthly budget or helps you record memories.

Something simple.

Now imagine not having to deploy it, or host it, or build user accounts for it.

It's just a simple interactive UI that's useful to you and maybe a couple of friends.

Maybe it uses localStorage to persist its data. Maybe that's enough.

But maybe that's not enough.

Maybe you want the simplicity of a private, self-contained, local-only HTML page, but the power of a website you can share with anyone and update from anywhere.

1. A static webpage isn't cutting it
2. A full web app is wayy too much

What kind of web primitive solves this?

A hypertext document that's dynamic and knows how to persist the changes made to it.

We're talking about an HTML document that's made to be edited, live, on the internet, and shared with anyone.

“The Web was designed as an interactive space where everyone can edit.” — Tim Berners-Lee

Malleable web pages work like this:

1. They're web pages built with web basics: HTML, CSS, JS
2. You add interactive elements that modify the page
3. Changes persist automatically

Malleable web pages are a rare part of the web that are easy to create, modify, interact with, and host.

It's just HTML with an extra super power: it can overwrite itself.

the missing piece in web dev: an easy stack

The web began with static websites: unchangeable.

It evolved to support web apps: fully dynamic.

There's something missing, in between:

A web page people can use, play around with, hack to be their own — without having to invent and redeploy a backend for it.

A lightweight, malleable, easy-to-build web document.

You control the viewable UI.

You build the editable UI it uses to shape itself.

Each malleable web page is a self-contained mini world that you have full control over.

why not build a full-stack web app instead?

Coding a malleable web page is like writing a Google Doc.

1. You write some HTML/CSS/JS
2. Ensure your page is interactive
3. Press "save" and you can live-edit your page from anywhere

If you have a self-contained, interactive page, a malleable website is a great, lightweight alternative to a full-stack web app.

You get to a single-layered page of HTML, CSS, JS that's useful on its own.

A full-stack app is great fit if you want to do something complex, like build a song recommendation engine or stock market analysis, but if you're just trying to make an ephemeral UI persist, it's overkill.

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.

As malleable web pages, they get the power to shape and persist themselves.

HTML backend

Malleable web pages work in a simple and elegant way.

1. If an anonymous viewer is looking at them, they're just a regular web page
2. If their page owner is using them, their admin UI becomes visible and changes to their HTML are saved to the current user account

The developer of a malleable web page gets to skip hooking up APIs, templates, user accounts, and state.

It's DOM all the way down.

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

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

flattening the stack

There have been many attempts at flattening the web app 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 JSON + Handlebars.js templates. By adding a few attributes to HTML, it could extract data when the page changed and render it later.

Now I'm taking a new approach that tries to change as little as possible about the native web stack:

HTML is the new platform.

self-updating HTML

a malleable web page is:

1. A single page of HTML
2. you design and code yourself
3. that can update itself with embedded admin controls that you also design and code yourself
4. and other people can view your page or fork it for themselves.
5. It allows for infinite flexibility in UX and visual output
6. and it's self-contained to a single web document
7. making it easy to transfer to your own service or local device.
8. It's perfect for personal apps and single-purpose web pages.

features of malleable web pages

1. Self-Updating HTML: Pages can overwrite themselves.
2. Persistent: Changes made to a page are saved automatically, turning every user interaction into a lasting update.
3. Versions: Every version of a page is backed up, so you don't lose any progress.
4. Personal UI: Design a viewer and admin interface unique to your app.
5. Portable: Each page is a self-contained HTML document, so it can be downloaded and used locally or hosted elsewhere.
6. Front-end Focused: Build a fully dynamic UI using HTML, CSS, and JS.
7. Easy-to-think-about: Since you're working with just one layer of the stack, everything just becomes easier.
8. Live-edit the Web: There's something magical about opening up a page and being able to edit a piece of the web in real-time.
9. Fork and Remix: Clone and build on top of others' work.
10. Simple Deployment: Paste a page of front-end, interactive HTML code and hit "save".

hyperspace: a place for hosting malleable web pages

I'm a solo founder and a father of two. I started building hyperspace about a year ago, but I've been in the let's-make-HTML-capable-of-web-apps camp for 7+ years and have been building interactive tools and creative platforms on the web for twice that time.

I love building new things and hyperspace is my attempt to bring that joy to more people.

I imagine that, if there's a way to create lightweight, malleable web things, more people will create and share and build on each other.

I want to see more invention on my social timeline.

I also would love to create a sustainable, independent business that I can pass down to my children and have them be proud of it.

library of malleable web 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]

building a malleable web page (sign up)

1. Sign up for hyperspace or another malleable web platform
2. Paste your HTML
3. Click save

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

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

go deeper: how to build malleable pages

For a deep dive into the documentation and everything I've learned about building malleable pages so far, read the official guides:

1. Building malleable pages on hyperspace
2. hyperspace platform (WIP)
3. hyperspace.js (WIP
4. all.js (WIP)

the story behind hyperspace: 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 browsing the web feels more like interacting with real objects you can mold, and less like viewing static data locked in a UI you have no control over.

hyperspace's 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 fit easily in people's heads.

hyperspace's vision

Our short term goal is to make people realize their world is more malleable than they thought.

Our long-term goal is to foster small, independent businesses that deconstruct, reverse engineer, and subvert stale, large-scale ecosystems, breaking them apart into smaller, more flexible, mini-ecosystems.

We think this process of diffusion will make the world more chaotic and free.