Building a Content-First Web Runtime (UI as a Lens, Not a Template)

Most web apps today follow the same pattern:

• design pages

• write components

• add routes

• repeat layout logic forever

• ship CSS for every new surface

Even with modern frameworks, we still rebuild the same idea of a page over and over.

So I started exploring a different approach:

What if pages weren’t authored as UI… but as structured content + intent?

That’s what I’m building: a content-first runtime where the interface is not fixed and pages are declared as JSON nodes.

⸻

The Idea

Instead of building UIs like:

`

I declare them like:

{

"type": "Layout",

"props": {

"leftSidebarConfig": {

"initialView": "rail",

"elements": [

{ "type": "link", "props": { "label": "Home", "icon": "home", "href": "/" } },

{ "type": "link", "props": { "label": "Catalog", "icon": "palette", "href": "/catalog" } }

]

}

},

"children": [

{

"type": "Page",

"props": { "title": "Runtime demo" },

"children": [

{ "type": "Button", "props": { "variant": "contained" }, "children": ["Click me"] }

]

}

]

}



Then the runtime mounts it:

GUI.mount(spec, "#root");

⸻

Why This Is Different

This isn’t about replacing React, Vite, or components.

It’s about replacing the idea that UI has to be built as screens.

In this runtime:

✅ UI is just a renderer

✅ Layout is reusable across everything

✅ Navigation becomes data

✅ Pages become focus spaces

✅ Content becomes the primary artifact

Navigation as a Link List

Instead of hardcoding sidebars, nav becomes a list of link nodes:

{

"type": "link",

"props": {

"label": "Storybook",

"icon": "auto_stories",

"href": "https://example.com"

}

}

That’s it.

Now every surface can share the same navigation rules, theme wiring, and layout logic.

No need to rebuild “the sidebar” ever again.

⸻

This Starts Feeling Like a Browser

At some point I realized:

I’m building a browser for structured content.

The runtime becomes:

• a layout engine

• a theme engine

• a node renderer

• an interaction router

And everything else is just content.

Pages stop being templates and become spaces where content lives.

Why AI Fits Naturally Here

This model is also perfect for AI.

Instead of generating full React projects, AI can generate small specs:

{

"type": "Page",

"props": { "title": "Themes" },

"children": [

{ "type": "ThemesCatalog", "props": { "minimal": true } }

]

}



No CSS.

No routing glue.

No component wiring.

Just structured meaning.

The runtime renders it.

⸻

What I’m Working Toward

The next step is to formalize this into a “site spec”:

{

"site": "this.GUI",

"nav": [...],

"pages": {

"/": { ...spec },

"/catalog": { ...spec }

}

}

So the runtime becomes a real content browser:

• load routes

• mount specs

• reuse layouts

• generate focus dynamically

⸻

The Core Principle

Don’t build interfaces. Build runtimes that interpret meaning.

When you do that…

UI becomes a lens.

Not a template.

⸻

If You’ve Felt This Pain Too… you might enjoy this direction.

I’m building this openly as part of neurons.me.