Key Value Editor — Cinder component documentation

Overview

KeyValueEditor edits repeatable string key/value pairs. Pass secret(key) to render sensitive values in an editable password Input.

<KeyValueEditor bind:entries secret={(key) => key.toLowerCase().includes('token')} />

The component owns row addition, removal, and change reporting. The consumer owns key validation and the policy that determines which keys are secret.

Usage

<script lang="ts">
  import { KeyValueEditor } from '@lostgradient/cinder/key-value-editor';
  let entries = $state([
    { key: 'HOST', value: 'localhost' },
    { key: 'PORT', value: '3000' },
  ]);
</script>

<KeyValueEditor bind:entries />

Live preview

When to use

Use when

Editing headers, environment variables, or configuration fields.

Avoid when

Values need rich structured content; use Table.

Examples

Basic key-value editor

Edit a small set of environment-style key-value entries.

Props

Props for key-value-editor
Name	Type	Default
`entries` bindable	`KeyValueEntry[]`	`[]`
`onValueChange`	`(entries: KeyValueEntry[]) => void`
`secret`	`(key: string) => boolean`
`addLabel`	`text`	`'Add pair'`
`removeLabel`	`(key: string) => string`