Read-Only Mode
This page explains how the readonly config and enable() / disable() toggle read-only mode, and which controls get disabled.
How It Works
Read-only is not a flag passed to each node; it batch-toggles the disabled attribute across the whole rendered DOM:
| Trigger | Action |
|---|---|
Config readonly: true |
After the initial render, sets body.dataset.readonly = 1 and adds disabled to every element matching the selector |
editor.disable() |
Same (JSONEditor.js:178-183) |
editor.enable() |
Sets body.dataset.readonly = 0 and removes disabled from every matching element (JSONEditor.js:171-176) |
The selector is selectorSubNodes (src/data.js): button:not(.collapsed), textarea, input, select. Collapse buttons are excluded, so nodes can still be expanded and collapsed while read-only.
Nodes Rendered Later
When a node re-renders, keyInput() and typeSelect() read body.dataset.readonly, so the key input and type dropdown stay disabled; the other controls (value input, remove and add-child buttons) are rebuilt by #create() without disabled. If nodes re-render while read-only (for example after a programmatic import()), call disable() again.
Hooks
Toggling read-only does not trigger any Lifecycle hook.
Further Reading
- The
readonlyconfig andenable()/disable()signatures: API Reference - How nodes re-render: Core Concepts