Ydesign SDK v1.0 正式发布 🎉

2024年3月24日 · 阅读需 6 分钟

冰河末日

Ydesign 编辑器作者

Klchan-me

前腾讯资深工程师 · 灵犀光年创始人

大家好，我是 冰河末日。经过近两年的开发与打磨，我非常激动地宣布：Ydesign SDK v1.0 正式发布！ 🎉

从这个版本开始，我们会严格遵循语义化版本（SemVer）发布规则，让大家的升级更稳定、更可预测。

当然也别完全信任现代前端 —— 请假设任何一次升级都有可能踩到新的惊喜。 😅

什么是 Ydesign SDK？

Ydesign SDK 是一套用于构建「Canva / 创客贴一类在线设计编辑器」的 JavaScript 模块、组件库与 React 组件。目前已经被多家公司和独立开发者用在生产环境。

Ydesign SDK 适合的业务场景：

设计与社交媒体应用 —— 海报、封面、名片、短视频封面生成
印刷与商品定制 —— T 恤、马克杯、帆布袋、手机壳的图案自助设计
电商与在线商城 —— 买家自助定制商品图案、店铺营销素材

缘起

我长期关注在线设计 / 画布编辑领域，过去几年在一线业务中做过多个和 canva.com 相似定位的产品，有些是正面竞品，有些只是"自助设计"功能模块，但实现思路高度一致。

时间长了我意识到：这些年积累的经验，已经足够我自己来做一款这样的产品了。 既然每次都要替别人从零造一遍这种编辑器，不如把这套能力沉淀下来，给自己做一款。

但真正难的并不是把应用做出来。假如目标是做一个 canva 的"复刻版"，面向终端用户（C 端），那就要花大量精力在营销、获客、差异化功能上 —— 而这个赛道已经挤满了竞争对手。我一度放弃了这个想法。

想了很久之后，一个更合适的思路冒了出来：与其做一款面向 C 端的 canva 竞品，不如做一款面向开发者的 B2B 产品。 把"构建画布编辑器"这件事抽象成一个 JS SDK，让其他开发者能轻松把功能完整的画布编辑器接入到自己的业务里。这个方向更契合我的能力 —— 我本身就是长期写框架、写工具的工程师，知道什么样的 API 和文档能让开发者用得顺手（但愿如此）。

Ydesign SDK 就是这样诞生的。

感谢这一路上的合作伙伴 Klchan-me（前腾讯资深工程师，灵犀光年联合创始人）—— 从架构设计、性能优化到工程规范，一路同行。

快速上手

Ydesign SDK 面向开发者，所以请准备好你（或团队里）有一位了解 0.1 + 0.2 !== 0.3 为什么成立的工程师 😉。

如果觉得边看文档边敲代码太麻烦，你也可以直接参考仓库里的 apps/demo 示例项目，开箱就能跑。

安装

npm install @ydesign/react-editor

在 React 里引导一个编辑器

下面这段代码不算最精简，但是一个可直接复制、后续慢慢按业务修改的起步模板：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { DesignEditorContainer, SidePanelWrap, WorkspaceWrap, SidePanel, createStore } from '@ydesign/react-editor';
import Toolbar from '@ydesign/react-editor/toolbar';
import Workspace from '@ydesign/react-editor/canvas/workspace';
import ZoomButtons from '@ydesign/react-editor/toolbar/zoom-buttons';

// 记得引入编辑器样式
import '@ydesign/react-editor/style.css';

const store = createStore({
  // 从控制台申请：https://ydesign.com/cabinet/
  key: 'LICENSE_KEY',
  // 付费许可证可以隐藏回链
  // 但如果能保留，对 Ydesign 项目会是很大的支持
  showCredit: true,
});
store.addPage();

export const App = ({ store }) => {
  return (
    <DesignEditorContainer style={{ width: '100vw', height: '100vh' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </DesignEditorContainer>
  );
};

// 确保页面里存在 id 为 `root` 的容器，并且有明确的尺寸
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App store={store} />);

如果你连这几行模板代码都不想写，可以用更极简的入口：

import { createDesignEditorApp } from '@ydesign/react-editor';
import '@ydesign/react-editor/style.css';

const { store } = createDesignEditorApp({
  container: document.getElementById('root'),
  key: 'LICENSE_KEY',
});

商业化

截至目前，Ydesign 仍然是一个小团队维护的独立项目。

从最初的第一行代码算起，做到一个"概念验证"版本花了大约三个月；又花了半年左右把核心能力补齐、把首个对外可用版本和官网跑起来；之后大量时间投入到真实业务接入时的反馈与打磨里。在这个过程中，我们对"开发者想要什么样的设计 SDK"有了越来越清晰的答案。

除了 SDK 授权本身，Ydesign 也对外提供定制化开发、私有化部署、以及完整源码授权三类商业服务 —— 但这些业务天然不像标准产品那样有可预测的增长曲线，所以我们不会把重心放在它们上面。做好 SDK 本身、让产品的 DX 更好，永远是第一优先级。

如果你所在的团队正在调研类似方案，欢迎直接联系我们聊聊。

接下来做什么？

我们判断这个方向的市场需求还会继续放大，也已经看到新的竞争对手陆续进场。当前 backlog 里还有不少值得做的事情，主要方向有几个：

@ydesign/vue-editor 正式发布 —— 让 Vue 3 生态也能享受到和 React 版完全对齐的能力，且两边 JSON 完全互通。
动画 / 视频导出 —— 目前支持静态图片、PDF、SVG 导出，动画和视频导出正在规划中。
更多导出格式 —— 印刷级 PDF、HTML、高分辨率 SVG 等。
云端渲染 API 扩展 —— 解决大文件、高分辨率、批量渲染的性能与一致性问题。
AI 能力持续扩展 —— 智能抠图、一键排版、AI 生图、一键变体等。
协同编辑 —— 基于 CRDT 的多人实时协作。
PPTX 演示稿编辑 —— 支持导入 .pptx 文件、按页编辑、再导出回 .pptx，把 Ydesign 扩展为"浏览器里的 PowerPoint"。基于多页场景（SceneHandler）能力落地。

完整的路线图请看 Roadmap 页面，也欢迎去 GitHub Discussions 投票与讨论。

在开发 Ydesign SDK 的同时，我们也在内部维护了一款名为 Ydesign Studio 的演示应用，用来展示 SDK 究竟能做到什么程度，同时也作为我们自己 dogfooding 的场地。它最初被定位成"永久免费、无需登录、无付费墙"的工具。但随着我们计划接入一些昂贵的能力（比如"图片背景移除"），可能也会在 Studio 里加入一定程度的付费门槛 —— 我们仍然在思考，怎么在保留"最小摩擦"体验的同时让它可持续。

如果你觉得 Ydesign 对你有帮助，帮我们在 GitHub 仓库上点个 Star 就是最大的支持了。

什么是 Ydesign SDK？​

缘起​

快速上手​

安装​

在 React 里引导一个编辑器​

商业化​

接下来做什么？​

什么是 Ydesign SDK？

缘起

快速上手

安装

在 React 里引导一个编辑器

商业化

接下来做什么？