GrapesJS

# Devices

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({
 deviceManager: {
   // options
 }
})

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

const deviceManager = editor.Devices;

# Available Events

  • device:add - Added new device. The Device is passed as an argument to the callback
  • device:remove - Device removed. The Device is passed as an argument to the callback
  • device:select - New device selected. The newly selected Device and the previous one, are passed as arguments to the callback
  • device:update - Device updated. The updated Device and the object containing changes are passed as arguments to the callback
  • device - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback

# Methods

# add

Add new device

# Parameters

# Examples

const device1 = deviceManager.add({
 // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
 id: 'tablet',
 name: 'Tablet',
 width: '900px', // This width will be applied on the canvas frame and for the CSS media
});
const device2 = deviceManager.add({
 id: 'tablet2',
 name: 'Tablet 2',
 width: '800px', // This width will be applied on the canvas frame
 widthMedia: '810px', // This width that will be used for the CSS media
 height: '600px', // Height will be applied on the canvas frame
});

Returns Device Added device

# get

Return device by ID

# Parameters

# Examples

const device = deviceManager.get('Tablet');
console.log(JSON.stringify(device));
// {name: 'Tablet', width: '900px'}

Returns (Device | null)

# remove

Remove device

# Parameters

# Examples

const removed = deviceManager.remove('device-id');
// or by passing the Device
const device = deviceManager.get('device-id');
deviceManager.remove(device);

Returns Device Removed device

# getDevices

Return all devices

# Examples

const devices = deviceManager.getDevices();
console.log(JSON.stringify(devices));
// [{name: 'Desktop', width: ''}, ...]

Returns Array (opens new window)<Device>

# select

Change the selected device. This will update the frame in the canvas

# Parameters

# Examples

deviceManager.select('some-id');
// or by passing the page
const device = deviceManager.get('some-id');
deviceManager.select(device);

# getSelected

Get the selected device

# Examples

const selected = deviceManager.getSelected();

Returns Device

← ‍ ‍ ‍ Device →