Framework guide: SvelteKit

Public vs private environment variables

SvelteKit explicitly distinguishes between public (accessible on the client) and private (server only) variables via $env/static/public / $env/dynamic/public vs $env/static/private / $env/dynamic/private.

.env

# Ends up in browser bundle — anyone can see it
PUBLIC_MARKPDF_API_KEY=tu_key_publica

# Only accessible from server-side code (+page.server.ts, +server.ts, hooks.server.ts)
MARKPDF_API_KEY=tu_key_privada

If you use createConvertStore/MarkpdfClient in a .svelte component (client code), you can only pass it a PUBLIC_* variable — and that key is exposed in the bundle, just like in any SPA.

Pattern A: public key on the client (prototypes, internal tools)

<script lang="ts">
  import { PUBLIC_MARKPDF_API_KEY } from "$env/static/public";
  import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";

  const client = new MarkpdfClient({ apiKey: PUBLIC_MARKPDF_API_KEY });
  const convertStore = createConvertStore(client);
</script>

As with any SPA, this key is visible to anyone inspecting the bundle or network traffic. Use it only if you accept that risk (see key exposure considerations, which apply the same here).

Pattern B (recommended): proxy with `+server.ts`

Keep the key on the server and expose your own endpoint:

src/routes/api/convert/+server.ts

import { MARKPDF_API_KEY } from "$env/static/private";
import { MarkpdfClient } from "@markpdf/svelte";
import type { RequestHandler } from "./$types";

const client = new MarkpdfClient({ apiKey: MARKPDF_API_KEY });

export const POST: RequestHandler = async ({ request }) => {
  const form = await request.formData();
  const file = form.get("file") as File;

  const markdown = await client.convertFile(file, { filename: file.name, mode: "fast" });

  return new Response(markdown, { headers: { "content-type": "text/markdown" } });
};

And from the client component, upload the file to your own endpoint instead of directly to markpdf:

<script lang="ts">
  let status = "idle";
  let markdown = "";

  async function onFile(e: Event) {
    const file = (e.target as { files?: FileList | null }).files?.[0];
    if (!file) return;

    status = "uploading";
    const form = new FormData();
    form.append("file", file);

    const res = await fetch("/api/convert", { method: "POST", body: form });
    markdown = await res.text();
    status = "success";
  }
</script>

<input type="file" on:change={onFile} />

With this pattern, createConvertStore does not apply on the client side (there is no point in calling it against your own endpoint unless you also implement the same progress contract). If you need actual upload progress to your own endpoint, implement the same XMLHttpRequest pattern that createConvertStore uses internally, pointing to /api/convert instead of markpdf’s API.

Form Actions as an alternative to `+server.ts`

If the upload form lives on the same page, a Form Action (+page.server.ts) is an alternative without needing a separate endpoint:

src/routes/convert/+page.server.ts

import { MARKPDF_API_KEY } from "$env/static/private";
import { MarkpdfClient } from "@markpdf/svelte";
import type { Actions } from "./$types";

const client = new MarkpdfClient({ apiKey: MARKPDF_API_KEY });

export const actions: Actions = {
  default: async ({ request }) => {
    const form = await request.formData();
    const file = form.get("file") as File;
    const markdown = await client.convertFile(file, { filename: file.name, mode: "fast" });
    return { markdown };
  },
};

Use Form Actions when the form is traditional (full page submission, progressive enhancement with use:enhance). Use a +server.ts endpoint when you need upload progress via XMLHttpRequest/fetch from client JS, or when another service needs to call your proxy directly.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Framework Guide: SvelteKit

Framework guide: SvelteKit

Public vs private environment variables

Pattern A: public key on the client (prototypes, internal tools)

Pattern B (recommended): proxy with `+server.ts`

Form Actions as an alternative to `+server.ts`

​Framework guide: SvelteKit

​Public vs private environment variables

​Pattern A: public key on the client (prototypes, internal tools)

​Pattern B (recommended): proxy with +server.ts

​Form Actions as an alternative to +server.ts

Framework guide: SvelteKit

Public vs private environment variables

Pattern A: public key on the client (prototypes, internal tools)

Pattern B (recommended): proxy with `+server.ts`

Form Actions as an alternative to `+server.ts`