Semantic, Data-Driven Website Generation Engine

J. Rogers, SE Ohio

---

Design Document

---

1.  Core Idea

A website is not written.

A website is derived from data + structure.

This system eliminates:

• HTML templates

• CSS authoring

• manual UI composition

and replaces them with:

Semantic data → Declarative structure → Runtime rendering

---

2.  Design Philosophy

2.1 Meaning Over Presentation

Developers define:

• what things are

• how things relate

The system decides:

• how things look

• how things flow

---

2.2 UI = f(state)

What we have now:

• IoT framework:
  Registry → Layout → Render

• Regex generator:
  Data → Compute → HTML

Unified:

State → Schema → Renderer → UI

---

2.3 Zero Frontend Code

No:

• handcrafted HTML

• CSS files

• JS UI logic (except core runtime)

Only:

• structured data

• semantic types

---

3.  System Architecture

---

3.1 Layer 1: Data Layer (Source of Truth)

Equivalent to your Registry.

{
  "temperature": 72.5,
  "humidity": 41,
  "pattern": "\\d+",
  "test_input": "abc 123 def",
  "results": ["123"]
}

Characteristics:

• raw, unit-agnostic data

• can be static or live

• comes from:

  • sensors (IoT)

  • computation (regex engine)

  • databases (comments, users)

---

3.2 Layer 2: Semantic Schema

Defines what the data means, not how it looks.

{
  "type": "regex_example",
  "data": {
    "pattern": "\\d+",
    "input": "abc 123",
    "results": ["123"],
    "description": "Matches digits"
  }
}

Other examples:

{ "type": "metric", "bind": "temperature" }
{ "type": "control_slider", "bind": "setpoint" }
{ "type": "comments", "source": "/api/comments?post=1" }

---

3.3 Layer 3: Layout Graph

Equivalent to your LayoutNode.

Defines hierarchy only.

{
  "type": "page",
  "title": "Regex Learning",
  "children": [
    {
      "type": "section",
      "title": "Anchors",
      "children": [
        { "type": "regex_example", "data": {...} }
      ]
    }
  ]
}

Rules:

• tree structure

• no styling

• no layout hints (optional minimal hints allowed later)

---

3.4 Layer 4: Resolver

Equivalent to setupLayoutResolution().

Responsibilities:

• bind data references → runtime values

• validate schema

• normalize nodes

• precompute fast lookup indices

Output:

• optimized runtime graph

---

3.5 Layer 5: Renderer

Equivalent to:

• renderContainer()

• handlePage()

This is the engine.

Responsibilities:

• walk the layout tree

• map semantic types → UI primitives

• emit UI (HTML stream or virtual DOM)

Example:

render(node):
  switch(node.type):
    case "regex_example":
      renderRegexExample(node.data)
    case "metric":
      renderMetric(node.bind)

---

3.6 Layer 6: Style Engine (Implicit Design System)

Replaces CSS.

Responsibilities:

• spacing

• typography

• responsive layout

• color system

• component styling

Rules:

• consistent defaults

• no user CSS required

• optional theme overrides later

---

3.7 Layer 7: Data Sync Engine

Borrowed directly from the IoT framework:

setInterval(refreshData, 5000)

Responsibilities:

• fetch updated values

• update UI incrementally

• support:

  • polling

  • websockets

  • event streams

---

4. ⚡ Rendering Model

---

4.1 Static Shell + Dynamic Data

The system produces:

Static:

• page structure

• layout hierarchy

• component scaffolding

Dynamic:

• values

• live sections (comments, sensors)

• user state (login)

---

4.2 Cached Output

Pages can be:

• fully static HTML (CDN cached)

• auto-regenerated when data changes

Dynamic sections:

• hydrate after load

• update independently

---

5.  Component Model

---

5.1 Built-in Semantic Types

Initial set:

• page

• section

• card

• metric

• text

• list

• regex_example

• chart

• control_slider

• button

• comments

• auth

---

5.2 Example: Regex Component

Input:

{
  "type": "regex_example",
  "data": {
    "pattern": "\\d+",
    "input": "abc 123",
    "results": ["123"]
  }
}

Renderer decides:

• layout (card)

• highlight matches

• show groups

• format explanation

---

5.3 Example: IoT Metric

{ "type": "metric", "bind": "temperature" }

Renderer decides:

• text vs gauge vs bar

• units display

• update frequency

---

6.  Live Data Flow

---

6.1 Initial Render

• server builds static HTML

• embeds:

  • registry indices

  • data bindings

---

6.2 Runtime Updates

Client:

fetch("/api/data?idx=...")

Updates:

• text values

• bars/dials

• interactive controls

---

6.3 Dynamic Sections

Examples:

• comments

• login state

Defined as:

{
  "type": "comments",
  "source": "/api/comments"
}

---

7.  Comparison to Existing Systems

Feature	Traditional	This System
HTML	manual	generated
CSS	manual	implicit
UI logic	manual	semantic
data binding	explicit	automatic
rendering	template-based	schema-based

---

8.  Advantages

---

8.1 Extreme Simplicity

• no frontend stack

• no build tools

• no styling decisions

---

8.2 Performance

• static HTML

• CDN cacheable

• minimal JS

---

8.3 Universality

• works for:

  • IoT devices

  • documentation

  • dashboards

  • apps

---

8.4 Self-Describing Systems

Any system can expose:

• its data

• its schema

→ instantly becomes a website

---

9.  Challenges

---

9.1 Expressiveness

• complex layouts without CSS

• advanced interactions

---

9.2 Style Engine Complexity

• must produce good results universally

• avoid “one-size-fits-all ugliness”

---

9.3 Component Explosion

• need extensibility

• avoid hardcoding everything

---

9.4 State Management

• forms

• workflows

• user sessions

---

10.  Future Extensions

---

10.1 Custom Semantic Types

Allow users to define:

{
  "type": "financial_report",
  ...
}

---

10.2 Adaptive Rendering

Renderer chooses layout based on:

• data size

• device

• context

---

10.3 AI-Assisted Styling

System learns:

• better layouts

• better hierarchy

• better defaults

---

11.  Final Insight

This system removes an entire layer of abstraction:

Old:
Data → API → Frontend Code → HTML → User

New:
Data → Meaning → Renderer → User

---

12.  One-Line Summary

A website is a projection of structured data through a semantic renderer, not a manually constructed artifact.