grapesjs/docs/api/device_manager.md

Devices

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

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
• get
• getDevices
• remove
• select
• getSelected

add

Add new device

Parameters

• props Object Device properties
• options Record<string, any> (optional, default {})

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

• id String ID of the device

Examples

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

Returns (Device | null)

remove

Remove device

Parameters

• device (String | Device) Device or device id
• opts (optional, default {})

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<Device>

select

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

Parameters

• device (String | Device) Device or device id
• opts (optional, default {})

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