Plugin Editor

Code editor component powered by Monaco Editor (VS Code's editor).

Installation

npm install @object-ui/plugin-editor

Example schemas

Javascript Editor

{
  "type": "code-editor",
  "value": "function greet(name) {\n  console.log('Hello, ' + name + '!');\n  return 'Welcome, ' + name;\n}\n\ngreet('Developer');",
  "language": "javascript",
  "theme": "vs-dark",
  "height": "300px"
}

Python Editor

{
  "type": "code-editor",
  "value": "def calculate_fibonacci(n):\n    if n <= 1:\n        return n\n    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)\n\n# Calculate first 10 Fibonacci numbers\nfor i in range(10):\n    print(f'F({i}) = {calculate_fibonacci(i)}')",
  "language": "python",
  "theme": "vs-dark",
  "height": "300px"
}

Read Only Json Viewer

{
  "type": "code-editor",
  "value": "{\n  \"name\": \"objectui-demo\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Interactive demo\",\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"@object-ui/core\": \"latest\",\n    \"@object-ui/react\": \"latest\"\n  }\n}",
  "language": "json",
  "theme": "vs-dark",
  "height": "300px",
  "readOnly": true
}

Usage

Basic Usage

// Import once in your app entry point
import '@object-ui/plugin-editor'
import type { CodeEditorSchema } from '@object-ui/plugin-editor'

// Use in schemas
const schema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'console.log("Hello, World!");',
  language: 'javascript',
  theme: 'vs-dark',
  height: '400px'
}

Features

Syntax highlighting for 100+ languages
IntelliSense and code completion
Find and replace
Multiple themes
Lazy-loaded (~20 KB initial, Monaco loads on-demand)

Schema API

{
  type: 'code-editor',
  value?: string,              // Code content
  language?: string,           // Programming language
  theme?: 'vs-dark' | 'light', // Editor theme
  height?: string,             // Height (e.g., '400px')
  readOnly?: boolean,          // Read-only mode
  className?: string           // Tailwind classes
}

Declared by @object-ui/plugin-editor (packages/plugin-editor/src/types.ts). It extends BaseSchema, so the shared component properties are available on a code-editor node as well as the ones below.

Property	Type	Default	Description
`value`	string	`''`	The code content to display
`language`	string	`'javascript'`	Programming language for syntax highlighting
`theme`	`'vs-dark'` \| `'light'`	`'vs-dark'`	Editor theme
`height`	string	`'400px'`	Height of the editor
`readOnly`	boolean	`false`	Whether the editor is read-only
`className`	string	`''`	Additional Tailwind CSS classes

Supported Languages

The Monaco Editor supports 100+ programming languages including:

JavaScript / TypeScript
Python
Java / C# / C++
HTML / CSS / SCSS
JSON / YAML / XML
Markdown
SQL
Shell / Bash
And many more...

Examples

JavaScript Editor

import type { CodeEditorSchema } from '@object-ui/plugin-editor'

const schema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'function hello() {\n  console.log("Hello!");\n}',
  language: 'javascript',
  theme: 'vs-dark',
  height: '300px'
}

Read-only Code Display

import type { CodeEditorSchema } from '@object-ui/plugin-editor'

const schema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'const API_KEY = "secret";\n// Do not modify',
  language: 'typescript',
  readOnly: true,
  theme: 'light'
}

Python Editor

import type { CodeEditorSchema } from '@object-ui/plugin-editor'

const schema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'def hello():\n    print("Hello, World!")',
  language: 'python',
  height: '400px'
}

Bundle Size

The plugin uses lazy loading to optimize bundle size:

Initial load: ~0.2 KB (entry point)
Lazy chunk: ~20 KB (loaded when editor is rendered)
Monaco Editor: Loaded on-demand from CDN

This keeps your main application bundle small while providing full IDE-like editing capabilities.

TypeScript Support

import type { CodeEditorSchema } from '@object-ui/plugin-editor'

const editorSchema: CodeEditorSchema = {
  type: 'code-editor',
  value: 'console.log("TypeScript!");',
  language: 'typescript',
  theme: 'vs-dark'
}

Plugin Editor

On this page