Fast UI is a lightweight, purely declarative rendering engine that generates complex enterprise applications from a single JSON configuration.

By moving UI logic out of React components and into static configurations, Fast UI eliminates boilerplate, enforces design consistency, and accelerates development.

📺 See it in Action

Check out the Fast UI YouTube Playlist for tutorials, feature deep-dives, and guides on how to build enterprise applications at lightspeed!

📦 Installation

Fast UI is designed to integrate cleanly into your existing React 19 stack.

npm install "@create.nine/fast-ui"

Required Peer Dependencies:

npm install @tanstack/react-table lucide-react

⚡ Highlights

| Feature | Description | | :--- | :--- | | 🧠 Config-Driven | Entire pages, tables, and dialogs are defined in JSON. No state wiring required. | | 🔌 OData Native | Built-in HTTP client with OData v2/v4 awareness for automatic sorting, filtering, and pagination. | | 📊 Smart Tables | Powered by TanStack Table. Includes inline editing, grouping, tree data, card layouts, and CSV export. | | 🪄 Declarative Dialogs | Define forms, value-helps, and multi-step wizards as JSON. Fast UI manages the open/close/submit state automatically. | | 💅 Enterprise Design | Ships with a highly polished, responsive design system utilizing Tailwind CSS v4. |

🚀 The Fast UI Advantage

| Concept | The Old Way | The Fast UI Way | | :--- | :--- | :--- | | State Management | Dozens of useState hooks for filtering, sorting, and pagination. | Zero hooks. The config drives the internal state engine natively. | | Data Fetching | Complex useEffect wiring and loading states. | Just provide a static array or an OData endpoint. Fast UI handles the rest. | | Dialogs & Forms | Building custom modals, wiring up submit handlers, handling validation errors. | Declare a dialogs config. Fields automatically validate and auto-submit. | | Component Count | Table.tsx, PageHeader.tsx, Wizard.tsx, Dialog.tsx. | One component: <SmartPage />. |

🚀 The 1-Minute Deep Dive

Let's build a functional Employee Directory complete with a Fiori-style header, a paginated data table, and a fully-wired "Onboard Employee" wizard—all without writing a single piece of state logic.

This example uses a static data source so you can copy/paste and test it immediately without a backend!

import { SmartPage, type SmartPageConfig } from "@create.nine/fast-ui";

// 1. Your local data (Replace with `endpoint: "/api/..."` when you have a backend!)
const employees = [
  { id: 1, name: "Alice Johnson", department: "Engineering", status: "Active" },
  { id: 2, name: "Bob Smith", department: "Design", status: "On Leave" },
  { id: 3, name: "Carol Williams", department: "Product", status: "Active" },
];

const config: SmartPageConfig = {
  header: {
    title: "Employees",
    subtitle: "Active personnel directory",
    metrics: [{ label: "Total Headcount", value: 142, trend: { direction: "up", value: "12%" } }]
  },
  sections: [
    {
      key: "directory",
      content: [
        {
          type: "table",
          table: {
            entity: [
              { key: "name", label: "Name", type: "text" },
              { key: "department", label: "Department", type: "text" },
              { key: "status", label: "Status", type: "text" },
            ],
            // 2. Data binding (Seamlessly swap static arrays for REST/OData APIs)
            dataSource: { static: employees },
            table: {
              display: { title: "Directory", showRecordCount: true },
              toolbar: [{ key: "new", label: "Onboard Employee", dialog: "onboardWizard" }],
            },
            
            // 3. Declarative Dialogs & Multi-step Wizards
            dialogs: {
              onboardWizard: {
                title: "Onboard New Employee",
                size: "large",
                content: {
                  type: "wizard",
                  wizard: {
                    submitLabel: "Complete Onboarding",
                    steps: [
                      {
                        key: "info",
                        title: "Basic Info",
                        sections: [{
                          columns: 2,
                          fields: [
                            { key: "firstName", label: "First Name", type: "text", required: true },
                            { key: "lastName", label: "Last Name", type: "text", required: true }
                          ]
                        }]
                      },
                      {
                        key: "review",
                        title: "Review",
                        sections: [{ fields: [] }] // Magic! Auto-generates a review summary of previous steps.
                      }
                    ],
                    onFinish: (values) => {
                      alert(`Onboarding Complete!\n\n${JSON.stringify(values, null, 2)}`);
                    }
                  }
                }
              }
            }
          }
        }
      ]
    }
  ]
};

export default function App() {
  return <SmartPage config={config} />;
}

🏗️ Core Architecture

Fast UI exposes three primary primitives. Because they share a unified configuration language, a DynamicForm definition looks exactly the same whether it is rendered inline on a page, inside a slide-out drawer, or as a step within a wizard.

• <SmartPage /> — The master composer. Generates Object Page headers, tabs, sections, and embedded tables.
• <SmartTable /> — The data engine. Powered by TanStack Table, featuring grouping, tree data, inline editing, card layouts, and deep OData integration.
• <SmartDialog /> — The overlay manager. Generates complex forms, value-help lookups, and multi-step wizards natively.

📚 Documentation & API Reference

Ready to explore OData bindings, custom cell renderers, and theming?

Read the comprehensive documentation at fast-ui.createnine.com.