Environment editorPro
Masked env vars with per-environment scope, validation and .env paste.
KeyValueEnvironments
Tip: paste a .env file into a key field
When to use
- Editing environment variables or secrets per environment.
When not to use
- Non-secret settings: use regular inputs.
Installation
Usage
Import it from @/components/ui/env-editor after installing.
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 |
| ⌘VorCtrl+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.
This page as Markdown, for assistants and coding agents:
/components/env-editor/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt