Contentstack Studio Plugin

Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest.

The Contentstack Studio Plugin generates UI code that can be viewed in Contentstack Studio or used independently, featuring design tokens and component management for seamless development workflows.

Installation

This is a Contentstack CLI plugin. To use it, you need to install the Contentstack CLI first:

# Install Contentstack CLI globally
$ npm i -g @contentstack/cli

# Set your region
$ csdx config:set:region <region-name>

# Login to Contentstack
$ csdx login --oauth

# Install the studio plugin
$ csdx plugins:install @contentstack/studio

# Set the project for your organization
$ csdx studio:project:set

Component Management and Code Generation

Add

The add command generates a component in your project based on the provided component ID. This command will fetch the component, generate the necessary UI code of your Figma design, and integrate it into your project structure automatically.

studio:component:add

Usage:

$ csdx studio:component:add [options]

Flags:

• --component-id, -i - Component ID to fetch from the Studio

Example:

$ csdx studio:component:add --component-id=component-123

Register

The register command is used to register new component(s) from a file or directory. This command will scan the specified path for files and register your custom components with the Studio system.

studio:component:register

Usage:

$ csdx studio:component:register [options]

Flags:

• --component-path, -p - Path to the component file
• --component-dir, -d - Path to the component directory

Example:

$ csdx studio:component:register --component-path="./src/components/Button.tsx"
$ csdx studio:component:register --component-dir="./src/components"

Sync

The sync command is used to sync a component to the Studio system. This command will analyze the component file and sync it to your project. This allows you to map your custom components to the Figma design.

studio:component:sync

Usage:

$ csdx studio:component:sync [options]

Flags:

• --component-path, -p - Component filepath to sync

Example:

$ csdx studio:component:sync --component-path="./src/components/Button.tsx"

Design Token

Add

The add command is used to add design tokens to your project by providing a UUID. This command will fetch the design tokens from your Figma design and integrate it into your Studio project structure automatically.

studio:design-token:add

Usage:

$ csdx studio:design-token:add [options]

Flags:

• --design-token-id, -i - Design token UUID

Example:

$ csdx studio:design-token:add --design-token-id="uuid-12345"

Project Management

Get

The get command displays the details of the currently configured Studio project in which the components are created.

studio:project:get

Usage:

$ csdx studio:project:get

Example:

$ csdx studio:project:get

Set

The set command allows you to configure the Studio project from your organization.

studio:project:set

Usage:

$ csdx studio:project:set [options]

Flags:

• --project-id, -p - Set project ID

Example:

$ csdx studio:project:set --project-id="proj-123"

Support

For additional help or issues, please contact the Contentstack support team.