Pagina oficial: https://tldraw.com

Que es tldraw?

tldraw es una pizarra colaborativa instantanea y, al mismo tiempo, un SDK para construir aplicaciones de lienzo infinito en React. Su propuesta combina una experiencia lista para usar con una base tecnica pensada para productos que necesitan dibujo, colaboracion y personalizacion.

Caracteristicas principales:

• Ofrece una pizarra colaborativa en tiempo real con edicion simultanea y cursores en vivo.
• El SDK permite crear aplicaciones de canvas infinito con React y TypeScript sin empezar desde cero.
• Incluye herramientas ya resueltas como formas, texto, flechas, deshacer, rehacer y sincronizacion.
• Se puede extender con formas, interacciones y componentes personalizados para adaptar la interfaz a cada producto.

Integracion de tldraw en VS Code

Para integrar tldraw en VS Code, se puede crear una extension que utilice el SDK de tldraw para mostrar una pizarra colaborativa dentro del editor. Esto permitiria a los desarrolladores dibujar diagramas, tomar notas visuales o planificar ideas sin salir de su entorno de desarrollo. La extension podria incluir comandos para abrir la pizarra, compartirla con otros colaboradores y guardar el contenido como parte del proyecto. Ademas, se podria sincronizar con archivos de codigo para mantener el contexto entre el dibujo y el desarrollo, creando una experiencia fluida y visual dentro de VS Code.

Instalar la extension:

1. Abre VS Code y ve a la sección de extensiones.
2. Busca “tldraw” y selecciona la extension oficial.
3. Haz clic en “Instalar” para agregar la extension a tu editor.

Usar la extension:

1. Una vez instalada, puedes abrir la pizarra tldraw desde la paleta de comandos (Ctrl+Shift+P) buscando “tldraw: Open Whiteboard”.
2. Esto abrirá una nueva pestaña con la pizarra colaborativa donde podrás dibujar, agregar formas, texto y compartirla con otros colaboradores en tiempo real.
3. Puedes guardar el contenido de la pizarra como parte de tu proyecto o exportarlo para usarlo en otros contextos.
4. Otro modo es crear un fichero con extensión [.tldraw | .tdlr] dentro de tu proyecto, lo que permitirá abrirlo directamente como una pizarra editable con el contenido guardado.