Quickstart

1. Wrap your app with `MarkpdfProvider`

App.tsx

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`

UploadForm.tsx

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)

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 methods (convertFile, convertFromUrl, convertStream, pdfIndex, getJob) are available, with no progress report.

Python

Node.js / TypeScript

C++

Next.js

Angular

React

React Native

Svelte

Bun

Flutter

Java

Kotlin

Quickstart

Quickstart

1. Wrap your app with `MarkpdfProvider`

2. Upload a file with `useConvertFile`

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

Siguiente paso

​Quickstart

​1. Wrap your app with MarkpdfProvider

​2. Upload a file with useConvertFile

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

​Siguiente paso

Quickstart

1. Wrap your app with `MarkpdfProvider`

2. Upload a file with `useConvertFile`

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

Siguiente paso