Componente React para editor de PDF
¿Buscas un editor de PDF para React? La mayoría de las opciones son visores de bajo nivel que requieren que construyas la interfaz de edición tú mismo. SimplePDF te ofrece un editor completo – texto, firmas, llenado de formularios, anotaciones – como un único componente React. Sin lías con PDF.js, sin renderizado de canvas, sin ensamblaje de barras de herramientas.
Instalar y usar
npm install @simplepdf/react-embed-pdfimport { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF
companyIdentifier="yourcompany"
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>import { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF companyIdentifier="yourcompany">
<a href="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf">
Open PDF editor
</a>
</EmbedPDF>Control programático
Usa el hook useEmbed() para controlar el editor desde tu código: enviar documentos, navegar por páginas, seleccionar herramientas, detectar campos de formulario y extraer contenido.
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';
const Editor = () => {
const { embedRef, actions } = useEmbed();
return (
<>
<button onClick={() => actions.submit({
downloadCopyOnDevice: false
})}>
Submit
</button>
<button onClick={() => actions.selectTool('SIGNATURE')}>
Sign
</button>
<button onClick={() => actions.detectFields()}>
Detect Fields
</button>
<EmbedPDF
companyIdentifier="yourcompany"
ref={embedRef}
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>
</>
);
};Lo que tus usuarios pueden hacer
Rellenar formularios PDF
Detecta campos de formulario automáticamente. Los usuarios rellenan entradas de texto, casillas de verificación, listas desplegables y botones de opción de forma nativa.
Firmar documentos
Dibujar, escribir o subir una firma. Funciona en escritorio y móvil.
Añadir texto y anotaciones
Texto libre, resaltados, sellos e imágenes. Se renderizan directamente en el PDF.
Enviar a tu backend
Los PDFs completados se envían a través de webhook a tu API, o se almacenan en tu bucket de S3/Azure.
¿Por qué SimplePDF en vez de PDF.js o react-pdf?
Editor completo, no un visor
PDF.js y react-pdf son visores. Para editar, necesitas construir entradas de formulario, paneles de firma y capas de anotación tú mismo. SimplePDF incluye todo esto.
Listo para marca blanca
Tu logo, tus colores, tu dominio. Configura el branding desde tu panel y usa el control programático para personalizar completamente la experiencia de edición con tu marca.
Sin servidor necesario
Todo se ejecuta en el navegador. Sin subidas de archivos a tu servidor, sin backend de procesamiento de PDF que mantener.
Producto mantenido
Tú no mantienes el editor. Nosotros nos encargamos de los errores de renderizado, la compatibilidad con navegadores y los casos especiales de la especificación PDF.
SimplePDF is a great tool that was very easy to implement into our web portal. They have straight forward and clear documentation on setting it up and then plenty of resources on how to utilize it even further to fit your development environment.
Funciona con tu stack
El componente React funciona con Next.js (App Router y Pages Router), Remix, Vite y Create React App. Se renderiza como un iframe, por lo que no hay conflictos de CSS ni preocupaciones por el tamaño del bundle.
¿Tienes alguna pregunta?
¿Cómo obtengo el PDF rellenado?
Configura un webhook para recibir el PDF completado en tu endpoint de API. O usa bring-your-own-storage: S3, Azure Blob Storage o SharePoint para recibirlo directamente en tu bucket.
¿El componente React es gratuito?
El componente es gratuito y de código abierto (MIT). El plan gratuito incluye edición completa con branding de SimplePDF. Los planes de pago eliminan el branding y añaden webhooks, BYOS y marca blanca.
¿Funciona con Next.js?
Sí. El componente funciona tanto con el App Router como con el Pages Router. Se renderiza como un iframe, por lo que no hay problemas de hidratación SSR.
¿Puedo cargar cualquier PDF?
Sí. Pasa una documentURL o deja que los usuarios suban desde su dispositivo. El PDF se procesa completamente en el navegador – nunca toca tu servidor ni el nuestro.
¿Qué acciones programáticas están disponibles?
El hook useEmbed() te proporciona: submit(), goTo({ page }), selectTool(), detectFields(), removeFields() y getDocumentContent(). Todas devuelven una Promise con un resultado tipado.