Side Panel Overview

<SidePanel /> is the vertical business panel on the left of the Ydesign editor. It's made of a column of tab buttons and an expanded content area. Its job is to carry features for "inject things into the canvas" and "adjust global settings" — templates, text, photos, shapes, uploads, background, layers, size, ID photo, AI eraser…

How it relates to Toolbar: the toolbar tunes the selected element's properties; the side panel is more about bringing new things onto the canvas and canvas-level adjustments (size, background, layer ordering).

📌 Product boundaries: Strongly business-oriented panels (template gallery, asset library, upload backends) ship as reference implementations only — integrators should build their own Sections in production. Canvas-level panels (layers, size, background, etc.) are SDK core capabilities.

---

Basic usage

import { SidePanel, createStore } from '@ydesign/react-editor';

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

export default function App() {
  return (
    <div style={{ width: 420, height: '100vh' }}>
      <SidePanel store={store} />
    </div>
  );
}

<SidePanel /> fills its parent, so just give the parent a concrete size.

Props

type SidePanelProps = {
  store: StoreType;

  /**
   * Which panels to show.
   * - String names: ['templates', 'text', 'photos']
   * - Or full Section objects: [TextSection, CustomSection]
   * - Omit to use DEFAULT_SECTIONS (all built-in panels)
   */
  sections?: Section[] | string[];

  /**
   * Which panel to open on first render (by name).
   * Default: 'templates'
   */
  defaultSection?: string;
};

---

10 built-in sections

Every section is exported individually from @ydesign/react-editor/side-panel and bundled in DEFAULT_SECTIONS.

Core vs. reference: 🔧 marks canvas core capabilities; 📦 marks reference implementations (backend / CDN wiring). In production, replace 📦 panels with custom Sections.

Section	name	Type	Default component	Purpose
TemplatesSection	templates	📦 ref	TemplatesPanel	Template gallery sample: fetch list → loadJSON (build your own)
TextSection	text	🔧 core	TextPanel	Text — fonts, style presets, effects
PhotosSection	photos	📦 ref	PhotosPanel	Asset library sample (wire your own library & replace Section)
ShapesSection	shapes	🔧 core	ShapesPanel	Shapes & lines
UploadSection	upload	📦 ref	UploadPanel	Local upload sample (base64 default — use OSS in production)
BackgroundSection	background	🔧 core	BackgroundPanel	Canvas background color / image
LayersSection	layers	🔧 core	LayersPanel	Layer management
SizeSection	size	🔧 core	SizePanel	Canvas size (presets + custom)
IdphotoSection	idphoto	📦 ref	IdphotoPanel	ID-photo vertical demo
InpaintSection	inpaint	🔧 semi-core	InpaintPanel	AI eraser workflow UI (Handler in core; panel replaceable)

Trim the visible panels

Option 1: pass a name array (shortest)

<SidePanel
  store={store}
  sections={['templates', 'text', 'photos', 'shapes', 'background', 'layers']}
/>

Option 2: pass Section objects (more flexible — mix in custom sections)

import {
  SidePanel,
  DEFAULT_SECTIONS,
  TextSection,
  PhotosSection,
  BackgroundSection,
} from '@ydesign/react-editor/side-panel';

const sections = [TextSection, PhotosSection, BackgroundSection];

<SidePanel store={store} sections={sections} defaultSection="photos" />;

---

About InpaintSection / IdphotoSection

Both are marked visibleInList: false in DEFAULT_SECTIONS, which means:

• They don't appear in the persistent tab list
• But when your code calls store.openSidePanel('inpaint'), they pop up on demand

Typical triggers:

// User selected an image and clicked the "AI eraser" button in the toolbar
store.openSidePanel('inpaint');

// Entering the ID-photo workflow
store.openSidePanel('idphoto');

This "on-demand business panel" pattern is perfect for specialized tools — they stay out of the default UI, but when a user enters the right workflow, all relevant controls are gathered into one panel. See Custom Section · visibleInList for how to build your own.

---

Useful store fields / actions

// Currently open panel name
store.openedSidePanel;          // => 'templates' | 'text' | ...

// Switch the open panel (empty string to close)
store.openSidePanel('photos');
store.openSidePanel('');

---

Next

• 👉 Custom Section — add / remove / replace sections
• 👉 Built-in sections in detail
• 👉 <ImagesGrid /> component — reusable lazy-loading grid
• 👉 Upload panel — wire to your own storage
• 👉 Size panel — customize size presets
• 👉 Customizations · SidePanel