Skip to main content

Full Editor

This is Ydesign's most common shape: an out-of-the-box full design editor — canvas workspace, top toolbar, left business panels (templates / text / photos / shapes / upload / background / layers / size / ID photo / AI eraser), zoom controls, everything ready.

If you just want to drop the editor into your app quickly, start here.

10-line quick start​

One call to createDesignEditorApp gets you everything:

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

createDesignEditorApp({
  container: document.getElementById('root')!,
  key: 'YOUR_API_KEY',
});

Opening the page gives you a Canva-style editor with a 1080 × 1080 canvas and every feature wired up.

Trim the panels​

Not every product needs all 10 built-in panels. Pick what you need with sections:

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

Full list: see Side Panel Overview.

Composition (custom layout)​

Want to lay out the toolbar / panels / workspace yourself? Use createStore + low-level components:

import { createStore, DesignEditorContainer, SidePanelWrap, WorkspaceWrap, SidePanel } from '@ydesign/react-editor';
import Workspace from '@ydesign/react-editor/canvas/workspace';
import Toolbar from '@ydesign/react-editor/toolbar';
import ZoomButtons from '@ydesign/react-editor/toolbar/zoom-buttons';
import '@ydesign/react-editor/style.css';

const store = createStore({ key: 'YOUR_API_KEY' });

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

See also​