ObjectUI Protocol

ObjectUI is a standard protocol for describing User Interfaces as JSON Data.

It decouples the Definition of the interface from the Rendering implementation. This allows the backend to dictate the layout, logic, and flow of the application, enabling features like instant updates, A/B testing, and dynamic permissions without redeploying frontend code.

The Core Problem

In traditional Single Page Application (SPA) development, the "Shape" of the application is hardcoded in JavaScript/TypeScript:

// The Hardcoded Way (Traditional)
const UserProfile = ({ user }) => {
  // Logic coupled with View
  if (!user.isAdmin) return <AccessDenied />;
  
  return (
    <div className="grid grid-cols-2">
      <TextField label="Name" value={user.name} />
      <TextField label="Email" value={user.email} />
    </div>
  );
};

If you want to add a "Phone Number" field or change the layout to a single column, you must:

1. Modify the code.
2. Rebuild the bundle.
3. Redeploy the application.

The ObjectUI Solution (UI as Data)

ObjectUI treats the interface as a recursive JSON tree. The Frontend becomes a generic Render Engine.

// The ObjectUI Way (Protocol)
{
  "type": "layout.grid",
  "props": { "columns": 2 },
  "children": [
    { 
      "type": "field.text", 
      "bind": "user.name",
      "props": { "label": "Name" } 
    },
    { 
      "type": "field.text", 
      "bind": "user.email",
      "props": { "label": "Email" },
      "hidden": "!user.isAdmin" // Logic is data
    }
  ]
}

If you want to change the layout, the server simply sends a different JSON. No deployment required.

Key Concepts

1. The Component Node

Every element in the UI—whether a simple button or a complex Kanban board—is represented by a Node.

• type: The identifier (e.g., form, chart, button).
• props: Visual configuration (passed directly to the React component).
• children: Nested nodes (for layouts).

2. The Renderer & Registry

The Renderer is a recursive function that traverses the JSON tree. The Registry maps the string type to a physical React Component.

Note: ObjectUI is built on Shadcn UI and Tailwind CSS. The JSON protocol maps directly to these high-quality primitives, ensuring the result looks professional and hand-coded, not like a generic "low-code" tool.

3. Data Binding

Components are not static. They bind to a Data Scope.

• bind: "order.total" tells the component to subscribe to the total field of the order object in the global state.
• Two-way binding is handled automatically by the engine.

4. Action Protocol

Events are serializable. Instead of passing functions (which cannot be serialized to JSON), we define Actions.

• Traditional: onClick={() => navigate('/home')}
• ObjectUI: onClick: [{ action: 'navigate', url: '/home' }]

Why Server-Driven UI?

Benefit	Description
Instant Agility	Add a field to a form in the DB Schema, and the UI updates instantly across Web, Mobile, and Desktop.
Consistency	The Design System is enforced by the Protocol. Developers cannot "accidentally" use the wrong padding or color.
Payload Efficiency	The frontend bundle size remains constant, regardless of how many thousands of pages your ERP system has.
AI Generation	It is much easier for an LLM to generate a valid JSON structure than to write correct, compiling React code.

Next Steps

• Learn the JSON Schema Structure.
• Explore the Layout System.
• Understand Actions & Events.