ObjectUI VS Code Extension

The ObjectUI VS Code extension provides a comprehensive development environment for creating and editing ObjectUI schemas. It includes schema preview, validation, IntelliSense, syntax highlighting, and powerful productivity features.

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "ObjectUI"
Click Install

From Command Line

code --install-extension objectui.object-ui

Manual Installation

Download the .vsix file from the releases page and install:

code --install-extension objectui-0.3.1.vsix

Features

🔍 Schema Preview - Live preview of your UI schemas
✅ JSON Validation - Real-time schema validation
💡 IntelliSense - Auto-completion for schema properties
🎨 Syntax Highlighting - Enhanced JSON highlighting for ObjectUI
📝 Snippets - Quick schema templates
🔧 Commands - Useful schema manipulation commands
🚀 Export to React - Convert schemas to React components
📋 Format Schema - Auto-format your schema files

Commands

Access commands via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

`ObjectUI: Preview Schema`

Opens a live preview of your schema in a side panel.

Usage:

Open a .json or .objectui.json file
Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
Type "ObjectUI: Preview Schema"
Preview opens in side panel

Keyboard Shortcut: Ctrl+Alt+P (Windows/Linux) or Cmd+Alt+P (Mac)

`ObjectUI: Validate Schema`

Validates the current schema against ObjectUI schema definitions.

Usage:

Open a schema file
Run command
View validation errors in Problems panel

Keyboard Shortcut: Ctrl+Alt+V (Windows/Linux) or Cmd+Alt+V (Mac)

`ObjectUI: Export to React`

Converts the schema to a React component.

Usage:

Open a schema file
Run command
React component code is copied to clipboard

Output Example:

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

const schema = {
  "type": "div",
  "className": "p-4",
  "children": [
    { "type": "heading", "level": 1, "children": "Hello World" }
  ]
}

export default function MyComponent() {
  return <SchemaRenderer schema={schema} />
}

`ObjectUI: Format Schema`

Formats the schema JSON with consistent indentation and ordering.

Usage:

Open a schema file
Run command
Schema is auto-formatted

Keyboard Shortcut: Ctrl+Alt+F (Windows/Linux) or Cmd+Alt+F (Mac)

`ObjectUI: Create New Schema`

Creates a new schema file from a template.

Usage:

Run command
Select template (Dashboard, Form, Grid, etc.)
New file is created with template content

Language Support

File Associations

The extension recognizes these file patterns:

*.objectui.json - ObjectUI schema files
schema.json - Schema files in specific directories
Any .json file with "type": "app" or component types

Syntax Highlighting

Enhanced JSON highlighting for ObjectUI-specific properties:

Component Types - Highlighted in blue
Actions - Highlighted in green
Data Sources - Highlighted in purple
Expressions - Highlighted in orange

IntelliSense

Auto-completion

Type-ahead suggestions for:

Component types (div, button, form, data-table, etc.)
Schema properties (className, dataSource, children, etc.)
Action types (navigate, submit, ajax, etc.)
Data source types (api, objectstack, value, etc.)

Example:

Type "type": " and get suggestions:

button
card
data-table
form
grid
And 100+ more...

Hover Information

Hover over properties to see:

Property description
Expected type
Example values
Link to documentation

Validation

Real-time validation with error messages:

{
  "type": "button",
  "invalidProp": true  // ❌ Error: Unknown property
}

Snippets

Type these prefixes and press Tab to insert templates:

`objectui-button`

{
  "type": "button",
  "variant": "default",
  "children": "Click me"
}

`objectui-form`

{
  "type": "form",
  "fields": [
    {
      "name": "fieldName",
      "type": "text",
      "label": "Label",
      "required": true
    }
  ],
  "onSubmit": {
    "type": "ajax",
    "url": "/api/endpoint",
    "method": "POST"
  }
}

`objectui-grid`

{
  "type": "data-table",
  "dataSource": {
    "type": "api",
    "url": "/api/data"
  },
  "columns": [
    {
      "key": "id",
      "title": "ID"
    }
  ]
}

`objectui-app`

{
  "type": "app",
  "title": "My App",
  "pages": [
    {
      "path": "/",
      "title": "Home",
      "component": {
        "type": "div",
        "children": []
      }
    }
  ]
}

`objectui-chart`

