GrapesJS

# Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 canvas: {
   // options
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('canvas:drop', () => { ... });

// Use the API
const canvas = editor.Canvas;
canvas.setCoords(...);

# Available Events

  • canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
  • canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
  • canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
  • canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
  • canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments.

By changing result.content you're able to customize what is dropped

# Methods

# getConfig

Get configuration object

Returns Object (opens new window)

# getElement

Get the canvas element

Returns HTMLElement (opens new window)

# getFrameEl

Get the main frame element of the canvas

Returns HTMLIFrameElement (opens new window)

# getWindow

Get the main frame window instance

Returns Window (opens new window)

# getDocument

Get the main frame document element

Returns HTMLDocument

# getBody

Get the main frame body element

Returns HTMLBodyElement (opens new window)

# setCustomBadgeLabel

Set custom badge naming strategy

# Parameters

# Examples

canvas.setCustomBadgeLabel(function(component){
 return component.getName();
});

# getRect

Get canvas rectangular data

Returns Object (opens new window)

# hasFocus

Check if the canvas is focused

Returns Boolean (opens new window)

# scrollTo

Scroll canvas to the element if it's not visible. The scrolling is executed via scrollIntoView API and options of this method are passed to it. For instance, you can scroll smoothly by using { behavior: 'smooth' }.

# Parameters

# Examples

const selected = editor.getSelected();
// Scroll smoothly (this behavior can be polyfilled)
canvas.scrollTo(selected, { behavior: 'smooth' });
// Force the scroll, even if the element is alredy visible
canvas.scrollTo(selected, { force: true });

# setZoom

Set canvas zoom value

# Parameters

# Examples

canvas.setZoom(50); // set zoom to 50%

Returns this

# getZoom

Get canvas zoom value

# Examples

canvas.setZoom(50); // set zoom to 50%
const zoom = canvas.getZoom(); // 50

Returns Number (opens new window)

# setCoords

Set canvas position coordinates

# Parameters

# Examples

canvas.setCoords(100, 100);

Returns this

# getCoords

Get canvas position coordinates

# Examples

canvas.setCoords(100, 100);
const coords = canvas.getCoords();
// { x: 100, y: 100 }

Returns Object (opens new window) Object containing coordinates

# addFrame

Add new frame to the canvas

# Parameters

# Examples

canvas.addFrame({
  name: 'Mobile home page',
  x: 100, // Position in canvas
  y: 100,
  width: 500, // Frame dimensions
  height: 600,
  // device: 'DEVICE-ID',
  components: [
    '<h1 class="testh">Title frame</h1>',
    '<p class="testp">Paragraph frame</p>',
  ],
  styles: `
    .testh { color: red; }
    .testp { color: blue; }
  `,
});

Returns Frame

← ‍ ‍ ‍ Frame →