Vue Integration (@ydesign/vue-editor)

Planned

@ydesign/vue-editor is the second official UI implementation in the Ydesign ecosystem, built on Vue 3 + Composition API + Pinia. It is in active design/development and will be released after @ydesign/core and @ydesign/react-editor stabilize.

This page previews the design and expected API so Vue users can plan ahead.

If you need a Vue editor today, please read Non-React integration first.

Why a dedicated Vue version?

We could ship a React-only UI and ask Vue users to adopt it via iframe or a wrapped subproject. That works, but has real drawbacks:

• ❌ Forces a React runtime (~40KB gzipped) into Vue projects
• ❌ Splits the developer experience: React components suddenly appear inside a Vue codebase
• ❌ Styling and theming stay inconsistent across apps

So we're committing to a native Vue version with parity to the React one. For consumers, @ydesign/react-editor and @ydesign/vue-editor will have near 1:1 APIs, differing only in component syntax. The core is shared:

• Canvas capabilities (Handlers) are identical
• JSON / data schemas are identical — designs made in React can be opened in Vue and vice versa
• Only one canvas core to maintain, two UIs evolving in parallel

Architecture

                        @ydesign/core
                 (canvas core, fabric.js v6)
                              ▲
                   ┌──────────┴──────────┐
                   │                     │
            @ydesign/react-editor         @ydesign/vue-editor
       (React 18 + Antd v6)    (Vue 3 + Ant Design Vue)

Expected API

Factory

import { createDesignEditorApp } from '@ydesign/vue-editor';

const { store, app } = createDesignEditorApp({
  container: document.getElementById('root'),
  key: 'YOUR_API_KEY',
  sections: ['templates', 'text', 'photos', 'shapes', 'background', 'layers'],
});

Inside an SFC

<template>
  <DesignEditorContainer style="width: 100vw; height: 100vh">
    <SidePanelWrap>
      <SidePanel :store="store" />
    </SidePanelWrap>
    <WorkspaceWrap>
      <Toolbar :store="store" />
      <Workspace :store="store" />
      <ZoomButtons :store="store" />
    </WorkspaceWrap>
  </DesignEditorContainer>
</template>

<script setup lang="ts">
import { createStore, DesignEditorContainer, SidePanelWrap, WorkspaceWrap, SidePanel, Toolbar, Workspace, ZoomButtons } from '@ydesign/vue-editor';

const store = createStore({ key: 'YOUR_API_KEY' });
</script>

Reactivity

React uses mobx-state-tree + observer; Vue uses Pinia + Vue reactivity:

// React
import { observer } from 'mobx-react-lite';
const Comp = observer(({ store }) => <div>{store.width}</div>);

// Vue (automatic, no wrapper)
<template>
  <div>{{ store.width }}</div>
</template>

Custom sections

Same { name, Tab, Panel } shape as React; Tab / Panel are Vue components:

import { defineComponent } from 'vue';
import type { Section } from '@ydesign/vue-editor';

const MyPanelSection: Section = {
  name: 'my-panel',
  Tab: defineComponent({ /* side icon */ }),
  Panel: defineComponent({ /* content */ }),
};

Feature parity

Capability	@ydesign/react-editor	@ydesign/vue-editor (planned)
Canvas core	Shared @ydesign/core	Shared @ydesign/core
JSON compatibility	✅	✅ (fully interoperable)
Side panels	10+ built-in	Parity
Toolbar	✅	Parity
i18n	setTranslations	setTranslations
Theme	Ant Design	Ant Design Vue
State mgmt	MobX + MST	Pinia
SSR	❌ (client only)	❌ (client only)
Bundle size	~480KB gz	targeting ~400KB gz

Roadmap

• M1 — extract canvas core so @ydesign/core has zero UI deps ✅
• M2 — @ydesign/vue-editor MVP (Workspace / Toolbar / SidePanel skeleton)
• M3 — side panels parity (templates, text, photos, shapes, upload, background, layers, size)
• M4 — toolbar parity (text / image / figure / multi-select)
• M5 — AI features parity (eraser, ID photo, etc.)
• M6 — 1.0 release

Bridging the gap today

Until @ydesign/vue-editor ships, Vue projects have two options:

1. Non-React integration — bundle the React version as a standalone subproject and expose a createEditor({ container }) function. Production-ready, slight DX compromise.
2. Ydesign Button — embed via iframe popup. No React knowledge needed, perfect for marketing pages and e-commerce details.

Stay in the loop

• GitHub: liaojunhao/react-fabric-editor (star to follow progress)
• Beta testing signups will be posted in GitHub Discussions.

If your team strongly prefers Vue or wants to help beta test, please reach out via Issues or email. Real community feedback is what drives our roadmap.