# Suika is a Figma-style vector editor built on the browser Canvas

> Suika is an open source vector graphics editor that runs entirely in the browser on the Canvas API, with the tool set a design tool needs, a pen tool with editable control points, an infinite canvas, layers and properties panels, snapping, and JSON and SVG import and export. The repository is a pnpm monorepo, and the collaboration feature is a separate package you have to host yourself.

**F-star/suika** — A Web Graphics Editor Built with Canvas. 基于 Canvas 实现的图形编辑器

- Repository: https://github.com/F-star/suika
- Website: https://f-star.github.io/suika/
- Stars: 975 · Forks: 128
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/f-star-suika

## An editor in the browser, shaped like Figma

Suika is described as an open source vector graphics editor based on Canvas, similar to Figma, and the tagline is repeated in the second language the README is published in, which tells you the project has a Chinese-language audience. The project page hosts a live experience, so you can try it without building anything, and the repository carries a screenshot for the README. What makes the technology choice interesting is the constraint. Building on the Canvas API rather than on SVG DOM means the editor draws its own scene graph and manages its own hit testing, zoom and pan, which is a lot of work but gives full control over rendering and keeps the performance characteristics in the author's hands. The topic list gives the same framing from the other side, with canvas, canvas-editor, design-editor, figma and graph-editor-gui among the tags, alongside graphics, visualization and typescript.

## The feature list is a design tool checklist

The numbered feature list in the README reads like a checklist for a design tool, and it is worth running through because it shows how much of the standard surface is covered. Graphics can be created and edited, including a rounded rectangle, an ellipse, a line, a path, text, a polygon and a star. Paths are edited with a pen tool that adjusts control points. The tool set includes a selection tool, the graphics drawing tools, an image tool, the pen tool, a canvas tool and a hand tool. The canvas is infinite with zoom and pan, there is support for multiple pages, and history with undo and redo. There is internationalisation, snapping for a pixel grid and for graphics guides, keyboard shortcuts, and copy and paste with cross-canvas support plus alignment and arrangement. There is a layers panel and a properties panel, grouping and frames, a ruler, user settings, and import and export of both JSON data and SVG.

## A pnpm monorepo of small packages

The repository is a pnpm workspace, and the root package.json lists the packages that make up the system. The scripts are the clearest description of the structure. The dev script runs several package dev tasks in parallel with run-p, covering common, icons, components, geo, core and the app itself, and there is a separate dev-m variant that swaps the app task for the multiplayer app. The build script runs the build in every workspace package except the backend and the workbench. The named packages are @suika/common, @suika/icons, @suika/components, @suika/geo, @suika/core, @suika/docs, @suika/workbench and @suika/backend, alongside the apps/suika application and the multiplayer variant. The split is sensible for an editor: a core graphics library, a geometry package, a component library with a Storybook, an icon set, and a backend and workbench that are explicitly excluded from the published build.

## Collaboration is a package you have to host

Multi-user collaborative editing is on the feature list, but the section about it is the most useful part of the README because it tells you what is not included. The frontend implementation logic for collaboration lives in the @suika/suika-multiplayer package, which copies @suika/suika, the pure client side build, and adds the collaboration logic, such as multiple cursors, and calls some interfaces like getting the drawing name and current user information. The collaboration is implemented using yjs with the hocuspocus library, which is a further wrapper around yjs. If you want the feature, you have to implement the backend RESTful API services that this package uses and provide WebSocket services based on hocuspocus, and then implement a frontend workspace project to manage drawings, with login, registration, creating, opening and deleting drawings, and authorization. So the editor is the product and the collaboration is a contract you implement against.

## Getting it running

The setup is Node with pnpm, and the README recommends the LTS version of Node from the official site. The package manager is installed with npm:

```sh
npm install -g pnpm
```

The dependencies are installed with:

```sh
pnpm install
```

and the development servers start with:

```sh
pnpm run dev
```

The production build is:

```sh
pnpm build
```

