# Public browser variables

[← Back to SvelteKit](https://dotenvx.com/docs/sveltekit.md#ship)

Mark browser-visible values with public: true in your [environment declarations](https://svelte.dev/docs/kit/environment-variables). Keep HELLO private:

```js
// 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:

**npm**

```console
$ npx dotenvx set SITE_NAME "My app"
```

**pnpm**

```console
$ pnpm exec dotenvx set SITE_NAME "My app"
```

Read it in a component:

```svelte
<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.