Back to blog
·6 minArchitecture

Why Schema-First Beats Component-First

The front-end ecosystem is built on components. React components, Vue components, Flutter widgets, SwiftUI views. Components are the unit of composition.

But components are implementation details. They're tied to a specific framework, a specific rendering target, a specific version of a runtime. A React component doesn't help you build for Flutter. A Flutter widget doesn't describe anything to an AI agent.

Schemas are contracts

A UIXDocument is a contract. It specifies:

  • What the UI is — a tree of nodes with types, properties, and relationships
  • How it looks — layout rules, style properties, design token references
  • What it means — semantic roles, accessibility labels, user journey annotations (the "Soul" layer)
  • How to render it — embedded renderer templates for every supported platform (the "Canonical Registry")

A component says "here's how to render a button in React." A schema says "here's what a button is, everywhere."

The composability advantage

When UI lives in a schema:

  • Tools can reason about it. A QA engine can detect regressions by comparing schema properties. An AI agent can read the schema, understand the intent, and generate modifications.
  • Platforms are derived, not duplicated. You don't write a React button and a Flutter button. You describe a button once — the codegen layer emits both.
  • Design and code are the same artifact. UIX Canvas is the visual surface where you design directly in the protocol. No handoff, no drift.

What about interactivity?

This is where most schema approaches fail. They handle static UI but punt on interactions, state, and animations.

UIX Protocol addresses this through its layered architecture:

  1. Bindings (Nervous System layer) — declarative references to data and intents, not imperative logic
  2. Variants — visual states like default, loading, error.offline encoded in the schema
  3. Animations — keyframes, easing, transitions expressed as schema properties, resolved by the runtime
  4. Physics + Chemistry — spatial behavior and composition rules that govern how nodes relate

The key insight: UIX describes UI, not logic. Business rules, API calls, validation — those live in your application layer. UIX gives the application layer a structured surface to bind to.

Schema-first in practice

Here's what a typical workflow looks like:

  1. Design in UIX Canvas (or import from Figma via the plugin bridge)
  2. UIXDocument lives in your repo as .uix.json
  3. uix diff compares your local schema to the server — like git diff for UI
  4. @uix/codegen generates React, Flutter, or SwiftUI from the document
  5. @uix/qa-engine detects visual regressions between document versions
  6. AI agents read the document via MCP tools and suggest improvements

One document. One truth. Every tool in the ecosystem speaks the same language.

Conclusion

Components are how you implement UI. Schemas are how you describe it. UIX Protocol bets that the description is more valuable than any single implementation — because the description is portable, machine-readable, and permanent.