> ## 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.

# Quickstart

> Your first conversion form with @markpdf/react in less than 20 lines.

# Quickstart

## 1. Wrap your app with `MarkpdfProvider`

```tsx App.tsx theme={null}
import { MarkpdfProvider } from "@markpdf/react";

export default function App() {
  return (
    <MarkpdfProvider apiKey={import.meta.env.VITE_MARKPDF_API_KEY}>
      <UploadForm />
    </MarkpdfProvider>
  );
}
```

`MarkpdfProvider` creates a shared `MarkpdfClient` and exposes it to the entire tree via context.

## 2. Upload a file with `useConvertFile`

```tsx UploadForm.tsx theme={null}
import { useConvertFile } from "@markpdf/react";

export function UploadForm() {
  const { convert, status, progress, markdown, error } = useConvertFile();

  return (
    <div>
      <input
        type="file"
        accept="application/pdf"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) convert(file, { mode: "fast" });
        }}
      />

      {status === "uploading" && <progress value={progress} max={100} />}
      {status === "converting" && <p>Convirtiendo…</p>}
      {status === "error" && <p>Error: {error?.message}</p>}
      {markdown && <pre>{markdown}</pre>}
    </div>
  );
}
```

`useConvertFile` reports upload progress in real time because it uses `XMLHttpRequest` internally (`fetch` does not expose upload progress events).

## 3. Direct access to the client (without progress hook)

```tsx theme={null}
import { useMarkpdf } from "@markpdf/react";

function DownloadButton({ url }: { url: string }) {
  const client = useMarkpdf();

  const handleClick = async () => {
    const markdown = await client.convertFromUrl(url, { mode: "fast" });
    console.log(markdown);
  };

  return <button onClick={handleClick}>Convertir</button>;
}
```

`useMarkpdf()` gives you the raw `MarkpdfClient` — all [`@markpdf/sdk`](/docs/sdks/nodejs/reference) methods (`convertFile`, `convertFromUrl`, `convertStream`, `pdfIndex`, `getJob`) are available, with no progress report.

## Siguiente paso

* [Referencia completa](/docs/sdks/react/reference)
* [Framework Guide](/docs/sdks/react/framework-guide)
* [Streaming and asynchronous jobs](/docs/sdks/react/streaming-and-async)