JSON Editor
JSON Editor edits and reviews structured JSON content. It participates in the state, validation, and submission boundary of its Form.
1. When to use it
Typical uses:
- Advanced configuration objects
- API request fragments
- Editable data that must preserve JSON structure
2. Add and configure
- Add JSON Editor to the Fields slot of a Form Section.
- Set a stable, unique Field Key / Name that matches the backend DTO property.
- Configure the component properties below, then add Required, Help Text, Full row, or conditions as needed.
- Check the initial value and layout in Design Preview, then use Form Validate / Submit to test the full data path.
3. Main properties
| Property | Purpose |
|---|---|
| Default Text | Sets the initial value, content, or format used by the field. |
| Help Text | Controls how the field is displayed in Design Preview and Runtime. |
| Full row | Controls how the field is displayed in Design Preview and Runtime. |
| Required | Enables or disables this behavior. |
| Visible When | Defines the data shape used for binding, submission, or responses. |
Common properties such as Field Key, Required, Help Text, Full row, and Visible When come from the Form field contract. The table highlights the settings most relevant to JSON Editor.
4. Form value and backend contract
Submitted value: A valid JSON value. Decide whether the API receives JSON text or a parsed object before integration.
{
"retry": 3,
"enabled": true
}
The example shows the data shape only. The API must still validate type, range, and authorization against its business DTO.
5. Validation, conditions, and interactions
Every field can use Form properties such as Required, Visible When, Disabled When, Required When, Dependencies, and Clear When Hidden. Conditions improve interaction but never replace backend validation or authorization.
Component capabilities: The value participates in Form state; only events exposed in the property panel are available to Interaction.
6. Recommendations
Recommendations: Limit content size and apply escaping, sanitization, or schema validation. Never execute user-provided code or HTML directly.
Return to the Form overview for layout, validation, submission, drafts, and backend protocol guidance.