tldraw SDK สำหรับสร้างแอป Infinite Canvas ใน Reacttldraw SDK for Building Infinite Canvas Apps in React
tldraw เป็น SDK สำหรับสร้างแอปพลิเคชันที่มี infinite canvas รองรับ multi-user collaboration และการขยายความสามารถโดยใช้ React
tldraw is an SDK for building infinite canvas applications supporting multi-user collaboration and extensibility using React.
ไว้ทำอะไร
tldraw ถูกออกแบบมาเพื่อเป็นเครื่องมือในการสร้างแอปพลิเคชันที่ใช้ infinite canvas เหมาะสำหรับการสร้าง whiteboard ที่รองรับการทำงานร่วมกันแบบเรียลไทม์ สามารถเพิ่มเครื่องมือและฟังก์ชันการทำงานผ่าน API และการฝัง DOM elements ภายนอกได้
ทำงานอย่างไร
tldraw ใช้ระบบ component ของ React โดยมี component หลักคือ `<Tldraw />` บรรจุในไฟล์และโฟลเดอร์ต่างๆ ตัวอย่างเช่น 'packages/editor' ที่มี API สำหรับการแก้ไขและจัดการไฟล์, 'packages/sync' สนับสนุนการทำงานร่วมในแบบเรียลไทม์ ส่วนของ AI agents ยังสนับสนุนการใช้ LLM ในพื้นที่ canvas ผ่านการผูก event hooks
โครงสร้างโค้ด
- packages/editor — API สำหรับแก้ไข
- packages/sync — รองรับการทำงานร่วมแบบเรียลไทม์
- apps/examples — ตัวอย่างแอปพลิเคชัน
- internal/scripts — สคริปต์สำหรับการพัฒนาและทดสอบ
เริ่มใช้งาน
npm i tldrawเหมาะกับงานแบบไหน
- ใช้สร้างแอป whiteboard สำหรับการวาดภาพและการทำงานร่วมกันออนไลน์
- การสร้างโปรเจ็กต์เว็บที่ต้องการการฝัง DOM element, รูปร่าง, และ UI component
- การพัฒนาเครื่องมือแชทผ่าน AI ที่ใช้ canvas สำหรับการสื่อสาร
ข้อควรรู้
- การใช้งานใน production ต้องมี license key
- ไม่รับการ contribute จากภายนอกขณะนี้
What it is for
tldraw is designed to be a tool for creating applications with infinite canvas, ideal for building whiteboards that support real-time collaboration. It allows adding tools and functionalities through APIs and can embed external DOM elements.
How it works
tldraw leverages React’s component system with a main component `<Tldraw />` included in several files and directories, such as 'packages/editor' for editing and managing files, and 'packages/sync' supporting real-time collaboration. AI agents are supported to use LLM within the canvas through event hooks.
Code structure
- packages/editor — API for editing
- packages/sync — Real-time collaboration support
- apps/examples — Example applications
- internal/scripts — Scripts for development and testing
Getting started
npm i tldrawGood fit for
- Create whiteboard apps for drawing and online collaboration
- Developing web projects that require embedding DOM elements, shapes, and UI components
- Develop AI chat tools that use canvas for communication
Things to know
- Production usage requires a license key
- Not accepting external contributions at this time
บทวิเคราะห์นี้สร้างจาก README และโค้ดของ repo โดย AI ของ Oneable — ตรวจสอบ license และเอกสารต้นทางก่อนนำไปใช้งานจริงThis breakdown was generated from the repository's README and code by Oneable's AI — check the license and upstream docs before using it in production.