and the target output folder is apps/suika/build. A Storybook is available for the component package through the storybook script, and the documentation package has its own dev script. The linting and commit tooling are wired into the same root package, with eslint over the packages directory, husky installed by the prepare script, and commitlint with the conventional config in the development dependencies, so a commit message is checked before it lands. Tests run with jest, ignoring the backend application paths, and there is a jest.config.js at the root.

## A container that ends in nginx

The Dockerfile shows the deployment shape, and it is a two stage build that finishes as a static site behind nginx. The build stage uses node:18-alpine, copies the package manifest, the lockfile and the workspace file, then the packages and apps directories, and installs a pinned pnpm before running an install with a frozen lockfile and the build:

```dockerfile
RUN npm config set registry https://registry.npmmirror.com/
RUN npm install -g pnpm@9.0.2
RUN pnpm install --frozen-lockfile
RUN pnpm build

FROM nginx:alpine
COPY --from=build /app/apps/suika-multiplayer/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
```

Two details are worth noticing. The registry is switched to a mirror, which is a speed and availability choice rather than a functional one. And the artifact that gets copied into nginx is the multiplayer build, not the plain app build, which lines up with the collaboration story, since the multiplayer variant is the one that talks to a backend. The repository also has a docker-compose-dev.yml for a development environment, an nginx/ directory with the configuration, and a .dockerignore.

## The state of the project

This is a young project, and the README says so without dressing it up. The documentation section is a single line, WIP. The version in the root package file is 0.0.1, the package is marked private, and no GitHub releases have been published, so the artefact to follow is the repository. The last push was on 2026-09-29, and the repository is not archived. What is there is well organised for a project at that stage. There is a demo/ directory with sample documents, including a design test file and another named for a version, in the .suika format that the JSON import and export feature uses, which is a nice touch because it means you can open a file and see what the editor produces. The README is published in two languages, the icon set has a Figma design linked for anyone who wants to contribute artwork, and the whole thing is MIT licensed.

## Conclusion

Suika fits a developer who wants a Figma-like editor they can read, hack and self-host, since the whole thing is a pnpm monorepo of packages in TypeScript and the canvas code is right there, and the Docker image and nginx configuration mean you can put it behind your own reverse proxy. It does not fit a designer who expects a mature tool with a large asset library and a community plugin ecosystem, and it does not fit a team that wants collaboration out of the box, since the multiplayer package needs a backend you implement. Before you build on it, read the current documentation state, which the README marks as work in progress, try the hosted demo at the project page to see how far the tool actually goes, and check the version, since the package is still at 0.0.1 with no GitHub releases published.

## FAQ

### What is Suika?

It is an open source vector graphics editor built on the browser Canvas API, similar to Figma, with shape drawing, a pen tool with editable control points, an infinite canvas with zoom and pan, multiple pages, layers and properties panels, snapping, and JSON and SVG import and export.

### How do I run Suika locally?

Install Node.js and pnpm with npm install -g pnpm, then run pnpm install and pnpm run dev, which starts the dev tasks for the common, icons, components, geo, core and app packages in parallel. The production build is pnpm build and the output lands in apps/suika/build.

### Does Suika support multi-user collaboration out of the box?

Not quite. The @suika/suika-multiplayer package implements the frontend side with yjs and hocuspocus, and you have to provide the backend RESTful API and the WebSocket services, plus a workspace project handling login, creating, opening and deleting drawings.

### How is Suika structured?

It is a pnpm workspace with packages for common, icons, components, geo, core, docs, workbench and backend, plus the apps/suika application. The root scripts run the package dev tasks in parallel and build every workspace package except the backend and the workbench.

### Is Suika still being developed?

The repository is not archived and the last push was on 2026-09-29, but the version is still 0.0.1, no GitHub releases are published, and the README marks the documentation as work in progress.

## Sources

- [F-star/suika on GitHub](https://github.com/F-star/suika)
- [Issues](https://github.com/F-star/suika/issues)
- [License: MIT](https://github.com/F-star/suika/blob/main/LICENSE)
- [Project website](https://f-star.github.io/suika/)
- [README](https://github.com/F-star/suika/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/f-star-suika