Implementation:ArroyoSystems Arroyo Schema Editor

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, Connections, CodeEditor
Last Updated	2026-02-08 08:00 GMT

Overview

A Monaco-based schema editor for defining Avro, JSON, or Protobuf schemas during connection creation, with format-specific options and backend validation.

Description

SchemaEditor embeds a Monaco Editor instance for authoring schema definitions in the appropriate language (JSON for Avro/JSON, protobuf syntax for Protobuf). Key features:

• Format-specific options:
  • Avro -- "Raw datum encoding" checkbox for streams of individual Avro datums.
  • Protobuf -- "Length delimited" checkbox and "Message name" text input for specifying the protobuf message type.
• Validation -- "Validate" button calls POST /v1/connection_tables/schemas/test with the current schema state. Shows success/error alerts.
• Next button -- Enabled only after successful validation (tracked by comparing the validated text to the current editor text). Calls the next() callback to advance.
• State management -- Updates the parent CreateConnectionState.schema on every content change with format type and definition.

Usage

Rendered within DefineSchema when the user selects a schema type that requires manual schema definition (Avro, JSON, or Protobuf with explicit schema).

Code Reference

Source Location

• Repository: ArroyoSystems_Arroyo
• File: webui/src/routes/connections/SchemaEditor.tsx

Signature

export function SchemaEditor(props: {
  state: CreateConnectionState;
  setState: Dispatch<CreateConnectionState>;
  next: () => void;
  format: 'avro' | 'json' | 'protobuf';
}): JSX.Element;

Import

import { SchemaEditor } from './SchemaEditor';

I/O Contract

Inputs

Name	Type	Required	Description
state	CreateConnectionState	Yes	Current wizard state including schema
setState	Dispatch<CreateConnectionState>	Yes	Callback to update schema in wizard state
next	() => void	Yes	Callback to advance to next step after validation
format	'avro' or 'json' or 'protobuf'	Yes	Schema format type determining editor language and options

Outputs

Name	Type	Description
Side effect	CreateConnectionState mutation	Updates state.schema with definition and format metadata
API call	Side effect	POST /v1/connection_tables/schemas/test for validation

Usage Examples

<SchemaEditor state={state} setState={setState} next={next} format="json" />

Related Pages

• Environment:ArroyoSystems_Arroyo_Webui_Runtime
• ArroyoSystems_Arroyo_Define_Schema_Page