Starting from this version, we'll strictly follow Semantic Versioning (SemVer), so your upgrades become more stable and predictable.

Of course, don't put blind faith in modern frontend — assume every upgrade might still surprise you in new ways. 😅

What is Ydesign SDK?​

Ydesign SDK is a collection of JavaScript modules, component libraries, and React components for building "Canva-style online design editors". It's already being used in production by multiple companies and indie developers.

Typical scenarios where Ydesign SDK fits:

1. Design & social media apps — posters, covers, business cards, video thumbnails
2. Print-on-demand & product customization — self-service designs for T-shirts, mugs, tote bags, phone cases
3. E-commerce & online storefronts — let buyers customize product artwork, generate marketing assets

The Story Behind It​

I've been following the online design / canvas editor space for a long time. Over the past few years I worked on several products in positions similar to canva.com — some were direct competitors, some were just "self-service design" modules inside a bigger product, but the underlying implementation was strikingly similar.

After a while it hit me: the experience I've accumulated over these years is already enough to build one myself. Instead of rebuilding this kind of editor from scratch for someone else every time, I might as well crystallize the capability and build one for myself.

But the hard part isn't shipping the app. If the goal were a consumer-facing "Canva clone", most of the energy would go into marketing, user acquisition, and differentiation — a lane that's already crowded with competitors. I almost abandoned the idea.

After a lot of thinking, a better angle emerged: instead of a C-end Canva competitor, build a developer-facing B2B product. Abstract "building a canvas editor" into a JS SDK so other developers can plug a fully-featured canvas editor into their own business. This direction matches my strengths — I've spent years writing frameworks and tools, and I have a pretty good sense of what kind of APIs and docs actually feel good to use (I hope).

Ydesign SDK was born out of that.

Huge thanks to my partner along the way, Klchan-me (former senior engineer at Tencent, co-founder of LingxiGuangnian) — from architecture, performance, to engineering standards, walking this road together.

Quick Start​

Ydesign SDK targets developers, so make sure you (or someone on your team) has an engineer who understands why 0.1 + 0.2 !== 0.3 😉.

If reading docs while coding feels tedious, you can also clone the apps/demo example project in the repo and run it out of the box.

Install​

npm install @ydesign/react-editor

Bootstrapping an editor in React​

The snippet below isn't the most minimal, but it's a copy-paste-ready starting template you can gradually adapt to your business:

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';

// Don't forget the editor styles
import '@ydesign/react-editor/style.css';

const store = createStore({
  // Get one from the console: https://ydesign.com/cabinet/
  key: 'LICENSE_KEY',
  // A paid license allows you to hide the backlink,
  // but keeping it visible is a great way to support the Ydesign project.
  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>
  );
};

// Make sure there's a container with id `root` and an explicit size on the page
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App store={store} />);

If you don't even want to write those few lines, there's an even more minimal entry point:

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

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

Commercialization​

As of today, Ydesign is still an independent project maintained by a small team.

From the very first line of code, it took roughly three months to reach a "proof of concept"; another six months or so to round out the core capabilities, ship the first public release, and put the website live; and a lot of time after that iterating on real customer feedback. Through this process we've developed an increasingly clear answer to "what kind of design SDK developers actually want".

Beyond SDK licensing itself, Ydesign also offers customization, on-premise deployment, and full source-code licensing as commercial services — but these naturally don't scale the same way a standard product does, so we won't put our main focus on them. Making the SDK itself great, and improving its DX, is always our top priority.

If your team is evaluating a similar solution, feel free to reach out — we'd love to chat.

What's Next?​

We believe demand in this space will keep growing, and we've already seen new competitors entering. There's still plenty on our backlog worth doing, mainly in these directions:

1. Official release of @ydesign/vue-editor — so the Vue 3 ecosystem gets full parity with the React version, with JSON fully interoperable between the two.
2. Animation / video export — static image, PDF, and SVG export are already supported; animation and video export are on the roadmap.
3. More export formats — print-ready PDF, HTML, high-resolution SVG, etc.
4. Extending the cloud rendering API — solving performance and consistency for large files, high-resolution output, and batch rendering.
5. Continuously expanding AI capabilities — smart background removal, one-click layout, AI image generation, one-click variations, and more.
6. Collaborative editing — CRDT-based real-time multi-user collaboration.
7. PPTX presentation editing — import .pptx files, edit page by page, export back to .pptx, turning Ydesign into "PowerPoint in the browser". Built on top of the multi-page scene (SceneHandler) capability.

For the full roadmap, see the Roadmap page. You're also welcome to vote and discuss on GitHub Discussions.

Alongside the SDK, we also maintain an internal showcase app called Ydesign Studio — to demonstrate what the SDK is capable of, and as our own dogfooding playground. It was originally positioned as a "forever free, no-login, no-paywall" tool. But as we plan to integrate some expensive capabilities (e.g. image background removal), Ydesign Studio may also introduce a limited paywall — we're still thinking through how to keep the "minimum friction" experience while making it sustainable.

If Ydesign has been helpful to you, giving us a Star on the GitHub repo is the best kind of support.