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

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

From Command Line

code --install-extension objectui.object-ui

Manual Installation

Download the .vsix file from the releases page and install it. The file name carries the package name and the version you downloaded:

code --install-extension object-ui-<version>.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):

Object UI: Open Preview

Opens a live preview of your schema in the first editor column. Its sibling Object UI: Open Preview to the Side opens the same panel beside the editor instead.

Usage:

1. Open a .json or .objectui.json file
2. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
3. Type "Object UI: Open Preview"
4. Preview opens in a panel

Object UI: Validate Schema

Validates the current schema against ObjectUI schema definitions.

Usage:

1. Open a schema file
2. Run command
3. View validation errors in Problems panel

Object UI: Export to React Component

Converts the schema to a React component.

Usage:

1. Open a schema file
2. Run command
3. The generated component opens in a new untitled editor tab, with its language set to typescriptreact
4. VS Code shows React component generated! Save it to a .tsx file. — nothing is written to disk and nothing is put on your clipboard, so save that tab yourself

Output Example:

This is the file the command produces — your exported schema comes back verbatim as the schema constant, and both imports are part of the output. import '@object-ui/components' is load-bearing: importing the package is what registers the default renderers, so a file that drops it renders nothing. The constant is typed as SchemaRendererProps['schema'], the schema SchemaRenderer takes, so the compiler checks your schema where it is written: each node's type stays a literal and is checked against the node types the prop accepts, and a schema it does not accept is refused on that line.

// No React import: under the automatic JSX runtime ("jsx": "react-jsx",
// what a new Vite or Next project is configured with) nothing here reads that
// identifier, so it compiles as an unused local. Add the import back only if
// this file is built with the classic "jsx": "react" transform.
import { SchemaRenderer, type SchemaRendererProps } from '@object-ui/react';
// Importing the package registers every default renderer as a side effect —
// there is no separate registration call.
import '@object-ui/components';

// Typed as the schema SchemaRenderer takes, so each "type" below stays a literal
// and the compiler checks the schema against the node types it accepts.
const schema: SchemaRendererProps['schema'] = {
  "type": "div",
  "className": "p-4",
  "children": [
    {
      "type": "h1",
      "children": "Hello World"
    }
  ]
};

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

Object UI: Format Schema

Formats the schema JSON with consistent indentation and ordering.

Usage:

1. Open a schema file
2. Run command
3. Schema is auto-formatted

Object UI: Create New Schema

Creates a new schema file from a template.

Usage:

1. Run command
2. Select a template — Empty Schema, Simple Form, Dashboard, Card Layout or Data Table
3. 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 flags a value the extension knows to be out of range — an input's inputType or a button's variant outside its set — and suggests a label on input, textarea and select nodes:

{
  "type": "button",
  "label": "Save",
  "variant": "primary" // ⚠️ Invalid variant "primary". Must be one of: default, destructive, outline, secondary, ghost, link
}

It does not flag a key no schema declares. objectui validate does: it judges a document through the strict authoring face and refuses an undeclared key by name (see the CLI).

Snippets

Type oui- and press Tab to insert one of the templates the extension ships, defined in packages/vscode-extension/snippets/objectui.json:

oui-form, with its placeholders left at their defaults, inserts:

{
  "type": "div",
  "className": "max-w-2xl mx-auto p-6",
  "children": {
    "type": "card",
    "title": "Form Title",
    "children": {
      "type": "div",
      "className": "space-y-4",
      "children": [
        {
          "type": "input",
          "label": "Name",
          "placeholder": "Enter your name",
          "required": true
        },
        {
          "type": "button",
          "label": "Submit"
        }
      ]
    }
  }
}

Configuration

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

objectui.preview.port

Port for preview server (default: 3000)

{
  "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": 3000,
  "objectui.preview.autoRefresh": true,
  "objectui.validation.enabled": true,
  "objectui.completion.enabled": true,
  "files.associations": {
    "*.schema.json": "objectui-json",
    "ui.json": "objectui-json"
  }
}

Keyboard Shortcuts

The extension ships no default keyboard shortcuts. Its manifest has no contributes.keybindings block, so no command arrives bound to a chord — run them from the Command Palette or the context menus above, or bind the ones you use.

Bind a command yourself

Open the Keyboard Shortcuts editor (Ctrl+K Ctrl+S / Cmd+K Cmd+S), search for the command by its name, and assign a chord. To write the binding by hand instead, open keybindings.json from that editor and add an entry naming the command id:

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

The key above is a stand-in, not a proposal — a deliberately far-fetched chord that nothing binds, there to show the shape of an entry. Pick your own, and pick one you are not already using: an entry in your keybindings.json overrides VS Code's default for that chord, and the when clause only narrows where your entry applies (here, JSON editors) — it does not decide whether your entry wins. Binding ctrl+shift+p, for instance, would take the Command Palette away from you in JSON files, which is where your schemas are open and where this page keeps sending you for these commands.

Every command the extension contributes, with the id to bind:

Context Menus

Right-click a .objectui.json or .oui.json file to access — the entries are contributed for those two extensions only:

Editor Context Menu

• Object UI: Open Preview - Open live preview
• Object UI: Validate Schema - Run validation
• Object UI: Export to React Component - Convert to React component

Explorer Context Menu

• Object UI: Open Preview - Preview selected file

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

1. Create Schema - Use snippet or command
2. Edit Schema - IntelliSense helps with completion
3. Preview - Open live preview
4. Validate - Check for errors
5. Test - Interact with preview
6. Export - Convert to React

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
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

1. Check preview port is available:

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

2. Check firewall settings

3. Reload window (Ctrl+R)

Validation Not Working

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

IntelliSense Not Showing

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

Extension Not Loading

1. Check extension is enabled
2. Check for extension errors in Output panel
3. Reinstall extension

Updates

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

Manual Update

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

Check Version

1. Go to Extensions
2. Find ObjectUI extension
3. 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

Need Help?

• GitHub Issues
• Documentation
• VS Code Extension Documentation