{"id":13608955,"url":"https://github.com/krapie/yorkie-tldraw","last_synced_at":"2025-04-12T17:33:26.622Z","repository":{"id":52184522,"uuid":"520817113","full_name":"krapie/yorkie-tldraw","owner":"krapie","description":"tldraw multiplayer project using yorkie","archived":false,"fork":false,"pushed_at":"2025-03-07T11:49:24.000Z","size":8459,"stargazers_count":29,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-07T12:38:22.533Z","etag":null,"topics":["aws","crdts","docker","react","real-time-collaborative-whiteboard"],"latest_commit_sha":null,"homepage":"https://yorkie.dev/examples/tldraw","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krapie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-08-03T09:29:52.000Z","updated_at":"2025-03-07T11:49:28.000Z","dependencies_parsed_at":"2024-01-14T05:07:06.949Z","dependency_job_id":"fcb1a089-2f6c-4bea-b555-36c8cb0ecd20","html_url":"https://github.com/krapie/yorkie-tldraw","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krapie%2Fyorkie-tldraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krapie%2Fyorkie-tldraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krapie%2Fyorkie-tldraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krapie%2Fyorkie-tldraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krapie","download_url":"https://codeload.github.com/krapie/yorkie-tldraw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605443,"owners_count":21132172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","crdts","docker","react","real-time-collaborative-whiteboard"],"created_at":"2024-08-01T19:01:31.286Z","updated_at":"2025-04-12T17:33:21.614Z","avatar_url":"https://github.com/krapie.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# yorkie-tldraw\n\n\u003e This project is now maintained in [yorkie-js-sdk](https://github.com/yorkie-team/yorkie-js-sdk/tree/main/examples/react-tldraw). Check out the demo [here](https://yorkie.dev/examples/tldraw).\n\nA real-time collaboration whiteboard demo project for [yorkie-js-sdk](https://github.com/yorkie-team/yorkie-js-sdk) using [tldraw](https://github.com/tldraw/tldraw)\n\nBuilding real-time collaboration whiteboard using yorkie \u0026 tldraw (demo) Youtube link (KOR): https://youtu.be/2FH63ldefPw\n\n![yorkie-tldraw screenshot](./screenshot/screenshot.png)\n\n## Table of Contents\n\n- Getting Started\n  - Prerequisites\n  - Instructions\n- Development\n  - Project Requirements\n  - Project Structure\n  - About Yorkie\n  - Deployment\n- Roadmap\n\n## Getting Started\n\nIf you are new to yorkie or tldraw and you just want to play around, just clone this repository and follow instructions bellow.\n\n### Prerequisites\n\n- `yarn` or `npm` for client package manager\n- `Docker`, `Docker Compose` for server application manager\n\n### Instructions\n\n```bash\n# clone repository\ngit clone https://github.com/krapie/yorkie-tldraw.git\n\n# change to project directory\ncd yorkie-tldraw\n\n# change to docker directory\ncd docker\n\n# start local server with docker compose\ndocker-compose up --build -d\n\n# go back to project root directory\ncd ..\n\n# install client modules\nyarn\n\n# start project and play around!\nyarn start\n```\n\n## Development\n\n### Project Components\n\n- `React.js` for project base framework\n  - For more information, follow: [https://create-react-app.dev/docs/getting-started/](https://create-react-app.dev/docs/getting-started/)\n- `@tldraw/tldraw` for React based canvas/svg whiteboard\n  - For more information, follow: [https://github.com/tldraw/tldraw](https://github.com/tldraw/tldraw)\n- `yorkie-js-sdk` for real-time collaboration sdk for web clients\n  - For more information, follow: [https://github.com/yorkie-team/yorkie-js-sdk](https://github.com/yorkie-team/yorkie-js-sdk)\n- `yorkie server` for server between yorkie clients\n  - For more information, follow: [https://yorkie.dev/docs/server-for-web](https://yorkie.dev/docs/server-for-web)\n\n### Project Structure\n\n**Client**\n\n- `src`\n  - `multiplayer`\n    - `useMultiplayerState.ts` (mutliplayer state using yorkie and tldraw event callbacks)\n  - `App.tsx` (React project entry point which contains tldraw editor component customed by useMultiplayerState.ts)\n\n**Server**\n\n- `docker-compose`\n  - `envoy`(gRPC web Proxy), `yorkie server`(with gRPC Server), `mongoDB/in-memory DB` (database)\n\n### About Yorkie\n\nYorkie is an open source document store for building collaborative editing applications. Yorkie uses JSON-like documents(CRDT) with optional types.\n\nYorkie references\n\n- Yorkie Github: [https://github.com/yorkie-team/yorkie](https://github.com/yorkie-team/yorkie)\n- Yorkie Docs: [https://yorkie.dev/](https://yorkie.dev/)\n\n### Deployment\n\n[https://demo.asyncrum.com/](https://demo.asyncrum.com/) deployment structure are shown below\n\n```\n[client]\n ㄴ demo.asyncrum.com   - [Github, gh-pages]  # for serving static pages\n[server]\n ㄴ api.yorkie.dev      - [EKS]               # for serving API\n```\n\n## Roadmap\n\n### **Phase 1**\n\n- [x] tldraw + yorkie Step 1: yorkie doc update TDType\n- [x] tldraw + yorkie Step 2: yorkie presence with peer awareness\n- [x] yorkie server stablization: yorkie clustering server on AWS using LB, ec2s, and etcd\n- [x] client optimization: loading bar, throttle on overheaded callbacks\n- [x] customize tldraw core: cursor with name\n\n### **Phase 2**\n\n- [x] assets: enable asset (image/video) feature\n  - [x] setting storage bucket for media files (ex: AWS S3)\n    - [x] setting up presigned url with lambda (optional)\n- [x] optimization: room loading performance improvement\n- [ ] undo/redo: undoManager with Yorkie history API (not implemented)\n\n### **Phase 3**\n\n- [ ] implement creative interaction features in tldraw\n  - [ ] collaborative reaction\n  - [ ] …\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrapie%2Fyorkie-tldraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrapie%2Fyorkie-tldraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrapie%2Fyorkie-tldraw/lists"}