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

# Inicio rápido

> Tu primer formulario de conversión con @markpdf/react en menos de 20 líneas.

# Inicio rápido

## 1. Envuelve tu aplicación con `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` crea un `MarkpdfClient` compartido y lo expone a todo el árbol a través del contexto.

## 2. Sube un archivo con `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` informa el progreso de la carga en tiempo real porque usa `XMLHttpRequest` internamente (`fetch` no expone los eventos de progreso de la carga).

## 3. Acceso directo al cliente (sin gancho de progreso)

```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()` le proporciona el `MarkpdfClient` sin formato: todos los métodos [`@markpdf/sdk`](/docs/public/es/sdks/nodejs/reference) (`convertFile`, `convertFromUrl`, `convertStream`, `pdfIndex`, `getJob`) están disponibles, sin informe de progreso.

## Siguiente paso

* [Referencia completa](/docs/public/es/sdks/react/reference)
* [Guía marco](/docs/public/es/sdks/react/framework-guide)
* [Trabajos en streaming y asincrónicos](/docs/public/es/sdks/react/streaming-and-async)