package.json Properties

npm's package.json defines everything you, and Zeplin, need to know about an extension, along with its dependencies.

Zeplin-specific properties are stored under package.json's zeplin property.

{
    "name": "my-extension",
    "description": …,
    "version": …,
    "zeplin": {
        "displayName": "My Extension",
        "platforms": ["web"],
        "options": …
    },
    …
}
Copy

displayName : String

Display name is optional but encouraged, as this is how the extension will be listed in the apps.

ProTip: Try to avoid the word "zeplin" in the display name, as it's assumed.

platforms : Array.<String>

Platforms that the extension can run in, web, android, ios or osx.

options : Array.<Option>

Extensions can define options that are stored locally in Zeplin, per client.

Currently, three types of options are supported:

• Switch: On and off checkbox, Boolean value type.
• Picker: Drop-down list of options, String value type.
• Text: Text field, String value type.

Option : Object

Properties

PickerOption : Object

Properties

Here's a sample options property:

[{
    "name": "Prefix",
    "type": "text",
    "id": "prefix",
    "default": ""
}, {
    "name": "Swift version",
    "type": "picker",
    "id": "swiftVersion",
    "options": [{
        "name": "3.0",
        "value": "3"
    }, {
        "name": "4.0",
        "value": "4"
    }],
    "default": "4"
}, {
    "name": "Default attributes",
    "type": "switch",
    "id": "defaultAttributes",
    "default": true
}]
Copy

Key properties

Zeplin makes use of some key package.json properties.

name : String

Uniquely defines the package for npm. Zeplin prefers displayName Zeplin-specific property as the name listed in the apps.

description : String

A short sentence describing what the extension does, e.g. “Generates CSS snippets from colors, text styles and layers.”

Description property is required, as it helps users quickly find the extension they're looking for.

version : String

Version of the extension.

Changes to your module should come along with changes to the version as well.

main : String

Entry point of the extension, defaults to src/index.js when not provided.

author : Author

Author is an optional property, representing the person or the team working on the extension.

Author : Object

Properties

repository : String

If your extension is open source, repository URL is an optional URL property pointing to where your extension code lives. This is helpful for people who want to contribute.