Workspace

Workspace is an essential part of Polotno. It is the main React component used to display drawings and interact with them. You can change canvas and its content programmatically using the Store API.

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>
  );
};

The Workspace will automatically take the full width and height of its parent, so you don't have to adjust its size manually. Set the size of the parent div with CSS.

Customize page controls

You can customize page controls of your <Workspace /> component. Remove buttons, add your own, etc. You are in complete control over what is shown around the page.

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

Hide page controls

Optionally, you can hide UI to add/remove/duplicate pages.

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

Workspace styling

Optionally, change some styles of the workspace.

<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}
  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"
/>

Change default styles of Transformer (resize tool) and Highlighter (on object select or hover).

import { setHighlighterStyle, setTransformerStyle } from 'polotno/config';

// pass properties of Konva.Transformer shape
setTransformerStyle({
  anchorStroke: 'red',
  borderStroke: 'red',
});

// pass properties of Konva.Rect node
setHighlighterStyle({
  stroke: 'red',
});

// also control style of the cropping tool of image element
import { setInnerImageCropTransformerStyle, setOuterImageCropTransformerStyle } from 'polotno/config';

// use Konva.Transformer properties
setInnerImageCropTransformerStyle({
  borderStroke: 'red',
});

Show only the current page in Workspace

Use the renderOnlyActivePage property to show only the active page.

<Workspace renderOnlyActivePage />

No pages UI

If your store has no pages, <Workspace /> will show a simple UI with a button to create a new page. You can overwrite this UI with your own.

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

Overwrite keyboard handler

If you don't like default keyboard shortcuts, you can overwrite them with your own.

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);
  }}
/>;