Env Editor

ProNew

An editor for environment variables with masked values, validation, and import from pasted .env text.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/env-editor

Prop	Type	Default	Description
`value`	`EnvVariable[]`	-	Variables (controlled). Each has `id`, `key` and `value`.
`defaultValue`	`{ key: string; value: string }[]`	`[]`	Initial variables when uncontrolled.
`onChange`	`(variables: EnvVariable[]) => void`	-	Called with the new list after every change.
`maskAll`	`boolean`	`true`	Mask every value until it is revealed.
`title`	`string`	`Environment variables`	Heading above the rows.
`description`	`string`	-	Helper text under the heading. Defaults to the variable count.
`disabled`	`boolean`	`false`	Disables editing.

Also accepts all <div> props except defaultValue and onChange.

Pasting several KEY=value lines into a name field imports them all. The Paste .env panel does the same.
Names are checked for invalid characters and duplicates; problems are linked to the field with aria-describedby.
parseEnv and formatEnv are exported.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/env-editor

Prop	Type	Default	Description
`value`	`EnvVariable[]`	-	Variables (controlled). Each has `id`, `key` and `value`.
`defaultValue`	`{ key: string; value: string }[]`	`[]`	Initial variables when uncontrolled.
`onChange`	`(variables: EnvVariable[]) => void`	-	Called with the new list after every change.
`maskAll`	`boolean`	`true`	Mask every value until it is revealed.
`title`	`string`	`Environment variables`	Heading above the rows.
`description`	`string`	-	Helper text under the heading. Defaults to the variable count.
`disabled`	`boolean`	`false`	Disables editing.

Also accepts all <div> props except defaultValue and onChange.

Pasting several KEY=value lines into a name field imports them all. The Paste .env panel does the same.
Names are checked for invalid characters and duplicates; problems are linked to the field with aria-describedby.
parseEnv and formatEnv are exported.