<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Devices

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

```js
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

```js
const deviceManager = editor.Devices;
```

## Available Events
* `device:add` New device added to the collection. The `Device` is passed as an argument.

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

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

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

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

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

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

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

* `device` Catch-all event for all the events mentioned above.

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

## Methods

*   [add][2]
*   [get][3]
*   [getDevices][4]
*   [remove][5]
*   [select][6]
*   [getSelected][7]

[Device]: device.html

## add

Add new device

### Parameters

*   `props` **[Object][8]** Device properties
*   `options` **Record<[string][9], any>**  (optional, default `{}`)

### Examples

```javascript
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][9]** ID of the device

### Examples

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

Returns **([Device] | null)**&#x20;

## remove

Remove device

### Parameters

*   `device` **([String][9] | [Device])** Device or device id
*   `opts`   (optional, default `{}`)

### Examples

```javascript
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

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

Returns **[Array][10]<[Device]>**&#x20;

## select

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

### Parameters

*   `device` **([String][9] | [Device])** Device or device id
*   `opts`   (optional, default `{}`)

### Examples

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

## getSelected

Get the selected device

### Examples

```javascript
const selected = deviceManager.getSelected();
```

Returns **[Device]**&#x20;

[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/device_manager/config/config.ts

[2]: #add

[3]: #get

[4]: #getdevices

[5]: #remove

[6]: #select

[7]: #getselected

[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array