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

Source: Dev.to

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:

// traditional component tree

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

• ✅ 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 hard‑coding sidebars, navigation becomes a list of link nodes:

{
  "type": "link",
  "props": {
    "label": "Storybook",
    "icon": "auto_stories",
    "href": "https://example.com"
  }
}

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

Everything else is just content. Pages stop being templates and become spaces where content lives.

Why AI Fits Naturally Here

This model is 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 that the runtime renders.

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 it openly as part of neurons.me.