Visual Editor
The Visual Editor is the core of ENV Manager Pro. Instead of manually editing raw .env files, you manage variables through a structured sidebar that validates your edits, prevents formatting errors, and keeps a full undo history.
Variables Panel
The Variables panel in the sidebar shows all key-value pairs in the currently selected .env file. Each row shows:
- Key — the variable name
- Value — hidden by default (shown as
••••••) - Inline action buttons — rename, edit, copy, delete
Adding a Variable
Click the + button in the Variables panel toolbar, or run the command ENV Manager: Add Variable.
You'll be prompted for:
- Key — must be a valid env key (
UPPER_SNAKE_CASErecommended) - Value — any string, including empty
- Comment — optional; written as
# commentabove the key
Editing a Variable
Click the pencil icon next to any variable, or right-click and choose Edit Variable. The input box is pre-filled with the current value.
Deleting a Variable
Click the trash icon or right-click → Delete Variable. The deletion is tracked by the undo system so you can recover it immediately.
Showing / Hiding Values
Click the eye icon (or press Ctrl+Alt+R / Cmd+Alt+R) to toggle between masked and revealed values for all variables at once.
Copy Value
Click the copy icon next to any variable to copy its value to the clipboard without revealing it in the UI.
Undo
Press Ctrl+Alt+Z / Cmd+Alt+Z, or click the undo icon, to revert the last change. The undo system takes a full snapshot before every mutation, so you can safely experiment.
Sorting
Click Sort A–Z in the overflow menu to alphabetically sort all variables. Comments attached to keys move with them.
Groups / Comments
You can add a variable group with its own heading comment. Groups appear as section separators in the file, making large env files easier to navigate.
The visual editor writes directly to the .env file on disk with every change — there's no "save" step. VS Code's file watcher picks up changes automatically.