material-json-field

Compact JSON editor as a Material tree — edit values, add/remove/rename keys, reorder, change types. Form-associated; posts one JSON string. No syntax-highlighter, ~5 KB gz.

editable — hover a row for + / move / remove; the type selector converts a value (string ↔ number ↔ object …); object keys are editable in place

valueChange emits the serialized JSON string on every edit 


      


      
      

        

          readonly — a collapsible viewer for API payloads / audit
          data (no editors, still foldable)
        

        
      


      
      

        

          form-associated — required; the whole document posts under
          the field name as one JSON string
        

        

          
          

            
            
            
          

        

      


    


    

      
sample usage

      
<form>
  <material-json-field name="config" label="Config"
                       value='{"theme":"dark","retries":3,"enabled":true}'></material-json-field>
  <button type="submit">Save</button>
</form>

<script>
  const jf = document.querySelector('material-json-field');
  jf.addEventListener('valueChange', (e) => console.log(e.detail.value));
  jf.getJson().then((obj) => console.log(obj));   // parsed value
</script>