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 New device added to the collection. The Device is passed as an argument.

editor.on('device:add', (device) => { ... });

• device:remove Device removed from the collection. The Device is passed as an argument.

editor.on('device:remove', (device) => { ... });

• device:select A new device is selected. The Device is passed as an argument.

editor.on('device:select', (device) => { ... });

• device:update Device updated. The Device and the object containing changes are passed as arguments.

editor.on('device:update', (device) => { ... });

• device Catch-all event for all the events mentioned above.

editor.on('device', ({ event, model, ... }) => { ... });

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