Skip to content

quick-start.md

Latest commit

 

History

History
201 lines (159 loc) · 4.02 KB

quick-start.md

File metadata and controls

201 lines (159 loc) · 4.02 KB

Quick Start

Get up and running with Object UI in less than 5 minutes.

Installation

Install Object UI packages using your preferred package manager:

::: code-group

npm install @object-ui/react @object-ui/components
yarn add @object-ui/react @object-ui/components
pnpm add @object-ui/react @object-ui/components

:::

Your First Component

Create a simple form with Object UI:

import React from 'react'
import { SchemaRenderer } from '@object-ui/react'
import { registerDefaultRenderers } from '@object-ui/components'

// Register the default components
registerDefaultRenderers()

const schema = {
  type: "form",
  title: "Contact Form",
  body: [
    {
      type: "input",
      name: "name",
      label: "Your Name",
      required: true
    },
    {
      type: "input",
      name: "email",
      label: "Email",
      inputType: "email",
      required: true
    },
    {
      type: "textarea",
      name: "message",
      label: "Message",
      rows: 4
    }
  ],
  actions: [
    {
      type: "submit",
      label: "Send Message",
      level: "primary"
    }
  ]
}

function App() {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data)
  }

  return (
    <SchemaRenderer 
      schema={schema}
      onSubmit={handleSubmit}
    />
  )
}

export default App

That's it! You now have a fully functional, validated form with professional styling.

Add Data

Pass data to your components using the data prop:

const data = {
  user: {
    name: 'John Doe',
    email: 'john@example.com'
  }
}

<SchemaRenderer 
  schema={schema}
  data={data}
/>

Reference data in your schema using expressions:

{
  "type": "text",
  "value": "${user.name}"
}

Conditional Rendering

Show/hide components based on conditions:

{
  "type": "alert",
  "message": "Welcome, Admin!",
  "visibleOn": "${user.role === 'admin'}"
}

API Integration

Connect to your backend API:

const schema = {
  type: "crud",
  api: {
    list: "/api/users",
    create: "/api/users",
    update: "/api/users/${id}",
    delete: "/api/users/${id}"
  },
  columns: [
    { name: "name", label: "Name" },
    { name: "email", label: "Email" },
    { name: "role", label: "Role" }
  ]
}

Object UI automatically handles:

  • Data fetching and caching
  • Pagination
  • Sorting and filtering
  • CRUD operations
  • Loading and error states

Styling

Customize styles using Tailwind classes:

{
  "type": "card",
  "className": "p-6 shadow-lg rounded-xl bg-gradient-to-r from-blue-500 to-purple-500",
  "body": {
    "type": "text",
    "value": "Beautiful Card",
    "className": "text-white text-2xl font-bold"
  }
}

Next Steps

Now that you have the basics:

Examples

Check out our JSON-based examples that you can run immediately:

Run any example with the CLI:

npm install -g @object-ui/cli
objectui serve examples/basic-form/app.json

Need Help?