Schema-Aware Monaco Editor for React

import { useState } from "react";
import { SchemaEditor } from "@powerduck/schema-editor/react";

function App() {
  const [value, setValue] = useState('{"name": ""}');

  return (
    <SchemaEditor
      value={value}
      onChange={setValue}
      language="json"
      theme="dark"
    />
  );
}

const petSchema = {
  type: "object",
  required: ["name", "status"],
  properties: {
    name: { type: "string", description: "Pet name" },
    status: {
      type: "string",
      enum: ["available", "pending", "sold"],
    },
  },
};

<SchemaEditor
  value={value}
  onChange={setValue}
  language="json"
  schema={petSchema}
  theme="dark"
/>

// Same schema, YAML mode
<SchemaEditor
  value={yamlValue}
  onChange={setYamlValue}
  language="yaml"
  schema={jsonSchema}
  theme="light"
  placeholder="# Enter your OpenAPI spec here"
/>

function ConfigEditor() {
  const [value, setValue] = useState("");
  const [errors, setErrors] = useState([]);

  return (
    <SchemaEditor
      value={value}
      onChange={setValue}
      language="json"
      schema={configSchema}
      theme={isDark ? "dark" : "light"}
      showDiagnostics={true}
      onDiagnostics={setErrors}
      enableCompletion={true}
      enableInlineSuggestions={true}
      diagnosticsDebounceMs={250}
    />
  );
}