MonacoJsonField

Shows a JSON value in a read-only Monaco editor.

Installation

pnpm dlx shadcn@latest add @chelone/monaco

Loading preview…

<MonacoJsonField> shows a JSON value, or a string of JSON, in a read-only Monaco editor with syntax highlighting and folding. Use it where the value is long enough to want a real editor, such as a show view.

It is an add-on installed from the registry, with Monaco as an optional peer dependency. The MonacoJsonInput page covers installing it and how Monaco loads.

In a show view

import { RecordField, Show } from "@chelone/react";
import { MonacoJsonField } from "@/components/monaco/monaco-json-field";
 
export const IntegrationShow = () => (
  <Show>
    <RecordField source="settings">
      <MonacoJsonField source="settings" maxHeight={320} />
    </RecordField>
  </Show>
);

The editor grows with the content up to maxHeight. Set autoHeight={false} to use a fixed height instead.

For a list cell, use JsonField. It renders plain text in a <pre> and loads no editor, so a datagrid of many rows stays light.

Props

Prop	Type	Default	Description
autoHeight	boolean	—	Grow with the content up to `maxHeight`. Defaults to true.
cellClassName	string	—	A class name to apply to the cell element when used inside `<DataTable>`.
className	string	—	A class name to apply to the root element.
defaultValue	SourceValue<RecordType, SourceProp<RecordType>>	—	Shown when the record has no value at `source`.
empty	ReactNode	—	The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is.
headerClassName	string	—	A class name to apply to the header cell element when used inside `<DataTable>`.
height	number	—	Editor height in pixels when `autoHeight` is false. Defaults to 200.
label	ReactNode	—	Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label.
maxHeight	number	—	Tallest the editor grows to when `autoHeight` is on. Defaults to 400.
monacoOptions	IStandaloneEditorConstructionOptions	—	Merged over the read-only defaults, so it can override any of them.
record	RecordType	—	The record to render. Defaults to the ambient `RecordContext` value.
resource	string	—	The resource name. Defaults to the ambient `ResourceContext` value.
sortable	boolean	—	Disable the header click handler when used inside `<DataTable>`.
sortBy	string	—	The field to sort by when this column head is clicked, if sortable.
sortByOrder	SortOrder	—	The order used for sorting when this column head is clicked, if sortable.
source	SourceProp<RecordType>	—	Name of the property to display (dot/bracket path).
textAlign	TextAlign	—	The text alignment for the cell content, when used inside `<DataTable>`.