Skip to content

krapie/yorkie-tldraw

Repository files navigation

yorkie-tldraw

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

yorkie-tldraw screenshot

Table of Contents

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

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.

Prerequisites

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

Instructions

# 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

Development

Project Components

Project Structure

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)

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

Deployment

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

Roadmap

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

Phase 2

  • assets: enable asset (image/video) feature
    • setting storage bucket for media files (ex: AWS S3)
      • setting up presigned url with lambda (optional)
  • optimization: room loading performance improvement
  • undo/redo: undoManager with Yorkie history API (not implemented)

Phase 3

  • implement creative interaction features in tldraw
    • collaborative reaction