{
  "type": "bar-chart",
  "data": [
    { "name": "A", "value": 100 }
  ],
  "dataKey": "value",
  "xAxisKey": "name",
  "height": 300
}

Configuration

Configure the extension via Settings (Ctrl+, / Cmd+,):

`objectui.preview.port`

Port for preview server (default: 5173)

{
  "objectui.preview.port": 3000
}

`objectui.preview.autoRefresh`

Auto-refresh preview on save (default: true)

{
  "objectui.preview.autoRefresh": true
}

`objectui.validation.enabled`

Enable real-time validation (default: true)

{
  "objectui.validation.enabled": true
}

`objectui.validation.severity`

Validation severity level (default: error)

Options: error, warning, info

{
  "objectui.validation.severity": "warning"
}

`objectui.completion.enabled`

Enable auto-completion (default: true)

{
  "objectui.completion.enabled": true
}

`objectui.snippets.enabled`

Enable code snippets (default: true)

{
  "objectui.snippets.enabled": true
}

Workspace Settings

Create .vscode/settings.json in your project:

{
  "objectui.preview.port": 5173,
  "objectui.preview.autoRefresh": true,
  "objectui.validation.enabled": true,
  "objectui.completion.enabled": true,
  "files.associations": {
    "*.schema.json": "objectui-json",
    "ui.json": "objectui-json"
  }
}

Keyboard Shortcuts

Default keyboard shortcuts:

Command	Windows/Linux	Mac
Preview Schema	`Ctrl+Alt+P`	`Cmd+Alt+P`
Validate Schema	`Ctrl+Alt+V`	`Cmd+Alt+V`
Format Schema	`Ctrl+Alt+F`	`Cmd+Alt+F`
Export to React	`Ctrl+Alt+E`	`Cmd+Alt+E`

Custom Shortcuts

Customize via Keyboard Shortcuts editor (Ctrl+K Ctrl+S):

{
  "key": "ctrl+shift+p",
  "command": "objectui.preview",
  "when": "editorLangId == json"
}

Context Menus

Right-click on a schema file to access:

Preview Schema - Open live preview
Validate Schema - Run validation
Export to React - Convert to React component
Format Schema - Auto-format

Preview Schema - Preview selected file
Create Schema - Create new schema in folder

Preview Features

The preview panel includes:

Live Rendering - See changes immediately
Interactive UI - Test interactions
Device Toggle - Mobile/tablet/desktop views
Dark Mode Toggle - Test light/dark themes
Refresh Button - Manual refresh
Console - View errors and logs

Development Workflow

Typical Workflow

Create Schema - Use snippet or command
Edit Schema - IntelliSense helps with completion
Preview - Open live preview (Ctrl+Alt+P)
Validate - Check for errors (Ctrl+Alt+V)
Test - Interact with preview
Export - Convert to React (Ctrl+Alt+E)

Tips

Split Editor - Keep schema and preview side-by-side
Auto Save - Enable auto-save for instant preview updates
Multi-root Workspace - Work on multiple schema projects
Git Integration - Track schema changes

Package Information

Extension ID: objectui.object-ui
Version: 0.3.1
License: MIT

Extension Dependencies

The extension bundles:

JSON Language Server - For validation and IntelliSense
Schema Definitions - ObjectUI type definitions
Preview Server - Built-in Vite server

Troubleshooting

Preview Not Working

Check preview port is available:

# Change port in settings
"objectui.preview.port": 5174

Check firewall settings
Reload window (Ctrl+R)

Validation Not Working

Check file is recognized as ObjectUI schema
Verify objectui.validation.enabled is true
Reload window

IntelliSense Not Showing

Verify objectui.completion.enabled is true
Check file language mode is JSON
Reload window

Extension Not Loading

Check extension is enabled
Check for extension errors in Output panel
Reinstall extension

Updates

The extension auto-updates via VS Code's extension manager.

Manual Update

code --install-extension objectui.object-ui --force

Check Version

Go to Extensions
Find ObjectUI extension
Check version number

Contributing

The extension is open source. Contribute on GitHub:

Repository: objectstack-ai/objectui
Issues: Report bugs or request features
Pull Requests: Contribute code

Next Steps

Schema Overview - Learn the schema format
CLI - Use CLI for development
Plugins - Explore available plugins
Examples - See example schemas

VS Code Extension

On this page