# Environment editor

> Masked env vars with per-environment scope, validation and .env paste.

Component · Pro · https://lodeui.com/components/env-editor

## When to use

- Editing environment variables or secrets per environment.

## When not to use

- Non-secret settings: use regular inputs.

## Installation

```bash
npx shadcn@latest add @lode/env-editor
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { EnvEditor, type EnvVar } from "@/components/ui/env-editor";

export function Env() {
  const [vars, setVars] = React.useState<EnvVar[]>([]);
  return <EnvEditor value={vars} onValueChange={setVars} />;
}
```

## API reference

### EnvEditor

Rows of key, masked value and environment scope. Pasting a .env file adds every line.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `EnvVar[]` | – | { id, key, value, environments }. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between key, value and scope |
| ⌘V / Ctrl+V | Paste a .env block into a key field |

## Accessibility

- Every field and button is labelled with the variable name.
- Invalid and duplicate keys set aria-invalid with a message.

## Motion

- Rows animate in and out.

## Responsive behavior

- Rows stack below 768px; the column header hides.

## Performance

- Validation runs on change only.

## Notes for AI

- Encrypt values server-side; the editor only masks them.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.