Environment variables let you store configuration and public API keys for your project’s frontend code.

​
What Are Environment Variables?

Environment variables are:
  • Frontend-only - Exposed to browser/client code
  • Project-specific - Each project has its own
  • Accessible in code - Use them in your frontend application
  • Public - Visible in frontend code (use only for non-sensitive data)

​
Common Uses

  • Public API keys - Store public keys for services (e.g., Supabase public keys)
  • Configuration - App settings and preferences
  • Feature flags - Enable/disable features
  • Public URLs - API endpoints and service URLs
⚠️ Important: Never store sensitive data like passwords, private API keys, or secrets in environment variables. They are exposed to the frontend and visible to anyone who inspects your code.

​
Adding Variables

  1. Go to Project Settings → Environment Variables
  2. Click Add Variable
  3. Enter:
    • Name - Variable name (e.g., API_KEY)
    • Value - The actual value
  4. Save
Variables are automatically available in your code.

​
Using Variables

In your frontend code, reference variables using the VITE_ prefix:
  • Frontend: import.meta.env.VITE_API_KEY
Note: Environment variables must start with VITE_ to be accessible in your frontend code. Leo knows how to use environment variables when you mention them in prompts.

​
Security Considerations

  • Frontend-exposed - Variables are visible in browser/client code
  • Not encrypted - Stored as plain text
  • Public access - Anyone can see them by inspecting your frontend code
  • Project-specific - Isolated per project
  • Access control - Only project members can view/edit
For sensitive data: Use Integrations instead. Integration credentials (like Odoo, Airtable, Notion API keys) are encrypted and stored securely on the backend, never exposed to the frontend.

​
Best Practices

  • Use descriptive names - VITE_SUPABASE_URL not VITE_URL1
  • Only public data - Never store secrets or private keys
  • Document usage - Note what each variable is for
  • Use integrations for secrets - Store sensitive credentials via Project Integrations

​
Integration Credentials vs Environment Variables

Environment Variables (Frontend):
  • Public API keys (e.g., Supabase public keys)
  • Public URLs and endpoints
  • Feature flags
  • Non-sensitive configuration
Integration Credentials (Backend - Secure):
  • Private API keys (Odoo, Airtable, Notion, Klaviyo, etc.)
  • Authentication tokens
  • Database passwords
  • Any sensitive credentials
When you add an integration, credentials are stored securely and encrypted on the backend, never exposed to the frontend.

Project Settings

Configure your project

Integrations

Learn about integrations