Environment Variables

Environment variables let you store API keys and secrets separately from your code. Values are encrypted at rest and never appear in your source files, shared previews, or forked copies.

Setting variables

1. Open the editor and click Settings (gear icon in the header, or press Shift + S)
2. Select the Environment Variables tab
3. Enter a key and a value, then click Add Variable

Key naming rules:

• Uppercase letters, digits, and underscores only
• Must start with a letter — e.g. OPENAI_API_KEY, STRIPE_SECRET_KEY

Values are masked by default — click the eye icon next to a variable to reveal or copy it, or the pencil icon to edit its key or value in place.

Marking a variable Sensitive (Projects only)

On a Project (not the instant browser runtime — see below), you can flag a variable Sensitive when adding or editing it. Once saved, a sensitive value can never be viewed again by anyone, including you — there's no reveal or copy option, only a "Replace value" field if you need to rotate it. This matches how Vercel, GitHub, and Netlify treat a flagged secret.

Use this for anything you'd never want to accidentally expose over someone's shoulder or in a screen share — a database password, a signing secret, a production API key. A value you're comfortable being visible to anyone who can edit the Project (an internal feature flag, a non-sensitive base URL) doesn't need it.

The Sensitive toggle isn't available on Experiments/Apps still running on the instant browser runtime — their variables are inlined into the browser bundle at build time (see below), so hiding one from this panel wouldn't actually protect it, only hide it from yourself.

Using variables in code

On the instant browser runtime, variables are injected at bundle time. Access them anywhere in your app via process.env:

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

const baseUrl = process.env.API_BASE_URL ?? 'https://api.example.com';

Variables are available in all files — components, utilities, entry points.

Note: Variables are injected at bundle time, not at runtime. This means they are baked into the client-side bundle. Do not store values that must remain server-side only (e.g. webhook signing secrets that verify incoming requests). For typical API keys that call external services from the browser, this is fine.

AI awareness

The editor AI knows about your environment variables. When generating code that calls an external service, it will use process.env.KEY_NAME patterns rather than placeholder strings. If the AI doesn't know which key name you've set, it will suggest a sensible name and remind you to add it in Settings.

Security model

• Values are encrypted with AES-256-GCM before being stored in the database
• The encryption key is held server-side — values are never stored or transmitted in plain text
• A config value (the default) is visible to anyone who can edit the app — on a personal app, that's just you; on a Team workspace app, that's the owner, any admin, and a builder with access, same as every other setting. A sensitive value is never visible to anyone, including you, once saved — see above
• On the instant browser runtime, variables are injected into the bundle when it's built
• A published app on the browser runtime includes the injected values in the client bundle — treat variables the same way you would any browser-exposed API key (use keys scoped to the minimum permissions your app needs)

Forking

When an app is forked, the key names are copied as empty stubs, including whether each one was marked Sensitive. The person who forked your app can see which variables are required but must supply their own values — your actual secrets are never transferred.

This means if you build and share a template that uses OPENAI_API_KEY, anyone who forks it will see that key name waiting to be filled in, without ever seeing your key.

Deleting variables

Open Settings → Environment Variables, find the variable, and click the delete (trash) icon. The value is permanently removed from the database. The next bundle will no longer include that variable.