Json Input
A textarea specialized for JSON that validates on blur, shows an error state with the parse message when invalid, and provides a Format button to pretty-print valid JSON.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | The JSON string content of the textarea |
placeholder | string | — | Textarea placeholder text |
rows | number | 6 | Number of textarea rows |
format-on-blur | boolean | — | Pretty-print valid JSON automatically on blur |
disabled | boolean | — | Block editing of the textarea |
label | string | — | Field label rendered above the textarea |
indent | number | 2 | Number of spaces used when pretty-printing |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/json-input.js"></script>import "./pura/lib/json-input.js";