cedar-monaco-editor

React components for editing Cedar policies, schemas, and context using Monaco Editor.

Features

• CedarPolicyEditor — Edit Cedar policies with syntax highlighting, schema-aware validation, and diagnostics
• CedarSchemaEditor — Edit Cedar schemas with syntax highlighting and validation
• CedarJsonEditor — Edit Cedar entities and authorization context as JSON with Cedar-aware validation
• useCedar hook — Programmatic access to Cedar WASM for validation, formatting, and parsing
• Language registration — Cedar and Cedar schema monarch tokenizers for Monaco
• Web Worker architecture — Validation runs off the main thread via LSP-based workers

Installation

npm install cedar-monaco-editor monaco-editor @monaco-editor/react @cedar-policy/cedar-wasm

The following are required as peer dependencies:

• react and react-dom (^18.2.0)
• monaco-editor (^0.52.0)
• @monaco-editor/react (^4.6.0)
• @cedar-policy/cedar-wasm (^4.9.0)

The Cedar WASM module is not bundled into this package so that it can be deduplicated by your bundler and so the package ships a CommonJS build. See Bundler Configuration for the required WASM loader setup.

Module Formats

This package ships both ESM (.js) and CommonJS (.cjs) builds, resolved automatically via the exports map:

• import { CedarPolicyEditor } from 'cedar-monaco-editor' — ESM
• const { CedarPolicyEditor } = require('cedar-monaco-editor') — CommonJS

Note: @cedar-policy/cedar-wasm itself is ESM-only and uses top-level await. The useCedar hook loads it via dynamic import(), which works in both ESM and CommonJS consumer code at runtime, but your bundler must support WebAssembly and top-level await (see below).

Quick Start

import { CedarPolicyEditor } from 'cedar-monaco-editor';

function App() {
  const [policy, setPolicy] = useState(`permit(
  principal,
  action == Action::"ReadDocument",
  resource
);`);

  return (
    <CedarPolicyEditor
      value={policy}
      onChange={setPolicy}
      height="400px"
    />
  );
}

API Reference

CedarPolicyEditor

Editor for Cedar policy language with LSP-based validation.

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | Policy source text (required) | | onChange | (value: string) => void | — | Called when the editor content changes | | schema | string | — | Cedar schema text for schema-aware validation | | onValidate | (diagnostics: CedarEditorDiagnostic[]) => void | — | Called with diagnostics after validation | | allowTemplates | boolean | false | Allow ?principal / ?resource template slots | | allowMultiplePolicies | boolean | false | Allow multiple policy statements | | theme | string | 'vs' | Monaco theme name | | height | string \| number | '400px' | Editor height | | options | Record<string, unknown> | — | Additional Monaco editor options |

CedarSchemaEditor

Editor for Cedar schema language with LSP-based validation.

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | Schema source text (required) | | onChange | (value: string) => void | — | Called when the editor content changes | | onValidate | (diagnostics: CedarEditorDiagnostic[]) => void | — | Called with diagnostics after validation | | theme | string | 'vs' | Monaco theme name | | height | string \| number | '400px' | Editor height | | options | Record<string, unknown> | — | Additional Monaco editor options |

CedarJsonEditor

JSON editor with Cedar-aware validation for entities and context.

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | — | JSON source text (required) | | onChange | (value: string) => void | — | Called when the editor content changes | | mode | 'json' \| 'schema' \| 'entities' \| 'context' | — | Validation mode (required) | | schema | string | — | Cedar schema text for schema-aware validation | | action | { type: string; id: string } | — | Action entity for context validation | | onValidate | (diagnostics: CedarEditorDiagnostic[]) => void | — | Called with diagnostics after validation | | theme | string | 'vs' | Monaco theme name | | height | string \| number | '400px' | Editor height | | options | Record<string, unknown> | — | Additional Monaco editor options |

useCedar

Hook providing direct access to Cedar WASM operations.

const { validate, format, parse, cedarVersion, isReady } = useCedar();

| Return | Type | Description | |--------|------|-------------| | isReady | boolean | true once the WASM module has loaded | | cedarVersion | string | Version string of the loaded Cedar WASM | | validate | (policy: string, schema?: string) => { success: boolean; errors: string[] } | Validate a policy, optionally against a schema | | format | (policy: string) => { success: boolean; formatted: string } | Format a Cedar policy | | parse | (policy: string) => { success: boolean; errors: string[] } | Parse a policy and check for syntax errors |

CedarEditorDiagnostic

interface CedarEditorDiagnostic {
  message: string;
  severity: 'error' | 'warning' | 'info';
  startLineNumber: number;
  startColumn: number;
  endLineNumber: number;
  endColumn: number;
}

registerCedarLanguages

import { registerCedarLanguages } from 'cedar-monaco-editor';

// Register Cedar and Cedar schema languages with a Monaco instance
registerCedarLanguages(monaco);

Bundler Configuration

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
  optimizeDeps: {
    include: ['monaco-editor'],
  },
});

Webpack 5

// webpack.config.js
module.exports = {
  experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'webassembly/async',
      },
    ],
  },
};

Example

A full working example is in examples/basic. To run it:

cd examples/basic
npm install
npm run dev

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run npm run build and npm test to verify
5. Submit a pull request

License

Apache-2.0