ars-property-editor

Reusable key/value property editor with dynamic add/remove rows.

← Back to Demo Page

About

Edit dynamic key/value pairs — useful for metadata editors, config panels, tag editors, and graph node property sheets. Emits a change event with the current properties map on every edit, add, or remove.

Live Demo (Editable)

Read-only Mode

Event Log

Theme Toggle

Usage

<ars-property-editor id="editor"></ars-property-editor> <script> const editor = document.getElementById('editor'); editor.properties = { name: 'Alice', role: 'admin' }; editor.addEventListener('ars-property-editor:change', (e) => { console.log('Properties:', e.detail.properties); }); </script>