JSON Editor
The JSON Editor component provides a full-featured code editor for writing and editing JSON data directly within your application. It includes syntax highlighting, code folding, bracket matching, and real-time validation, making it ideal for building configuration panels, API request builders, or any interface where users need to input structured JSON.
Example Usage
A DevOps team builds an internal tool to manage feature flags across multiple services. The JSON Editor component lets engineers directly edit the flag configuration as JSON, with syntax highlighting and validation that immediately catches malformed input before it's saved to the database.
Properties
Property | Description | Expected Value |
|---|---|---|
| JSON | Sets the JSON data displayed in the editor. | A valid JSON Object or Array. |
| Theme | Sets the color theme for the editor. | Select from: monokai, solarized (default), tomorrow, or bespin. |
Component Specific Actions (CSA)
Following actions of the component can be controlled using the component specific actions(CSA):
Action | Description | How To Access |
|---|---|---|
| setValue | Sets the JSON value of the editor. Accepts a JSON object or array. | components.jsoneditor1.setValue({key: "value"}) |
| setLoading | Toggles the loading state of the editor. | components.jsoneditor1.setLoading(true) |
| setVisibility | Toggles the visibility of the editor. | components.jsoneditor1.setVisibility(false) |
| setDisable | Toggles the disabled state of the editor. | components.jsoneditor1.setDisable(true) |
Exposed Variables
Variable | Description | How To Access |
|---|---|---|
| value | Holds the current JSON value from the editor as a parsed object. | {{components.jsoneditor1.value}} |
| isValid | Returns true if the current content is valid JSON, false otherwise. | {{components.jsoneditor1.isValid}} |
| isVisible | Returns the current visibility state of the component. | {{components.jsoneditor1.isVisible}} |
| isLoading | Returns the current loading state of the component. | {{components.jsoneditor1.isLoading}} |
| isDisabled | Returns the current disabled state of the component. | {{components.jsoneditor1.isDisabled}} |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Expand entire JSON | Controls whether the JSON tree is fully expanded or collapsed when loaded. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Dynamic height | Automatically adjusts the component's height based on its content. Only applies in the viewer mode. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Disables the component and makes the editor read-only. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., Edit your JSON configuration here.). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Container
Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the editor. | Select a color from the color picker or set it programmatically using fx. |
| Border color | Sets the border color of the editor container. | Select a color from the color picker or set it programmatically using fx. |
| Border radius | Sets the corner radius of the editor container. | Enter a numeric value (default: 6) or set it programmatically using fx. |
| Box shadow | Sets the box shadow around the editor container. | Use the box shadow picker or set it programmatically using fx. |
info
Any property having fx button next to its field can be programmatically configured.
Need Help?
- Reach out via our Slack Community
- Or email us at [email protected]
- Found a bug? Please report it via GitHub Issues