Data Display

SchemaView

Read-only view of a JSON Schema: one line per field with a label, a red dot when required, a monospace type and a description, nested objects indented, and a disclosure for the raw document.

import { SchemaView } from '@lostgradient/cinder';
schemajson-schemaread-onlydata-display
01

Overview

Reference usage

A read-only view of a JSON Schema. It shows one line per field: the field's label, a red dot when the field is required, its type in small monospace, and its description. Nested objects are indented under their field, and the raw schema document sits behind a View JSON Schema disclosure, so the schema is never dumped as raw JSON.

Labels come from Cinder's identifier formatter, so orderId reads "Order ID". Local $refs into $defs or definitions are followed and allOf members are merged, including properties that more than one member declares. A reference that points back into the object being shown is not expanded again; its line reads, for example, node (recursive). The view lists at most 500 expanded fields, and an object it did not open past that shows the same note as one beyond maxDepth. A schema that is not an object with properties shows one Value line that names its type.

Use it wherever a schema is shown for reading: a workflow's input and output, a tool's input, the payload of a signal or an update, a question's answer. Use JsonSchemaEditor when the schema must be edited, and PayloadInspector when you are showing a value rather than the shape it must have.

Usage

svelte 
<script lang="ts">
  import { SchemaView } from '@lostgradient/cinder';

  const refundInput = {
    $schema: 'https://json-schema.org/draft/2020-12/schema',
    type: 'object',
    required: ['orderId', 'customer'],
    properties: {
      orderId: { type: 'string', description: 'The order to refund.' },
      refundAmount: { type: 'number', description: 'Amount in cents. Defaults to the full order.' },
      customer: {
        type: 'object',
        required: ['email'],
        properties: {
          email: { type: 'string', description: 'Where the receipt is sent.' },
          loyaltyTier: { type: 'string' },
        },
      },
    },
  };
</script>

<SchemaView schema={refundInput} label="Refund input" />
Live preview

A nested schema

  • Order ID string The order to refund.
  • Refund Amount number Amount in cents. Defaults to the full order.
  • Customer object
    • Email string Where the receipt is sent.
    • Loyalty Tier string

02

When to use

Use when
  • Showing the shape of a workflow input or output, a tool input, or a signal or update payload without a raw JSON dump.
  • Telling the reader which fields are required and what type each one takes.
Avoid when
03

Examples

A nested schema

One line per field with a red dot on the required ones, nested objects indented, and the raw document behind View JSON Schema.

04

Props

Props for schema-view
Name
Type
Default
Description
schema required unknown The JSON Schema to show, as a parsed object. Local $refs into $defs or definitions are followed and allOf members are merged. A schema that is not an object with properties shows one Value line naming its type.
label text 'Schema' Accessible name of the view, for example "Workflow input". It is the aria-label of the region, so name what the schema describes.
maxDepth number 8 How many levels of nested objects are expanded. Deeper objects show their line without their fields, and the raw document still holds them.
rawLabel text 'View JSON Schema' Label of the disclosure that reveals the raw schema document.
emptyLabel text 'This schema declares no fields.' Text shown when the schema declares no fields.