Repolode
Enviar
quickdrawjs

quickdrawjs/quickdraw

SDK de pizarra con lienzo infinito, con licencia MIT, para apps de React, React Native y JavaScript, presentado como alternativa gratuita a tldraw.

Alternativa open source a:tldraw

Ver en GitHubSitio web
Estrellas
555
Forks
45
Issues abiertos
7
Último commit
anteayer

¿Qué es?

Quickdraw es un SDK de pizarra que permite integrar una superficie de dibujo en una app web o móvil. Incluye tres paquetes: un motor independiente de frameworks con una barra de herramientas flotante, un componente de React con hooks y un componente de React Native que integra el motor en un WebView mediante un puente tipado. El núcleo no tiene dependencias en tiempo de ejecución y funciona como ESM estándar en navegadores modernos, sin necesidad de un paso de compilación.

La pizarra admite trazos a mano alzada sensibles a la presión, un resaltador, formas con estilo de dibujo a mano, flechas, texto, notas adhesivas, imágenes y un puntero láser. Incluye selección con marco y desplazamiento mediante el teclado, desplazamiento y zoom en un lienzo infinito, rechazo de la palma al usar un lápiz, deshacer/rehacer agrupados por gesto, temas claros y oscuros, varios fondos de cuadrícula y exportación a PNG.

El estado del documento es un mapa plano de registros inmutables, y cada cambio emite una diferencia serializable en JSON. Estas diferencias permiten guardar instantáneas, mantener el historial de deshacer y sincronizar en tiempo real a través del transporte que elijas. No incluye un servidor propio para multijugador.

Funciones clave

  • 01Tinta de trazo libre sensible a la presión y herramienta de resaltador
  • 02Formas, flechas, texto, notas adhesivas e inserción de imágenes
  • 03Lienzo infinito con gestos de desplazamiento, zoom y pellizco
  • 04Deshacer/rehacer agrupados por gesto y exportación a PNG
  • 05Diferencias compatibles con JSON para guardar datos y sincronizarlos en tiempo real

Casos de uso

  • Añadir una pizarra o una función de dibujo a mano alzada a una app web de React
  • Integrar un lienzo de dibujo en una app de Expo o React Native mediante WebView
  • Crear una herramienta colaborativa para diagramas que sincronice las diferencias del documento a través de tu propio servidor
  • Usar una pizarra lista para integrar en una página HTML sin necesidad de un paso de compilación

Inicio rápido

  1. 1

    Instala el paquete de React

    npm install @quickdrawjs/react
  2. 2

    Importa la hoja de estilos y renderiza el componente Quickdraw en tu aplicación

Antes de usarlo

  • Según el README, el proyecto aún está en una fase inicial y no cuenta con servidor multijugador propio, capas, fotogramas ni texto enriquecido.
  • La marca de agua «Made with Quickdraw» se muestra de forma predeterminada. Para desactivarla, establece watermark={false}.

Temas

#whiteboard#canvas#drawing#react#react-native#javascript#sdk#collaboration#collaborative-whiteboard#diagram

Preguntas frecuentes

¿Qué es quickdraw?
SDK de pizarra con lienzo infinito, con licencia MIT, para apps de React, React Native y JavaScript, presentado como alternativa gratuita a tldraw. Quickdraw es un SDK de pizarra que permite integrar una superficie de dibujo en una app web o móvil. Incluye tres paquetes: un motor independiente de frameworks con una barra de herramientas flotante, un componente de React con hooks y un componente de React Native que integra el motor en un WebView mediante un puente tipado. El núcleo no tiene dependencias en tiempo de ejecución y funciona como ESM estándar en navegadores modernos, sin necesidad de un paso de compilación.
¿quickdraw es gratuito? ¿Qué licencia tiene?
quickdraw es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿quickdraw sigue mantenido?
Mantenimiento activo. El último commit de quickdraw fue el 18 oct 2026.
¿Para qué puedo usar quickdraw?
Añadir una pizarra o una función de dibujo a mano alzada a una app web de React Integrar un lienzo de dibujo en una app de Expo o React Native mediante WebView Crear una herramienta colaborativa para diagramas que sincronice las diferencias del documento a través de tu propio servidor Usar una pizarra lista para integrar en una página HTML sin necesidad de un paso de compilación
¿Cómo se instala quickdraw?
Instala el paquete de React: npm install @quickdrawjs/react Importa la hoja de estilos y renderiza el componente Quickdraw en tu aplicación
¿Dónde consigo quickdraw?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/quickdrawjs/quickdraw

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados