# Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

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

const canvas = editor.Canvas;

# getConfig

Get the configuration object

Returns Object

# getElement

Get the canvas element

Returns HTMLElement

# getFrameEl

Get the iframe element of the canvas

Returns HTMLIFrameElement

# getWindow

Get the window instance of the iframe element

Returns Window

# getDocument

Get the document of the iframe element

Returns HTMLDocument

# getBody

Get the body of the iframe element

Returns HTMLBodyElement

# getWrapperEl

Get the wrapper element containing all the components

Returns HTMLElement

# setCustomBadgeLabel

Set custom badge naming strategy

# Parameters

# Examples

 return component.getName();

# getRect

Get canvas rectangular data

Returns Object

# hasFocus

Check if the canvas is focused

Returns Boolean

# 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

  • el (HTMLElement | Component)
  • opts Object Options, same as options for scrollIntoView (optional, default {})
    • opts.force Boolean Force the scroll, even if the element is already visible (optional, default false)

# 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 zoom value

# Parameters

  • value Number The zoom value, from 0 to 100

Returns this

# getZoom

Get zoom value

Returns Number

# addFrame

Add new frame to the canvas

# Parameters

  • props Object Frame properties (optional, default {})
  • opts (optional, default {})

# Examples

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