returns the reactive state object of Diagram Editor

object getState();
objectstate object


// returns the current state of the editor
const state = $$("editor").getState();

Related samples


The returned state object contains the following properties and methods:

  gridStep: 20,
  zoom: 20,
  selected: {
    id: 100

If the selected element is a link, the selected object stores the following data:

  selected: {
    id: 25,
    link: true


  • gridStep (number) - defines a moving step for shapes being dragged (in pixels). 10 by default
  • zoom (number) - defines the current zoom level. 1 by default
  • selected (object) - stores object with ID and additional info (in case of a link) of the element being selected currently (either a block/shape or link).


  • $observe (function) - a handler to listen to changes in the current state of the editor. It takes 2 parameters:
    • prop (string) - a reactive property to listen changes of
    • handler (function) - a function to execute when changes are made. It takes the only argument:
      • value (any) - the current value of the reactive property. The type of the value (string, array, etc) depends on a reactive property being observed.
  • batch (function)- allows to set several properties at once. Takes the only parameter:
    • props (object) - an object containing the pairs of the property name and the value to set.
Back to top