> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos

> Real cases with @markpdf/svelte: input file with progress, page range, RAG and large PDFs.

# Ejemplos

## Form with progress bar

```svelte theme={null}
<script lang="ts">
  import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";

  const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
  const convertStore = createConvertStore(client);

  function onFile(e: Event) {
    const file = (e.target as { files?: FileList | null }).files?.[0];
    if (file) convertStore.convert(file, { mode: "fast" });
  }
</script>

<input type="file" accept="application/pdf" on:change={onFile} disabled={$convertStore.status === "uploading"} />

{#if $convertStore.status === "uploading" || $convertStore.status === "converting"}
  <progress value={$convertStore.status === "uploading" ? $convertStore.progress : 100} max={100} />
{/if}

{#if $convertStore.error}
  <p role="alert">{$convertStore.error.message}</p>
{/if}

{#if $convertStore.markdown}
  <pre>{$convertStore.markdown}</pre>
  <button on:click={() => convertStore.reset()}>Convertir otro</button>
{/if}
```

## Drag-and-drop

```svelte theme={null}
<script lang="ts">
  import { MarkpdfClient, createConvertStore } from "@markpdf/svelte";

  const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
  const convertStore = createConvertStore(client);
  let dragging = false;

  function onDrop(e: DragEvent) {
    e.preventDefault();
    dragging = false;
    const file = e.dataTransfer?.files[0];
    if (file) convertStore.convert(file, { mode: "fast" });
  }
</script>

<div
  role="button"
  tabindex="0"
  on:dragover|preventDefault={() => (dragging = true)}
  on:dragleave={() => (dragging = false)}
  on:drop={onDrop}
  class:dragging
>
  {#if $convertStore.status === "idle"}Suelta un PDF aquí{/if}
  {#if $convertStore.markdown}<pre>{$convertStore.markdown}</pre>{/if}
</div>

<style>
  div { border: 2px dashed #ccc; padding: 32px; }
  div.dragging { border-color: #14b8a6; }
</style>
```

## Page range of a large PDF

```ts theme={null}
convertStore.convert(file, { mode: "fast", pages: "1-20" });
```

## Metadata instead of just Markdown

```ts theme={null}
await convertStore.convert(file, { responseFormat: "json" });
// $convertStore.json.engine, $convertStore.json.tokenSavedEstimate, ...
```

## Pipeline RAG with `pdfIndex`

```ts theme={null}
import { MarkpdfClient } from "@markpdf/svelte";

const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });
const PDF = "https://bucket.example.com/informe-anual.pdf?sig=...";

const spine = await client.pdfIndex(PDF);
const target = spine.sections.find((s) => s.text.includes("Resultados"));

if (target) {
  const markdown = await client.convertFromUrl(PDF, {
    pages: `${target.page}-${spine.pageCount}`,
    mode: "fast",
  });
}
```

See [PDF Index for AI agents](/docs/concepts/pdf-index-for-ai-agents).

## SvelteKit: upload via your own endpoint (key protected)

```ts src/routes/api/convert/+server.ts theme={null}
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" } });
};
```

See [Framework Guide](/docs/sdks/svelte/framework-guide) for the full detail of this pattern.

<Warning>
  Examples that use `createConvertStore` directly in a component call API from the browser — the API key remains visible in the bundle. Use the proprietary endpoint pattern above in public-facing production.
</Warning>