Workspace

import { Workspace } from 'polotno/canvas/workspace';
import { createStore } from 'polotno/model/store';

const store = createStore({
  key: 'YOUR_API_KEY', // you can create it here: https://polotno.com/cabinet/
  // you can hide back-link on a paid license
  // but it will be good if you can keep it for Polotno project support
  showCredit: true,
});

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <Workspace store={store} />
    </div>
  );
};

// Default vertical layout (pages stack top to bottom)
<Workspace store={store} layout="vertical" />

// Horizontal layout (pages arranged left to right)
<Workspace store={store} layout="horizontal" />

<Workspace
  store={store}
  components={{
    PageControls: ({ width, height, xPadding, yPadding }) => (
      <div
        style={{
          position: 'absolute',
          top: yPadding + 'px',
          left: xPadding + 'px',
        }}
      >
        My controls here...
      </div>
    ),
  }}
/>

<Workspace store={store} components={{ PageControls: () => null }} />

<Workspace
  store={store}
  backgroundColor="grey"
  pageBorderColor="black" // border around page
  activePageBorderColor="red" // border around active page (used when there are several pages)
  bleedColor="rgba(255, 0, 0, 0.2)" // color of the bleed area, toggled via store.toggleBleed()
  // optionally change default padding around page content
  // you can set it to 0 if you want full width and height of the canvas
  paddingX={50}
  paddingY={50}
  pageGap={50} // distance in pixels between pages, useful for multi-page layouts
  altCloneEnabled={true} // enable alt+drag to clone objects, default is true

  selectionRectFill="rgba(0, 161, 255, 0.3)"
  selectionRectStroke="rgb(0, 161, 255)"
  selectionRectStrokeWidth={1}

  snapGuideStroke="rgb(0, 161, 255)"
  snapGuideStrokeWidth={1}
  snapGuideDash={[4, 6]}
  
  transformLabelFill="rgb(0, 161, 255)"
  transformLabelTextFill="white"

  distanceGuideStroke="rgb(0, 161, 255)"
  distanceLabelFill="rgb(0, 161, 255)"
  distanceLabelTextFill="white"

  // ruler styling (see Canvas Rulers docs for details)
  rulerBackgroundColor="#f0f0f0"
  rulerTextColor="#333"
  rulerBorderColor="#ccc"
  rulerBorderSize={1}
  rulerTickColor="#999"
  rulerTickSize={8}

  // selection transformer (resize handles around selected element)
  // accepts Konva.TransformerConfig; omitted fields keep default values
  transformerStyle={{ anchorStroke: 'red', borderStroke: 'red' }}

  // hover/highlight rectangle around elements
  highlighterStyle={{ stroke: 'rgb(0, 161, 255)', strokeWidth: 2 }}

  // image crop transformers (inner = over cropped image, outer = source bounds)
  innerImageCropTransformerStyle={{ borderStroke: 'red' }}
  outerImageCropTransformerStyle={{ borderStroke: 'red' }}

  // dim overlay drawn around the canvas while an image is in crop mode
  cropOverlayFill="rgba(0,0,0,0.3)"

  // background + spinner color for image/video/gif elements while loading
  mediaLoadingStyle={{ fill: 'rgba(124, 173, 212, 0.8)', textFill: 'white' }}

  // background + text color for image/video/gif elements that failed to load
  mediaErrorStyle={{ fill: 'rgba(223, 102, 102, 0.8)', textFill: 'white' }}

  // stroke color for the (hidden) text overflow indicator path
  textOverflowIndicatorStyle={{ stroke: 'red' }}

  // Controls auto-scroll when the active page changes.                                                                
  // When a new page becomes active, the workspace scrolls to it only if                                               
  // the current scroll position is farther than this threshold from the page.                                         
  // Value is a fraction of the page size (0.5 = 50% of page height/width).                                            
  // Default 0.5. Increase to reduce scrolling. Use Infinity to disable completely.                                    
  scrollToPageThreshold={0.5}

// by default polotno will use checkerboard background for transparency, you can change it to any color you want
  transparencyBackgroundColor="grey" 

  // optionally set safe area for tooltip to avoid overlapping with other elements that you may place on top of the workspace
  tooltipSafeArea={{
    top: 100,
    right: 100,
    bottom: 100,
    left: 100,
  }}
/>

<Workspace renderOnlyActivePage />

<Workspace
  store={store}
  components={{
    NoPages: ({ store }) => <div>The project has no pages...</div>,
  }}
/>

import { handleHotkey } from 'polotno/canvas/hotkeys';

<Workspace
  store={store}
  onKeyDown={(e, store) => {
    if (e.key === 'Escape') {
      store.selectElements([]);
      return;
    }
    // optionally call the default handler
    handleHotkey(e, store);
  }}
/>;