Skip to main content
The $env/static/public module provides access to public environment variables that are replaced at build time and can be accessed on both the client and server. These variables must be prefixed with PUBLIC_ by default.

​
Usage

import { PUBLIC_VARIABLE_NAME } from '$env/static/public';
This module can be imported anywhere - in both client-side and server-side code.

​
Static Replacement

Static public variables are replaced at build time. For example: 
import { PUBLIC_API_URL } from '$env/static/public';

fetch(PUBLIC_API_URL);
Becomes (after build): 
fetch('https://api.example.com');

​
Example: Component

<!-- src/routes/+page.svelte -->
<script>
  import { PUBLIC_SITE_NAME, PUBLIC_API_URL } from '$env/static/public';
</script>

<h1>Welcome to {PUBLIC_SITE_NAME}</h1>
<p>API endpoint: {PUBLIC_API_URL}</p>

​
Example: API Client

// src/lib/api.js
import { PUBLIC_API_URL, PUBLIC_API_VERSION } from '$env/static/public';

export async function fetchData(endpoint) {
  const response = await fetch(
    `${PUBLIC_API_URL}/v${PUBLIC_API_VERSION}/${endpoint}`
  );
  return response.json();
}

​
Example: Configuration

<!-- src/routes/+layout.svelte -->
<script>
  import { PUBLIC_ANALYTICS_ID, PUBLIC_SITE_NAME } from '$env/static/public';
  import { onMount } from 'svelte';
  
  onMount(() => {
    // Initialize analytics with public ID
    if (PUBLIC_ANALYTICS_ID) {
      window.gtag('config', PUBLIC_ANALYTICS_ID);
    }
  });
</script>

<svelte:head>
  <title>{PUBLIC_SITE_NAME}</title>
</svelte:head>

<slot />

​
Example: Feature Flags

// src/lib/features.js
import { PUBLIC_ENABLE_BETA_FEATURES } from '$env/static/public';

export const betaFeaturesEnabled = PUBLIC_ENABLE_BETA_FEATURES === 'true';

export function useBetaFeature(feature) {
  return betaFeaturesEnabled && feature.enabled;
}

​
Configuration

Configure the public prefix in your svelte.config.js: 
// svelte.config.js
export default {
  kit: {
    env: {
      publicPrefix: 'PUBLIC_'
    }
  }
};
Only variables starting with PUBLIC_ will be available and exposed to browsers.

​
Setting Public Environment Variables

Create a .env file in your project root: 
# .env
PUBLIC_API_URL=https://api.example.com
PUBLIC_SITE_NAME=My SvelteKit App
PUBLIC_ANALYTICS_ID=UA-XXXXXXXXX
PUBLIC_ENABLE_BETA_FEATURES=false
Or set them when building: 
PUBLIC_API_URL=https://api.prod.com npm run build

​
When to Use Static vs Dynamic

Use Static

  • Build-time constants that don’t change
  • Better performance (inlined at build time)
  • Type-safe access with TypeScript
  • Enables dead code elimination

Use Dynamic

  • Values that change between deployments
  • Different values per environment
  • Runtime configuration
  • A/B testing configurations

​
TypeScript Support

SvelteKit automatically generates types for your static public environment variables: 
// TypeScript provides autocomplete and type checking
import { PUBLIC_API_URL, PUBLIC_SITE_NAME } from '$env/static/public';

// Both are typed as string
const url: string = PUBLIC_API_URL;
const name: string = PUBLIC_SITE_NAME;
Types are generated in .svelte-kit/ambient.d.ts based on your .env file.

​
Performance Benefits

Static public variables offer several advantages:
  1. Zero runtime overhead - Values are inlined during build
  2. Better tree-shaking - Unused imports can be eliminated
  3. Smaller bundles - No need to ship environment variable runtime
  4. Faster execution - No object property lookup

​
Build-Time Substitution

During build, SvelteKit:
  1. Reads all PUBLIC_* environment variables
  2. Generates TypeScript types
  3. Replaces imports with actual string values
  4. Optimizes the code (tree-shaking, minification)
// Before build
import { PUBLIC_API_URL } from '$env/static/public';
const url = PUBLIC_API_URL;

// After build (optimized)
const url = 'https://api.example.com';

​
Security Warning

Never put secrets in public environment variables!All PUBLIC_* variables are embedded in your client-side JavaScript bundle and can be viewed by anyone. Use $env/static/private or $env/dynamic/private for sensitive data.

​
Common Use Cases

  • API endpoints - PUBLIC_API_URL
  • Analytics IDs - PUBLIC_ANALYTICS_ID
  • Feature flags - PUBLIC_ENABLE_FEATURE_X
  • Site metadata - PUBLIC_SITE_NAME, PUBLIC_SITE_URL
  • CDN URLs - PUBLIC_CDN_URL
  • Map API keys - PUBLIC_MAPBOX_KEY (public keys only!)

​
See Also