@expeed/ngx-schema-editor

@expeed/ngx-schema-editor

A visual JSON Schema editor component for Angular applications. Create and edit JSON Schema definitions with a drag-and-drop interface.

Features

• Visual schema builder with drag-and-drop field reordering
• Support for all JSON Schema types: string, number, integer, boolean, object, array
• Nested object and array structures
• Field validators (minLength, maxLength, pattern, minimum, maximum, format)
• Enum values with optional display labels
• Display type hints (x-display-type) for form rendering
• Required field toggle
• Indent/outdent to restructure hierarchy
• Toggle between visual editor and raw JSON view
• Outputs valid JSON Schema (draft 2020-12)

Installation

npm install @expeed/ngx-schema-editor

Peer Dependencies

npm install @angular/cdk @angular/material

Usage

Basic Usage

import { Component } from '@angular/core';
import { SchemaEditorComponent, JsonSchema } from '@expeed/ngx-schema-editor';

@Component({
  selector: 'app-schema-page',
  standalone: true,
  imports: [SchemaEditorComponent],
  template: `
    <schema-editor
      [schema]="schema"
      (schemaChange)="onSchemaChange($event)"
    />
  `
})
export class SchemaPageComponent {
  schema: JsonSchema = {
    type: 'object',
    title: 'Customer',
    properties: {}
  };

  onSchemaChange(updated: JsonSchema): void {
    console.log('Schema updated:', updated);
    this.schema = updated;
  }
}

With Initial Schema

schema: JsonSchema = {
  type: 'object',
  title: 'Customer',
  properties: {
    firstName: {
      type: 'string',
      title: 'First Name',
      minLength: 1,
      maxLength: 50
    },
    email: {
      type: 'string',
      title: 'Email',
      format: 'email'  // Form renderer auto-infers email input type
    },
    age: {
      type: 'integer',
      title: 'Age',
      minimum: 0,
      maximum: 150
    },
    status: {
      type: 'string',
      title: 'Status',
      oneOf: [
        { const: 'active', title: 'Active' },
        { const: 'inactive', title: 'Inactive' }
      ],
      'x-display-type': 'dropdown'
    }
  },
  required: ['firstName', 'email']
};

API Reference

SchemaEditorComponent

Inputs

Input	Type	Default	Description
schema	JsonSchema	{}	The JSON Schema to edit

Outputs

Output	Type	Description
schemaChange	EventEmitter<JsonSchema>	Emits when schema changes

JsonSchema Interface

interface JsonSchema {
  type?: string;
  title?: string;
  description?: string;
  properties?: Record<string, JsonSchema>;
  items?: JsonSchema;
  required?: string[];
  enum?: unknown[];
  oneOf?: Array<{ const: unknown; title?: string }>;
  minimum?: number;
  maximum?: number;
  minLength?: number;
  maxLength?: number;
  pattern?: string;
  format?: string;
  default?: unknown;
  'x-display-type'?: string;
}

Supported Field Types

Type	Description
string	Text values
number	Decimal numbers
integer	Whole numbers
boolean	True/false values
object	Nested object with properties
array	Array of items

Display Types (x-display-type)

The editor supports the x-display-type extension property to hint how fields should be rendered in forms:

Display Type	Field Type	Description
textbox	String	Single-line text input
textarea	String	Multi-line text input
richtext	String	Rich text editor (HTML)
dropdown	String (enum)	Select dropdown
datepicker	Date	Date picker
datetimepicker	Date	Date and time picker
timepicker	Time	Time picker
stepper	Number	Number stepper with +/- buttons
checkbox	Boolean	Checkbox
toggle	Boolean	Toggle switch

Note: Email and URL fields use format (email, uri) in JSON Schema. The form renderer auto-infers the appropriate input type from the format.

Validators

Configure field validation constraints:

Validator	Applies To	Description
minLength	string	Minimum character length
maxLength	string	Maximum character length
pattern	string	Regex pattern
format	string	Built-in format (email, uri, date, etc.)
minimum	number/integer	Minimum value
maximum	number/integer	Maximum value

Enum Values

Define allowed values with optional display labels:

// Simple enum
{
  type: 'string',
  enum: ['small', 'medium', 'large']
}

// Enum with labels (using oneOf)
{
  type: 'string',
  oneOf: [
    { const: 'sm', title: 'Small' },
    { const: 'md', title: 'Medium' },
    { const: 'lg', title: 'Large' }
  ]
}

Styling

The component uses Angular Material and can be themed using CSS custom properties:

schema-editor {
  --se-bg: #ffffff;
  --se-border: #e2e8f0;
  --se-text-primary: #1e293b;
  --se-text-secondary: #64748b;
  --se-accent: #6366f1;
}

Exports

// Components
export { SchemaEditorComponent } from './lib/components/schema-editor/schema-editor.component';

// Types
export { JsonSchema } from './lib/models/json-schema.model';
export { LabeledValue } from './lib/models/labeled-value.model';

// Utilities
export { isLabeledValue, getRawValue, getDisplayText } from './lib/utils/allowed-value.utils';

Known Limitations

• Array allowed values: Currently, allowed values (enum) cannot be set for array items via the UI. To create a multiselect field (array with enum options), you need to manually edit the JSON schema to add items.enum. This is planned for a future release.

Requirements

• Angular 19+
• Angular Material 19+
• Angular CDK 19+

License

Apache 2.0