Public browser variables

Expose values intended for the browser.

Mark browser-visible values with public: true in your environment declarations. Keep HELLO private:

// src/env.js
import { defineEnvVars } from '@sveltejs/kit/env';

export const variables = defineEnvVars({
  HELLO: {},
  SITE_NAME: { public: true }
});

Add the value to your encrypted .env file:

$ npx dotenvx set SITE_NAME "My app"

$ pnpm exec dotenvx set SITE_NAME "My app"

Read it in a component:

<script>
  import { SITE_NAME } from '$app/env/public';
</script>

<h1>{SITE_NAME}</h1>

Restart npm run dev or pnpm dev. For production, set SITE_NAME in .env.production too, using the same command with -f .env.production.

Encryption protects the committed file. Values declared public are sent to browsers, so only use this for public configuration.