Skip to main content

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).

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:

SectionnameDefault componentPurpose
TemplatesSectiontemplatesTemplatesPanelTemplate gallery — load designs from your backend
TextSectiontextTextPanelText — fonts, style presets, text effects
PhotosSectionphotosPhotosPanelPhoto library (Unsplash / your own image service)
ShapesSectionshapesShapesPanelShapes & lines
UploadSectionuploadUploadPanelLocal upload (base64 by default — recommended to wire to your OSS)
BackgroundSectionbackgroundBackgroundPanelCanvas background color / image
LayersSectionlayersLayersPanelLayer management
SizeSectionsizeSizePanelCanvas size (presets + custom)
IdphotoSectionidphotoIdphotoPanelID photo business flow
InpaintSectioninpaintInpaintPanelAI eraser (brush / rect / lasso)

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​