A real-time collaboration whiteboard demo project for yorkie-js-sdk using tldraw

Demo link: http://yorkie.rubatoo.com/

Building real-time collaboration whiteboard using yorkie & tldraw (demo) Youtube link (KOR): https://youtu.be/2FH63ldefPw

yorkie-tldraw screenshot

Table of Contents

  • Getting Started
    • Prerequisites
    • Instructions
  • Development
    • Project Requirements
    • Project Structure
    • About Yorkie
    • Deployment
  • Roadmap
  • Uploads

Getting Started

If you are new to yorkie or tldraw and you just want to play around, just clone this repository and follow instructions bellow.


  • yarn or npm for client package manager
  • Docker, Docker Compose for server application manager


# clone repository
git clone https://github.com/Krapi0314/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

# start project and play around!
yarn start


Project Components

Project Structure


  • 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)


  • docker-compose
    • envoy(gRPC web Proxy), yorkie server(with gRPC Server), mongoDB/in-memory DB (database)

About Yorkie

Yorkie is an open source document store for building collaborative editing applications. Yorkie uses JSON-like documents(CRDT) with optional types.

Yorkie references


http://yorkie.rubatoo.com/ deployment structure are shown below

 ㄴ yorkie.rubatoo.com              - [Github, gh-pages]  # for serving static pages
 ㄴ (domain name not configured)    - [AWS ALB]  # api gateway with load balancing
  ㄴ envoy - yorkie server - memDB  - [AWS EC2]  # ec2 instance for api server


Phase 1

  • 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
  • client customization: customize tldraw core: cursor with name

Phase 2

  • enable asset (image/video) feature
    • setting storage bucket for media files (ex: AWS S3)
      • setting up presigned url with lambda (optional)
  • undoManager with Yorkie history API (not implemented)

Phase 3

  • implement creative interaction features in tldraw
    • collaborative reaction



  • Peer awareness enhanced: Cursor with name implemented


  • Yorkie server stabilized: Yorkie server cluster mode on AWS
  • User experience enhanced: Client loading bar on Yorkie setup
  • User experience enhanced: Throttle on onChangePage() callback


  • tldraw + yorkie Step 1: yorkie doc update TDType
  • tldraw + yorkie Step 2: yorkie presence with peer awareness


View Github