@zeplin/cli

Zeplin CLI

Installation

Install Zeplin CLI using npm.

npm install -g @zeplin/cli

Usage

zeplin <command> [options]

Connected Components

You can use connect command to connect your components to Zeplin. connect command requires a component configuration file. This file contains all information about the components on your codebase and their corresponding Zeplin components. For details, please refer to the configuration documentation

You can also use VSCode extension to prepare the configuration file.

Options	Description	Default
-f, --file	Full path to components config file	.zeplin/components.json
-d, --dev	Activate development mode	false
--port	Optional port number for development mode	9756
-p, --plugin	NPM package name of a Zeplin CLI connect plugin
-h, --help	output usage information

Examples:

Specify a custom path for components config file.

zeplin connect -f path/to/your-components.json

You can use multiple config files and multiple plugins at once.

zeplin connect -f path/to/components.json -f path/to/other/components.json -p plugin-npm-package-name -p other-plugin-npm-package-name

Connected Components Plugins

You can enhance your connected components using plugins. Plugins can generate component descriptions, code snippets and special links for your components.

Offical Plugins

NPM package name	Description
@zeplin/cli-connect-react-plugin	Generates snippet samples using React PropTypes
@zeplin/cli-connect-angular-plugin	Generate snippets using Angular components
@zeplin/cli-connect-swift-plugin	Generates snippet using Swift components (*)

(*) - Since the language has no popular convention of component like React components, we have defined a sample component format for this language. The plugin is only compatible with this component convention. Feel free to use these plugins as a base for a custom plugin compatible with your own codebase. Check Custom Plugins below.

Plugin Usage

Install connect plugin using npm.

npm install -g @zeplin/cli-connect-react-plugin

Execute connect command using the plugin.

zeplin connect -p @zeplin/cli-connect-react-plugin

You can also fill plugins field in component configuration file with NPM package names and their custom configuration parameters to execute them without -p argument.

Custom Plugins

You can develop a custom plugin to extract/generate description and snippets of your code base. You can find details about plugin development here.