Suika Graphics Editor, an open-source vector graphics editor based on Canvas, similar to Figma.
suika 图形编辑器，一款开源的基于 Canvas 实现的矢量图形编辑器，类似 Figma。
English | 中文
- Creation and editing of graphics, including: rounded rectangle, ellipse, line, path, text, polygon, star;
- Path editing using the pen tool, adjusting control points;
- Support tools: selection tool, graphics drawing tools, image tool, pen tool, canvas tool, hand tool;
- Infinite canvas, with zoom and pan capabilities;
- History, with undo and redo;
- i18n;
- Snap support, currently supports pixel grid snap and graphics guide snap;
- Keyboard shortcuts;
- Copy and paste, supports cross-canvas copy and paste, alignment, and arrangement;
- Layers panel, properties panel;
- Group, Frame;
- Multi-user collaborative editing (requires backend implementation);
- Ruler;
- Import and export JSON data;
- User settings;
WIP.
To run the project, you need to install Node.js (it is recommended to use the LTS version from the official website), then use Node.js to install the PNPM package manager:
npm install -g pnpmpnpm installpnpm run devpnpm buildThe target output folder is apps/suika/build.
The frontend implementation logic for collaboration is located in the @suika/suika-multiplayer package. This package copies @suika/suika (pure client-side) and adds multi-user collaboration logic, such as multiple cursors, and calls some interfaces, like getting the drawing name and current user information.
Multi-user collaboration is implemented using yjs and the hocuspocus library (a further wrapper around yjs).
If you want to implement multi-user collaboration, you need to implement backend RESTful API services that this package uses, and provide WebSocket services based on hocuspocus.
Additionally, you need to implement a frontend workspace project to manage drawings, supporting login, registration, creating drawings, opening drawings, deleting drawings, and authorization.
