A collaborative virtual whiteboard tool for sketching diagrams.
- Selection of tools - rectangle, ellipse, arrow, free-draw, text.
- Customizable shape style - color, size, fill, opacity, line style, animation.
- Shapes library.
- Live collaboration.
- Zoom and panning.
- History undo / redo.
- Export to PNG / JSON.
- Offline support.
- Dark Mode.
- Node.js:
>=18.17.0 - pnpm:
>=8.6.12
Clone the repository to your local machine.
Install dependencies:
pnpm installThe docker-compose file sets up a posgresql database and the backend for you.
Alternatively you can also set up your own postgresql database, you will need to set
environment variables for it to work.
- docker-engine
>=24and buildkit. - docker-compose v2.
docker compose build
docker compose up
docker compose downMake sure to build packages before starting the development mode:
pnpm packages:buildRun client in development mode:
pnpm dev:clientRun server in development mode (if you don't use docker-compose):
pnpm dev:server├── apps
│ ├── client (react codebase)
│ └── server (express api)
└── packages
├── eslint-config-bases (eslint configs)
└── shared (utils, types, schemas, themes)
Some handy scripts that can be run from any directory.
| Name | Description |
|---|---|
pnpm dev:app |
Run server and client in dev mode with --stream flag |
pnpm dev:client |
Run react client in dev mode |
pnpm dev:server |
Run express server in dev mode |
pnpm g:build |
Run build in all workspaces |
pnpm g:typecheck |
Run typechecks in all workspaces |
pnpm g:lint |
Display linter issues in all workspaces |
pnpm g:fix-all-files |
Attempt to run linter auto-fix in all workspaces |
pnpm packages:build |
Build all packages workspaces |
pnpm packages:lint |
Display packages linter issues |
pnpm packages:typecheck |
Run packages typechecks |
Awesome open-source packages used in this project: