# Environment Variables

> Browse, validate, and edit your .env variables per mode using the Dev Tool's Environment Variables manager.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/dev-tools/environment-variables*

---

The Dev Tool's **Environment Variables** page (`/variables`) is a visual manager for every `.env` variable the `apps/web` project uses. It scans all of your `.env*` files, resolves the effective value per mode, validates each value against its schema, and lets you edit values inline.

Open it from the sidebar, or run `pnpm --filter dev-tool dev` and visit [http://localhost:3010/variables](http://localhost:3010/variables).

## Where Variables Live

For the web app, variables are read from `apps/web/.env*`:

- `apps/web/.env` — public, non-sensitive defaults (committed). See `apps/web/.env.template` for the full list.
- `apps/web/.env.development` / `apps/web/.env.production` — mode-specific, non-secret overrides.
- `apps/web/.env.local` — secrets and local overrides (git-ignored).
- `apps/web/.env.development.local` / `apps/web/.env.production.local` — mode-specific secrets (git-ignored, highest precedence).

Public variables use the `VITE_` prefix and are inlined into the client bundle at build time (`import.meta.env.VITE_*`). Unprefixed variables are server-only (`process.env.*`). For the complete variable reference and security notes, see [Environment Variables Reference](../configuration/environment-variables).

## Modes and Precedence

The **mode selector** at the top-left switches between `development` and `production`. Each mode loads a different chain of files, and **later files override earlier ones**:

- **development**: `.env` → `.env.development` → `.env.local` → `.env.development.local`
- **production**: `.env` → `.env.production` → `.env.local` → `.env.production.local`

The manager shows the *effective* (winning) value for the selected mode, and the **Override Chain** under each variable shows exactly which files define it and which one wins. A variable defined in more than one file is tagged **Overridden**.

## Reading the Page

Each variable card shows:

- The variable **name**, with a **Required** badge when the schema marks it required and an **Overridden** badge when multiple files define it.
- A short **description** of what the variable does.
- An **editable input** (with a copy button) pre-filled with the effective value. Secret variables are masked until revealed.
- The **example** value and the **Override Chain**.
- Whether it is a **Public** (`VITE_`-prefixed, client-exposed) or **Private** (server-only) variable, plus any `.env (conflict)` markers.

At the top, summary chips count how many variables are **Valid**, **Invalid**, and **Overridden**. Use the **Filter variables** dropdown or the **search** box to narrow the list (filter by secret, public, private, overridden, invalid, or deprecated), and toggle **Display Invalid only** to focus on problems.

The right-hand panel renders a live, syntax-highlighted preview of the resulting env file, grouped by category. **Copy env file to clipboard** copies it in `KEY=value` form.

## Editing Values

Type a new value into any input; the change is debounced and saved automatically, and a toast confirms the write. The Dev Tool writes to the correct file for the selected mode and the variable's sensitivity:

| Mode | Public variable | Secret variable |
| --- | --- | --- |
| development | `.env.development` | `.env.local` |
| production | `.env.production` | `.env.production.local` |

Secrets always land in a git-ignored `*.local` file so you never commit them by accident.

{% callout type="warning" title="Local only" %}
Edits write to your local `apps/web/.env*` files. The Dev Tool never sends values anywhere — it is a local development helper. Set real production secrets in your hosting platform, not in committed files.
{% /callout %}

## Building a Production Config

To turn this into a correct, complete production configuration, follow the step-by-step [Production Environment Variables](production-environment-variables) guide.

## Inspecting Values via MCP

The same functionality is exposed to AI agents through the MCP server (`kit_env_schema`, `kit_env_read`, and the update tools). Implementation lives in `tooling/mcp-server/src/tools/env/`. See [MCP Server](../installation/mcp-server) for setup.