open-pencil-cloud README

The project's README from github.com/yoohoo360/open-pencil-cloud. As one markdown file: README.md.

OpenPencil (Yoohoo fork)

A product fork of the open-source OpenPencil design editor. It keeps the upstream engine (.fig / .pen, CanvasKit rendering, SceneGraph) and adds a React shell, cloud documents, and internal deployment.

Upstream OpenPencil is under active development. This fork focuses on a React app shell and backend integration for business use.

Live preview → · Upstream demo · Upstream docs

Relationship to upstream OpenPencil

Upstream OpenPencil This fork (Yoohoo)
Focus Open-source editor + CLI / MCP / Vue SDK Productized editor on the same engine
App UI Vue 3 app under src/ Primary shell: packages/react
Backend Local-first, no required account Java server/ + cloud docs / OSS
Hosting Official web / desktop releases Static web app + Docker Compose API
Engine @open-pencil/core and related packages Same packages; product diffs prefer *.override.ts
License MIT MIT (upstream) + fork-owned config / deploy

Same: .fig I/O, SceneGraph, CanvasKit, Yoga layout, components/instances, and the programmable core.

Different: React product shell, cloud open/save, Aliyun OSS, and performance overrides (for example lazy .fig page load) without patching upstream sources in place.

Live preview

Environment URL
Dev preview http://pencil.dev.yoohoo.cn/
image image image

Local development

Requirements

Install

From the repo root:

bun install

Start the React editor

cd packages/react
bun run start
# NODE_ENV=development APP_ENV=local rspack server

