Adding Custom Device

Although lots of device frames for designing your app are present, you are not limited by what we provide. So we give you the ability to define your custom device configurations.

How To Use

On top of your design area you can find the toolbar. Simply click the plus sign to add a new device.

You will see that devices.config is created with two sample devices. One being iOS and the other is Android.

JavaScript
JavaScript
[{
"deviceName": "iOSDevice", // Name of your device to be shown in dropdown
"os": "iOS",
"screen": {
"height": {
"px": 1334 // Should be at least 480
},
"width": {
"px": 750 // Should be at least 320
},
"ppi": 326,
"densityRatio": 2 // Pixel density ratio, depends on device ppi
}
},{
"deviceName": "androidDevice",
"os": "Android",
"screen": {
"height": {
"px": 2560
},
"width": {
"px": 1440
},
"ppi": 480,
"densityRatio": 3 // On Android, approximately [device ppi / 160]
}
}]

And list of devices currently registered will be updated automatically as:

Config file must be present under config folder and must have the extension of config just like we provide devices.config. Please fill all the fields as given in sample configuration. Otherwise, desired device won't be registered. Please use realistic dimensions for your device. (320x480 minimum) densityRatio is also known as CSS pixel ratio is explained in detail.

Config file must include an array where each element indicates a device to be registered.

Fields

deviceName

You can name it whatever you want.

os

"iOS" or "Android". (Case insensitive)

densityRatio

Android

densityRatio can be calculated as (device ppi / 160)

iOS

iPhone 6S

2

iPhone 6S Plus

3

iPhone SE

2

iPhone 7

2

iPhone 7 Plus

3