Skip to content

interactive-demos.md

Latest commit

 

History

History
216 lines (146 loc) · 6.23 KB

interactive-demos.md

File metadata and controls

216 lines (146 loc) · 6.23 KB
Raw
title Interactive Component Demos
description Explore all ObjectUI components and plugins with live interactive examples

Interactive Component Demos

Explore ObjectUI's comprehensive component library with live interactive demos. Each demo features:

  • 👁️ Live Preview - See components in action
  • 💻 Source Code - View and copy JSON schemas
  • 📋 Copy Button - One-click code copying
  • 🎨 Multiple Examples - Various use cases

🧩 Components by Category

Form Components

Build powerful forms with our comprehensive form controls:

  • Input - Text input fields with validation
  • Select - Dropdown selection menus
  • Checkbox - Toggle selection boxes
  • Switch - Binary toggle switches
  • Textarea - Multi-line text input
  • Slider - Range selection sliders
  • Button - Action triggers with variants

Layout Components

Structure your UI with flexible layout containers:

  • Stack - Vertical/horizontal stacking
  • Grid - Responsive grid layouts
  • Card - Content containers
  • Tabs - Tabbed content sections
  • Separator - Visual dividers

Overlay Components

Create modal and overlay experiences:

Data Display Components

Present information beautifully:

  • Table - Tabular data display
  • List - Ordered/unordered lists
  • Avatar - User profile images
  • Badge - Status indicators
  • Alert - Notification messages

Feedback Components

Provide user feedback and status:

Disclosure Components

Progressive content disclosure:

Complex Components

Advanced composite components:

🔌 Plugin Demos

Extend ObjectUI with powerful plugins:

Plugin Markdown

Render GitHub Flavored Markdown with syntax highlighting:

  • ✅ Basic formatting (bold, italic, links)
  • ✅ Task lists with checkboxes
  • ✅ Tables and code blocks
  • ✅ XSS protection built-in

Interactive Examples: 3 live demos

Plugin Kanban

Drag-and-drop Kanban boards for project management:

  • ✅ Drag cards between columns
  • ✅ WIP limits per column
  • ✅ Card badges for status/priority
  • ✅ Keyboard navigation support

Interactive Examples: 2 live demos

Plugin Charts

Beautiful data visualizations powered by Recharts:

  • ✅ Bar, line, area, pie charts
  • ✅ Responsive design
  • ✅ Customizable colors
  • ✅ Multiple data series

Interactive Examples: 3 live demos

Plugin Editor

Monaco Editor integration for code editing:

  • ✅ 100+ programming languages
  • ✅ IntelliSense & autocomplete
  • ✅ Syntax highlighting
  • ✅ Find and replace

Interactive Examples: 3 live demos

Plugin Object

ObjectQL integration for CRUD operations:

  • ✅ Auto-generated tables
  • ✅ Smart forms with validation
  • ✅ Complete CRUD views
  • ✅ Schema-driven UI

Interactive Examples: 3 live demos

🚀 Quick Start

1. Browse Components

Click any component link above to see:

  • Live interactive preview
  • JSON schema code
  • Multiple usage examples

2. Copy Code

Each demo has a Code tab with:

  • Formatted JSON schema
  • Copy button for instant use
  • Syntax highlighting

3. Use in Your Project

import { SchemaRenderer } from '@object-ui/react';

const schema = {
  type: "input",
  label: "Email",
  placeholder: "user@example.com"
};

<SchemaRenderer schema={schema} />

💡 How Interactive Demos Work

Each component page uses our new InteractiveDemo component:

<InteractiveDemo
  schema={{
    type: "button",
    label: "Click me",
    variant: "default"
  }}
  title="Primary Button"
  description="Main action button"
/>

Features

  • Tab Switching - Toggle between Preview and Code views
  • Live Rendering - See components rendered in real-time
  • Copy Button - One-click code copying
  • Multi-Example - Show related variations together
  • Responsive - Works on all screen sizes

📚 Component Reference

For complete API documentation including all props, events, and advanced usage:

🎨 Design Resources

🔗 Next Steps

Have questions? Check out our Getting Started Guide or visit the GitHub Discussions.