🔐 Dotenv Studio: GUI for Environment Variables
The Ultimate VS Code Extension for Managing Environment Variables
Say goodbye to messy .env files and hello to a beautiful, secure GUI! 🎨
Features • Installation • Usage • Security • Contributing
✨ Features
| 🔒 |
Secure by Default
Values are masked by default. Reveal only when you need to see them. |
| 📁 |
Smart Organization
Automatically groups variables by comment headers (# Database, # API, etc.) |
| ✏️ |
Intuitive Editing
Add, edit, and delete variables with a clean, modern interface. |
| 🔍 |
Powerful Search
Instantly find variables across all sections with real-time filtering. |
| 💾 |
Format Preservation
Keeps your comments, blank lines, and original formatting intact. |
| 🎨 |
Theme Adaptive
Seamlessly matches VS Code's light and dark themes. |
| ⚡ |
Lightning Fast
Opens instantly with no lag, even for large .env files. |
| 🌍 |
Multi-Environment Support
Works with .env, .env.local, .env.production, and more! |
� Screenshots
Main Interface
Variable Management
Editing Variables
Organized Sections
�🚀 Installation
From VS Code Marketplace
- Open Extensions in VS Code (
Cmd+Shift+X / Ctrl+Shift+X)
- Search for "Dotenv Studio"
- Click Install
From Command Line
code --install-extension metecan.dotenv-studio
📖 Usage
Opening .env Files
Simply open any .env file and Dotenv Studio will automatically launch the GUI!
Supported file patterns:
.env.env.local.env.development.env.production.env.test.env.* (any variant)
💡 Pro Tip: You can also right-click any .env file and select "Open in Env Manager" or use the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) → Open in Env Manager
Managing Your Variables
📂 Sections
Navigate through your variables using the section sidebar. Sections are created from comment headers in your .env file:
# Database Configuration
DB_HOST=localhost
DB_PORT=5432
DB_NAME=myapp
# API Keys
API_KEY=your_secret_key_here
API_SECRET=super_secret
➕ Adding Variables
- Select a section from the sidebar
- Click the "Add Variable" button
- Enter the key and value
- Hit save!
✏️ Editing Variables
- Click on any key or value field to edit inline
- Values are masked by default 🔒 – click "Show" to reveal
- Changes are tracked in real-time
🗑️ Deleting Variables
Click the Delete button on any variable card to remove it instantly.
🔍 Searching
Use the search bar at the top to filter variables by key or value across all sections.
💾 Saving Changes
- Click "Save Changes" to write modifications to your file
- Click "Discard" to revert all unsaved changes
- The extension preserves your original formatting, comments, and blank lines!
Creating Organized Sections
Structure your .env files with comment headers for automatic section grouping:
# ========================================
# Database Configuration
# ========================================
DB_HOST=localhost
DB_PORT=5432
DB_USER=admin
DB_PASSWORD=secret123
# ========================================
# Third-Party Services
# ========================================
STRIPE_API_KEY=sk_test_...
SENDGRID_API_KEY=SG....
# ========================================
# Application Settings
# ========================================
NODE_ENV=development
PORT=3000
DEBUG=true
🔐 Security
Your secrets are safe with Dotenv Studio:
- ✅ No External Transmission – All data stays local to your VS Code instance
- ✅ Masked by Default – Values are hidden (password-style) in the UI
- ✅ No Logging – We never log your environment variables
- ✅ No Telemetry – Zero data collection or tracking
- ✅ Open Source – Fully transparent code you can audit
🎯 Why Dotenv Studio?
| Before 😫 |
After 😎 |
| Manually editing raw text files |
Beautiful, intuitive GUI |
| Accidentally exposing secrets on screen share |
Masked values by default |
| Losing track of variables in large files |
Organized sections & powerful search |
| Breaking formatting when editing |
Automatic format preservation |
| Confusion with multiple .env files |
Clear multi-environment support |
💻 Requirements
- VS Code 1.75.0 or higher
- That's it! No external dependencies needed.
🛠️ Development
Want to contribute or build from source?
# Clone the repository
git clone https://github.com/metecan/dotenv-studio.git
# Install dependencies
npm install
# or
pnpm install
# Compile TypeScript
npm run compile
# Watch for changes during development
npm run watch
🐛 Found a Bug?
Please open an issue on GitHub. We appreciate your feedback!
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
📝 License
MIT © metecan
