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
• getAll

add

Add new device.

Parameters

• id String Device id
• width String Width of the device
• options Object? Custom options (optional, default {})

Examples

deviceManager.add('tablet', '900px');
deviceManager.add('tablet2', '900px', {
 height: '300px',
 // At first, GrapesJS tries to localize the name by device id.
 // In case is not found, the `name` property is used (or `id` if name is missing)
 name: 'Tablet 2',
 widthMedia: '810px', // the width that will be used for the CSS media
});

Returns Device Added device

get

Return device by name

Parameters

• name String Name of the device

Examples

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

Returns Device

getAll

Return all devices

Examples

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

Returns Collection