Plugin Gallery

ObjectUI plugins are lazy-loaded component packages that extend the framework with additional functionality. They load on-demand, keeping your main application bundle small while providing rich features.

Quick Navigation

Browse available plugins:

Data Visualization & Dashboards

• Charts Plugin - Bar, Line, Area, and Pie charts
• Dashboard Plugin - Dashboard layouts with metric cards and widgets
• Timeline Plugin - Vertical, horizontal, and Gantt-style timelines
• Gantt Plugin - Project task visualization with dependencies (ObjectQL)
• Calendar View Plugin - Full calendar with month/week/day views
• Calendar Plugin - Calendar for ObjectQL data sources
• Map Plugin - Location visualization with markers (ObjectQL)

Data Management

• Grid Plugin - Advanced data grid with sorting, filtering, and pagination
• AgGrid Plugin - Enterprise data grid powered by AG Grid
• Form Plugin - Advanced form builder with validation
• View Plugin - ObjectQL-integrated views (grid, form, detail)

Content & Editing

• Editor Plugin - Code editor powered by Monaco Editor
• Markdown Plugin - Markdown renderer with GFM support
• Chatbot Plugin - Chat interface component

Workflows & Tasks

• Kanban Plugin - Kanban board with drag-and-drop

Official Plugins

Charts Plugin

@object-ui/plugin-charts - Data visualization components powered by Recharts.

• Bar, line, area, and pie charts
• Responsive design
• Customizable colors and themes
• Lazy-loaded (~540 KB)

npm install @object-ui/plugin-charts

Read full documentation →

Editor Plugin