Uses config.local.ts (API defaults to http://localhost:8080). Open http://localhost:8000.

Useful builds:

cd packages/react
bun run build:test   # APP_ENV=test (dev preview build)
bun run build:prod   # APP_ENV=prod

Start the API locally (optional)

Point Compose at a published image (adjust the tag as needed):

DATABASE_URL=jdbc:postgresql://xxx:5432/open-pencil
DATABASE_USERNAME=open-pencil
DATABASE_PASSWORD=xx
JWT_SECRET=your-super-secret-jwt-key-change-in-production-min-32-chars
SPRING_PROFILES_ACTIVE=dev

REDIS_HOST=xx
REDIS_PORT=xxx
REDIS_PASSWORD=xxx
REDIS_DATABASE=0

CORS_ALLOWED_ORIGINS=http://localhost:3000,http://localhost:1420,http://localhost:8000


JWT_EXPIRATION=8640000000
JWT_REFRESH_EXPIRATION=604800000


OAUTH_GITHUB_CLIENT_ID=xx
OAUTH_GITHUB_CLIENT_SECRET=xx
OAUTH_GOOGLE_CLIENT_ID=xx
OAUTH_GOOGLE_CLIENT_SECRET=xxx


# SMTP (leave MAIL_HOST empty to log verification codes in the API console)
MAIL_HOST=xxx
MAIL_PORT=xx
MAIL_USERNAME=xx
MAIL_PASSWORD=xx


# Storage: local / oss
STORAGE_TYPE=local

OSS_ENDPOINT=oss-cn-shanghai.aliyuncs.com
OSS_ACCESS_KEY=xx
OSS_SECRET_KEY=xx
OSS_BUCKET=xx
OSS_BASE_PATH=xx/
OSS_PRESIGN_EXPIRATION_SECONDS=900

cd server

Maven run Springboot

Without the API, the editor still opens local .fig files; cloud open/save needs the server (or a remote API URL in config).

Cloud deployment

Frontend (React static app)

Build and publish the packages/react dist (for example via .github/workflows/react-ui-deploy.yml), then serve it behind nginx. Dev preview: http://pencil.dev.yoohoo.cn/.

APP_ENV Config Typical use
local config.local.ts Local rspack
test config.dev.ts Dev preview site
prod config.prod.ts Production site

Backend (Docker Compose)

Run the API with Docker Compose on the host (same shape as local):

DATABASE_URL=jdbc:postgresql://xxx:5432/open-pencil
DATABASE_USERNAME=open-pencil
DATABASE_PASSWORD=xx
JWT_SECRET=your-super-secret-jwt-key-change-in-production-min-32-chars
SPRING_PROFILES_ACTIVE=dev

REDIS_HOST=xx
REDIS_PORT=xxx
REDIS_PASSWORD=xxx
REDIS_DATABASE=0

CORS_ALLOWED_ORIGINS=xxx,http://pencil.dev.yoohoo.cn


JWT_EXPIRATION=8640000000
JWT_REFRESH_EXPIRATION=604800000


OAUTH_GITHUB_CLIENT_ID=xx
OAUTH_GITHUB_CLIENT_SECRET=xx
OAUTH_GOOGLE_CLIENT_ID=xx
OAUTH_GOOGLE_CLIENT_SECRET=xxx


# SMTP (leave MAIL_HOST empty to log verification codes in the API console)
MAIL_HOST=xxx
MAIL_PORT=xx
MAIL_USERNAME=xx
MAIL_PASSWORD=xx


# Storage: local / oss
STORAGE_TYPE=oss

OSS_ENDPOINT=oss-cn-shanghai.aliyuncs.com
OSS_ACCESS_KEY=xx
OSS_SECRET_KEY=xx
OSS_BUCKET=yoohoo-oss
OSS_BASE_PATH=xx/
OSS_PRESIGN_EXPIRATION_SECONDS=900


services:
  open-pencil-server:
    image: registry.cn-hangzhou.aliyuncs.com/jongwong/open-pencil-server:0.0.1-beta.28
    container_name: open-pencil-server
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=dev
      - LOCAL_STORAGE_PATH=/app/storage
    volumes:
      - /data/docker-mnt/open-pencil-server/.env:/app/.env
      - /data/docker-mnt/open-pencil-server/storage:/app/storage
    restart: unless-stopped
    networks:
      - app-network

networks:
  app-network:
    external: true

# Ensure app-network exists, then:
docker compose pull open-pencil-server
docker compose up -d open-pencil-server

Update the image tag when releasing a new server build. Mount a real .env and persistent storage directory on the host. Use SPRING_PROFILES_ACTIVE=prod for production if that profile is configured in server/.

Image source: server/Dockerfile (multi-stage Maven → JRE).

Repository layout (excerpt)

packages/
  scene-graph/   graph model (may include index.override.ts)
  fig/           .fig parse / instances (*.override.ts)
  core/          engine / renderer / editor (performance overrides)
  react/         React product shell + cloud integration (primary app)
  cli/ mcp/ …    upstream programmable tooling
server/          cloud API (Java)

Prefer *.override.ts for product/engine diffs so upstream files stay mergeable; rspack remaps overrides at build time.

Upstream capabilities

Upstream still ships CLI (@open-pencil/cli), MCP, desktop AI agents, P2P collab, and token analysis. See:

This fork’s day-to-day path is the React shell + Compose API.

Checks

bun run check        # full gate
bun run test:unit    # unit tests
bun run format       # format

License

MIT License (upstream).

Upstream copyright belongs to OpenPencil contributors. Fork-owned React shell, cloud config, and deploy compose belong to this project’s maintainers.

open-pencil-cloud (yoohoo360/open-pencil-cloud)

Searching Database…

591 ·GitHub
Open-pencil-cloud
这是什么？一个 AI 原生的开源 Figma 替代品：由 OpenPencil 设计编辑器派生的产品化分支（fork）。它保留了上游引擎（.fig/.pen 文件格式、CanvasKit 渲染、SceneGraph），并新增了 React 外壳、云端文档和内部部署能力。
这个分支和上游的 OpenPencil 编辑器有什么不同？上游的界面是 src/ 目录下的 Vue 3 应用；而这个分支的主外壳是构建在同一引擎上的 React（packages/react），以静态网页应用加 Docker Compose API 的形式交付，不再提供上游那样的官方网页版和桌面版。
我怎么在本地把它跑起来？先安装 Bun，然后在仓库根目录安装依赖并启动 React 编辑器（它使用 config.local.ts）。后端方面，cd 进 server 目录，通过 Maven 运行 Spring Boot API，或者在 Docker Compose 中指向一个已发布的服务器镜像。
我需要先装好哪些东西？运行 React 应用需要 Bun（建议最新稳定版），另外可选安装 Docker 以便通过 Compose 运行 API。后端是 Java：一个用 Maven 构建的 Spring Boot 服务，并以 Maven 到 JRE 的多阶段 Docker 镜像形式发布。
如果我不搭后端，编辑器还能用吗？可以——没有 API 时，编辑器仍能打开本地 .fig 文件。只有云端打开/保存才需要服务器，或者需要在配置里设置远程 API 地址。
这是给个人设计师用的，还是给团队用的？面向团队和企业：这个分支增加了基于阿里云 OSS 的云端文档和面向企业内部使用的部署能力，而上游仍然是一个无需注册账号、以本地为主的编辑器。
整套东西可以部署到哪里？前端构建为静态 React 应用，由 nginx 提供服务（仓库里附带 react-ui-deploy GitHub Actions 工作流），并针对本地、测试和生产环境提供了各自的配置。后端通过 Docker Compose 部署在主机上，使用真实的 .env 文件、持久化存储目录和生产环境的 Spring profile。
我能在商业项目中使用它吗？可以——代码采用 MIT 许可证。上游引擎代码的版权归 OpenPencil 贡献者所有，而这个分支的 React 外壳、云端配置和部署 compose 则归本分支的维护者所有。
为什么在上游 OpenPencil 之外还要有这个分支？它把同一套引擎产品化，供企业使用：用 React 外壳取代 Vue 应用，通过 Java API 配合阿里云 OSS 存储实现云端打开/保存，并做了诸如 .fig 页面懒加载之类的性能优化——所有改动都放在覆盖（override）文件里，保证上游源码不被改动。
产品层面的改动如何避免破坏与上游的合并？产品和引擎层面的改动尽量使用 .override.ts 覆盖文件，而不是直接修改上游源码，并且 rspack 会在构建时把这些覆盖文件重新映射到位，因此上游文件始终保持可合并状态。
共享的 OpenPencil 引擎开箱就能做什么？与上游相同的引擎：.fig 和 .pen 文件的读写、带 CanvasKit 渲染的 SceneGraph、Yoga 布局、组件与实例，以及可编程的核心。上游的软件包还附带 CLI（@open-pencil/cli）、MCP、桌面 AI 智能体、P2P 协作和 token 分析功能。
What are similar projects?open-pencil, openpencil, onlook, konva, vectorcraft, doop, react-native-skia, penpot
Which topics is it in?figma-alternative, skia, springboot, figma, vector-graphics, design-tools, spring-boot, canvas, bun, tauri, collaboration, rendering
Creator
yoohoo360
Size
48.4 MB
Stars
591
Updated
CommitOct 15
Age
6mo
Commits · 90 Days