This project is now maintained in yorkie-js-sdk. Check out the demo here.
A real-time collaboration whiteboard demo project for yorkie-js-sdk using tldraw
Building real-time collaboration whiteboard using yorkie & tldraw (demo) Youtube link (KOR): https://youtu.be/2FH63ldefPw
- Getting Started
- Prerequisites
- Instructions
- Development
- Project Requirements
- Project Structure
- About Yorkie
- Deployment
- Roadmap
If you are new to yorkie or tldraw and you just want to play around, just clone this repository and follow instructions bellow.
yarn
ornpm
for client package managerDocker
,Docker Compose
for server application manager
# clone repository
git clone https://github.com/krapie/yorkie-tldraw.git
# change to project directory
cd yorkie-tldraw
# change to docker directory
cd docker
# start local server with docker compose
docker-compose up --build -d
# go back to project root directory
cd ..
# install client modules
yarn
# start project and play around!
yarn start
React.js
for project base framework- For more information, follow: https://create-react-app.dev/docs/getting-started/
@tldraw/tldraw
for React based canvas/svg whiteboard- For more information, follow: https://github.com/tldraw/tldraw
yorkie-js-sdk
for real-time collaboration sdk for web clients- For more information, follow: https://github.com/yorkie-team/yorkie-js-sdk
yorkie server
for server between yorkie clients- For more information, follow: https://yorkie.dev/docs/server-for-web
Client
src
multiplayer
useMultiplayerState.ts
(mutliplayer state using yorkie and tldraw event callbacks)
App.tsx
(React project entry point which contains tldraw editor component customed by useMultiplayerState.ts)
Server
docker-compose
envoy
(gRPC web Proxy),yorkie server
(with gRPC Server),mongoDB/in-memory DB
(database)
Yorkie is an open source document store for building collaborative editing applications. Yorkie uses JSON-like documents(CRDT) with optional types.
Yorkie references
- Yorkie Github: https://github.com/yorkie-team/yorkie
- Yorkie Docs: https://yorkie.dev/
https://demo.asyncrum.com/ deployment structure are shown below
[client]
ㄴ demo.asyncrum.com - [Github, gh-pages] # for serving static pages
[server]
ㄴ api.yorkie.dev - [EKS] # for serving API
- tldraw + yorkie Step 1: yorkie doc update TDType
- tldraw + yorkie Step 2: yorkie presence with peer awareness
- yorkie server stablization: yorkie clustering server on AWS using LB, ec2s, and etcd
- client optimization: loading bar, throttle on overheaded callbacks
- customize tldraw core: cursor with name
- assets: enable asset (image/video) feature
- setting storage bucket for media files (ex: AWS S3)
- setting up presigned url with lambda (optional)
- setting storage bucket for media files (ex: AWS S3)
- optimization: room loading performance improvement
- undo/redo: undoManager with Yorkie history API (not implemented)
- implement creative interaction features in tldraw
- collaborative reaction
- …