@object-ui/plugin-editor - Code editor component powered by Monaco Editor (VS Code's editor).

• Syntax highlighting for 100+ languages
• IntelliSense and code completion
• Multiple themes (VS Dark, Light, etc.)
• Lazy-loaded (~20 KB)

npm install @object-ui/plugin-editor

Read full documentation →

Kanban Plugin

@object-ui/plugin-kanban - Kanban board component with drag-and-drop powered by @dnd-kit.

• Drag and drop cards between columns
• Column limits (WIP limits)
• Card badges for status/priority
• Lazy-loaded (~100-150 KB)

npm install @object-ui/plugin-kanban

Read full documentation →

Markdown Plugin

@object-ui/plugin-markdown - Markdown renderer with GitHub Flavored Markdown support.

• GitHub Flavored Markdown
• XSS protection
• Code syntax highlighting
• Lazy-loaded (~100-200 KB)

npm install @object-ui/plugin-markdown

Read full documentation →

AgGrid Plugin

@object-ui/plugin-aggrid - Advanced data grid powered by AG Grid Community Edition.

• Sorting, filtering, and pagination
• Row selection and editing
• Multiple themes
• Lazy-loaded

npm install @object-ui/plugin-aggrid ag-grid-community ag-grid-react

Read full documentation →

Timeline Plugin

@object-ui/plugin-timeline - Timeline component with multiple layout variants.

• Vertical, horizontal, and Gantt-style layouts
• Customizable markers with icons
• Date formatting options
• Time scales (day/week/month)

npm install @object-ui/plugin-timeline

Read full documentation →

Chatbot Plugin

@object-ui/plugin-chatbot - Chat interface component with message history.

• User and assistant message roles
• System messages
• Timestamps and avatars
• Auto-scroll and typing indicators

npm install @object-ui/plugin-chatbot

Read full documentation →

Calendar View Plugin

@object-ui/plugin-calendar-view - Full-featured calendar with month, week, and day views.

• Month, week, and day calendar views
• Event display with colors
• Navigation controls
• All-day and timed events

npm install @object-ui/plugin-calendar-view

Read full documentation →

Calendar Plugin (ObjectQL)

@object-ui/plugin-calendar - Calendar visualization for ObjectQL data sources.

• ObjectQL integration
• Automatic field mapping
• Database-driven events
• Works with object/api/value providers

npm install @object-ui/plugin-calendar

Read full documentation →

Gantt Plugin (ObjectQL)

@object-ui/plugin-gantt - Gantt chart for ObjectQL data sources.

• Project task visualization
• Progress tracking (0-100%)
• Task dependencies
• ObjectQL integration

npm install @object-ui/plugin-gantt

Read full documentation →

Map Plugin (ObjectQL)

@object-ui/plugin-map - Map visualization for ObjectQL data sources.

• Location-based markers
• Latitude/longitude support
• Marker customization
• ObjectQL integration

npm install @object-ui/plugin-map

Read full documentation →

Dashboard Plugin

@object-ui/plugin-dashboard - Dashboard layouts with metric cards and widgets.

• Dashboard grid layouts
• Metric/KPI cards with trends
• Widget system
• Responsive design

npm install @object-ui/plugin-dashboard

Read full documentation →

Grid Plugin

@object-ui/plugin-grid - Advanced data grid with sorting, filtering, and pagination.

• Column sorting and filtering
• Pagination controls
• Row selection
• Custom cell renderers

npm install @object-ui/plugin-grid

Read full documentation →

Form Plugin

@object-ui/plugin-form - Advanced form builder with validation.

• Multi-step forms
• Field validation
• Custom field types
• Form state management

npm install @object-ui/plugin-form

Read full documentation →

View Plugin

@object-ui/plugin-view - ObjectQL-integrated views for automatic CRUD operations.

• Auto-generated forms and grids
• CRUD operations
• ObjectQL integration
• Field mapping

npm install @object-ui/plugin-view

Read full documentation →

How Plugins Work

Lazy Loading Architecture

Plugins use React's lazy() and Suspense to load heavy dependencies on-demand:

// The plugin structure
import React, { Suspense } from 'react'
import { Skeleton } from '@object-ui/components'

// Lazy load the heavy implementation
const LazyEditor = React.lazy(() => import('./MonacoImpl'))

export const CodeEditorRenderer = (props) => (
  <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
    <LazyEditor {...props} />
  </Suspense>
)

Benefits:

• Smaller initial bundle: Main app loads faster
• Progressive loading: Components load when needed
• Better UX: Loading skeletons while chunks download
• Automatic code splitting: Vite handles chunking

Bundle Impact

Without lazy loading, all this code would be in your main bundle!

Auto-Registration

Plugins automatically register their components when imported:

// In the plugin's index.tsx
import { ComponentRegistry } from '@object-ui/core'

ComponentRegistry.register('code-editor', CodeEditorRenderer)

You just need to import the plugin once:

// In your App.tsx or main.tsx
import '@object-ui/plugin-editor'
import '@object-ui/plugin-charts'
import '@object-ui/plugin-kanban'
import '@object-ui/plugin-markdown'

Now all plugin components are available in your schemas!

Usage Pattern

All ObjectUI plugins follow the same usage pattern:

{
  "type": "plugin-component-name",
  "className": "tailwind-classes",
  "props": {
    // Plugin-specific properties
  }
}

Example: Code Editor

{
  "type": "code-editor",
  "language": "typescript",
  "value": "const greeting = 'Hello World';",
  "className": "h-96",
  "theme": "vs-dark"
}

Example: Bar Chart

{
  "type": "bar-chart",
  "data": [
    { "name": "Jan", "value": 400 },
    { "name": "Feb", "value": 300 },
    { "name": "Mar", "value": 600 }
  ],
  "dataKey": "value",
  "xAxisKey": "name",
  "height": 300,
  "color": "#8884d8"
}

Features

All ObjectUI plugins share these characteristics:

• ✅ Lazy Loaded - Load on-demand, not upfront
• ✅ Auto-Register - Import once, use everywhere
• ✅ Type-Safe - Full TypeScript support
• ✅ Schema-Driven - Define with JSON, not code
• ✅ Tailwind CSS - Use utility classes directly
• ✅ Loading States - Built-in skeletons while loading
• ✅ Small Footprint - Minimal initial bundle impact

Next Steps

• Plugin Concepts - Learn how plugins work in detail
• Quick Start Guide - Build your first ObjectUI app
• Component Gallery - Explore core components
• Schema Rendering - Learn how the engine works

Need Help?

Can't find what you're looking for? Check out:

• Concepts - Core concepts and architecture
• Advanced - API documentation and protocol specs
• GitHub - Report issues or contribute