Skip to main content

Built-in Sections

This page walks through each of the 10 sections shipped by @ydesign/react-editor. Everything below is backed by the real code under packages/react-editor/src/side-panel/. For each section you get:

  • Source file
  • Common customization hooks
  • Recommended backend integration

templates · Templates​

Source: side-panel/templates-panel.tsx Exports: TemplatesSection / TemplatesPanel

The built-in templates panel fetches a template list from whatever setBaseURL + setAPI('templateList', …) points to. On click it calls store.loadJSON(data) to load the template into the canvas.

Wire up your own template library:

import { setAPI } from '@ydesign/react-editor';

setAPI('templateList', () => ({
  url: 'https://your-api.com/templates',
}));

setAPI('templateDetail', (id: string) => ({
  url: `https://your-api.com/templates/${id}`,
}));

Payload shape follows URLS.templateList / URLS.templateDetail in packages/react-editor/src/utils/api.ts.

text · Text​

Source: side-panel/text-panel.tsx Exports: TextSection / TextPanel

Features:

  • Add preset text (heading / subheading / body)
  • Font library (global fonts registered via addGlobalFont + Google Fonts)
  • Text style presets

Customization tips:

  • Plug in an org/team font library → register with addGlobalFont, or override setAPI('teamFontList', …)
  • Don't want Google Fonts → setGoogleFontsVariants('400') to cut requests, or pre-register the fonts you use via addGlobalFont

Details: Editor configuration · Fonts.

photos · Photo Library​

Source: side-panel/photos-panel.tsx Exports: PhotosSection / PhotosPanel

Shows an image list from your backend with search and pagination (powered by <ImagesGrid />).

To integrate Unsplash / Pexels / your own image service, the cleanest approach is to replace the whole section:

const MyPhotosSection: Section = {
  name: 'photos',
  Tab: /* ... */,
  Panel: observer(({ store }) => (
    <MyPhotosGrid store={store} />
  )),
};

const sections = DEFAULT_SECTIONS.map(s =>
  s.name === 'photos' ? MyPhotosSection : s
);

See Custom Section · Scenario 2.

shapes · Shapes​

Source: side-panel/shapes-panel.tsx Exports: ShapesSection / ShapesPanel

The shape catalog comes from PathShapeLibs in @ydesign/react-editor's config.ts (basic, rectangles, common figures, polygons, …) plus PathLineLibs (straight, bent, curved, with arrows).

To extend: you could push into PathShapeLibs, but the recommended approach is to write a custom Section for your brand's custom shapes — don't patch the framework source.

upload · Upload​

Source: side-panel/upload-panel.tsx Exports: UploadSection / UploadPanel

The default implementation inlines local files as base64 into the JSON — it works, but the output bloats fast. In production, wire this up to your own OSS / S3 / COS.

Full details: Upload panel.

background · Background​

Source: side-panel/background-panel.tsx Exports: BackgroundSection / BackgroundPanel

Provides:

  • Solid color picker + preset palette
  • Gradient
  • Transparent

Override the preset palette:

import { setBackgroundColorsPreset } from '@ydesign/react-editor/side-panel/background-panel';

setBackgroundColorsPreset([
  '#ffffff', '#000000', '#f5f5f5',
  '#ff4d4f', '#1677ff', '#52c41a',
]);

Set the background programmatically:

store.setBackgroundColor('#ff6a00');
store.setBackgroundColor({
  type: 'linear',
  coords: { x1: 0, y1: 0, x2: 1, y2: 1 },
  colorStops: [
    { offset: 0, color: '#ff6a00' },
    { offset: 1, color: '#2253eb' },
  ],
});
store.setBackgroundColor('transparent'); // workspace shows a checkerboard

layers · Layers​

Source: side-panel/layers-panel.tsx Exports: LayersSection / LayersPanel

Lists every canvas object (top layer first) with:

  • Drag-to-reorder
  • Click to select
  • Lock / hide
  • Rename (element.set({ name }))

Internally calls store.editor.layerHandler. You can build your own layer list on top of those methods.

size · Size​

Source: side-panel/size-panel.tsx Exports: SizeSection / SizePanel

Common canvas size presets (social covers / cards / posters / …) plus custom width/height inputs.

For your own preset list (e.g. company print specs) → Customize the size panel.

idphoto · ID Photo 🔒​

Source: side-panel/idphoto-panel.tsx Exports: IdphotoSection / IdphotoPanel

A specialized panel for ID-photo business flows:

  • visibleInList: false (hidden from the persistent tabs)
  • Opens into an ID-photo layout workflow (size presets, background swap, outfit generation, …)

Trigger:

store.openSidePanel('idphoto');

If your product doesn't touch ID photos, just leave it out of sections.

inpaint · AI Eraser 🔒​

Source: side-panel/inpaint-panel.tsx Exports: InpaintSection / InpaintPanel

Like idphoto, visibleInList: false and opened on demand. Typical trigger: user selects an image → clicks the "Eraser" button in the toolbar → enters eraser mode.

Backed by @ydesign/core's InpaintHandler:

const h = store.editor?.inpaintHandler;

h?.activate('brush');   // brush mode
h?.activate('rect');    // rectangular marquee
h?.activate('lasso');   // lasso

h?.setBrushSize(20);

// Export mask + base image, send to your AI backend
const { maskBlob, imageBlob } = await h!.exportMaskAndImage();

Wire setAPI('inpaint', …) to your own inference endpoint.

Which sections should I enable?​

Use caseRecommended sections
Lightweight poster / cover tooltemplates, text, photos, shapes, upload, background
Print / business cardstemplates, text, shapes, upload, background, layers, size
Pro design with AIAll (including inpaint)
ID photo specialized apptext, upload, background, size, idphoto
Internal asset productionReplace photos / templates with custom sections pointing to internal libraries

Next​