Skip to main content


Page is a container for elements in the store. The store may have several pages.

const page = store.addPage({  background: 'grey', // default is "white"});


You can use set() method to change some properties of the page container. For now use can change background and custom attributes

page.set({  // background can be any CSS color string or a url to the image  background: 'red',  // you can use "custom" attribute to save your own custom data  custom: { myInternalId: 'some-id-here' },});


Creates an element with specified attributes. It is important to provide type attribute of the element.

store.activePage?.addElement({  type: 'text',  x: 50,  y: 50,  fill: 'black',  text: 'hello',});


Duplicate the page.



Change order of pages

// move active page to the beginning of liststore.activePage?.zIndex(0);


You can use children property to access elements inside the page

// move every element by 10px to the rightstore.activePage?.children.forEach((element) => {  element.set({ x: element.x + 10 });});