# @tridion-sites/extensions-cli > CLI to create, develop, build and package extensions for Tridion Sites Latest version **1.2.5** (published 2026-06-19) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads ## Install ```sh npm install @tridion-sites/extensions-cli pnpm add @tridion-sites/extensions-cli yarn add @tridion-sites/extensions-cli bun add @tridion-sites/extensions-cli ``` Provides the command `sites-extensions`. ## Health **Score 60/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.2.5 | | Published | 2026-06-19 | | First published | 2023-05-10 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE.md | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 12 | | Unpacked size | 100.9 KB | | Known vulnerabilities | 0 (+8 in 1 direct dependencies) | | Install scripts | no | | Author | RWS | | Maintainers | ykifiak, kifiak | ## Links - npm: https://www.npmjs.com/package/@tridion-sites/extensions-cli - Homepage: https://www.rws.com - npm.io page: https://npm.io/package/@tridion-sites/extensions-cli ## Dependencies (12) - [chalk](https://npm.io/package/chalk.md) 5.6.2 - [archiver](https://npm.io/package/archiver.md) 6.0.2 - [fs-extra](https://npm.io/package/fs-extra.md) 11.3.2 - [inquirer](https://npm.io/package/inquirer.md) 9.3.8 - [commander](https://npm.io/package/commander.md) 11.1.0 - [decamelize](https://npm.io/package/decamelize.md) 6.0.1 - [handlebars](https://npm.io/package/handlebars.md) 4.7.8 - [cross-spawn](https://npm.io/package/cross-spawn.md) 7.0.6 - [valid-filename](https://npm.io/package/valid-filename.md) 4.0.0 - [@tridion-sites/models](https://npm.io/package/@tridion-sites/models.md) 2.3.1 - [@tridion-sites/extensions](https://npm.io/package/@tridion-sites/extensions.md) 3.4.0 - [@tridion-sites/open-api-client](https://npm.io/package/@tridion-sites/open-api-client.md) 4.2.0 ## Recent versions - 1.2.5 (latest) — 2026-06-19 - 1.1.3 (hotfix) — 2025-04-16 - 1.2.4 — 2026-03-17 - 1.2.3 — 2025-10-17 - 1.2.2 — 2025-04-14 - 1.1.2 — 2025-04-14 - 1.2.1 — 2025-01-08 - 1.2.0 — 2024-12-09 - 1.1.1 — 2024-01-23 - 1.1.0 — 2023-11-14 - 1.0.4 — 2023-07-14 - 1.0.3 — 2023-07-07 - 1.0.1 — 2023-07-04 - 1.0.0 — 2023-07-04 - 0.3.7 — 2023-06-27 - … 5 more at https://npm.io/package/@tridion-sites/extensions-cli/versions ## README # Tridion Sites Extensions CLI Command-line interface to create, develop, build and package addons for Tridion Sites ## Creating a new addon ```bash $ npx @tridion-sites/extensions-cli@latest create ``` _💡 **Tip:** Using `@latest` will ensure that the latest version of `@tridion-sites/extensions-cli` is used. See [here](https://github.com/npm/cli/issues/4108) for details._ The CLI will then provide a series of prompts, including the ID of the addon, the name of the frontend extension, and the URL for a compatible Tridion Sites installation. It will also automatically install all required dependencies. ## Addon structure After completing the prompts, CLI is going to create the following folder structure: ``` / / ... manifest.json .config.json ``` This structure allows you to have multiple extensions developed and packages together into a single addon. For example, you can have a backend extension that retrieves data from an external service and a frontend extension that defines how to present this data. _💡 **Tip:** For frontend-only addons you don't have to split functionality into separate projects as it is possible to define multiple frontend extensions in a single project. For more information see [examples](https://github.com/RWS/tridion-sites-extensions-examples)_ The entry point for any addon is `manifest.json`. It contains all metadata information about the addon as well as about extensions included in it. You can find more information [`here`](https://docs.rws.com/986894/707998/tridion-sites-9-6-main-documentation/basic-structure-of-the-add-on-manifest-file) Optional config file is generated for every addon to simplify adding configuration options in the future. _💡 **Tip:** As the config file is optional by default, you can skip it when you deploy an addon package._ CLI also generates the folder structure for a frontend extension in a folder with the provided ``. The next section describes what is included in a frontend extension by default. ## Frontend extension structure ``` / src/ globals.ts index.ts .browserslistrc .editorconfig .eslintrc.json .gitignore .prettierrc babel.config.js debServer.js package.json tsconfig.json webpack.dev.config.js webpack.prod.config.js ``` | File | Description | | :----------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `src/globals.ts` | Provides access to global functionality: addon configuration, translations etc | | `src/index.ts` | Entry point for the extension. Defines extension module | | `.browserslistrc` | Specifies which browsers should be supported by the extension. Used by [Babel](https://babeljs.io/docs/babel-preset-env#browserslist-integration) | | `.editorconfig` | Defines editor configuration that is supported by most IDEs. [More info](https://editorconfig.org/) | | `.eslintrc.json` | [ESLint](https://eslint.org/) rules that address common code problems. Out of the box we provide rules for TypeScript, React hooks and imports | | `.gitignore` | Allows to ignore folders and files when making Git commits so that they won't be pushed to the remote repository. [More info](https://git-scm.com/docs/gitignore) | | `.prettierrc` | Ensures consistent code style in the extension. Supported by most IDEs. More info about [Prettier](https://prettier.io/) | | `babel.config.js` | By default, the project is setup to use [Babel](https://babeljs.io/) for TypeScript compilation | | `devServer.js` | Development server allows to develop extensions locally without deploying them to a remote environment | | `package.json` | Manifest file for the frontend extension package. [More info](https://docs.npmjs.com/about-packages-and-modules#about-packages) | | `tsconfig.json` | Configuration used by TypeScript compiler. [More info](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) | | `webpack.dev.config.js` | Development configuration for the [Webpack bundler](https://webpack.js.org/) | | `webpack.prod.config.js` | Production configuration for the [Webpack bundler](https://webpack.js.org/) | All files or dependencies can be adjusted for the needs of a specific extension project. For example, adding a [third-party component library](https://github.com/RWS/tridion-sites-extensions-examples/blob/main/activities-explorer/work-items-column-addon/work-items-column/package.json#L29) or [using CSS Modules](https://github.com/RWS/tridion-sites-extensions-examples/tree/main/primary-navigation/async-page-addon/async-page) **Important note:** Do not update versions of existing packages in peerDependencies of `package.json`. These libraries are provided at runtime and a version mismatch might prevent your extension from running! ## Developing a frontend extension Frontend extensions are developed using [`React`](https://react.dev/) & [`TypeScript`](https://www.typescriptlang.org/docs/handbook/intro.html) and make use of the `@tridion-sites/extensions` API. First, let's switch into the extension folder ```bash $ cd ./ ``` _💡 **Tip:** It is recommended to open your IDE in the extension directory so the root point is the extension itself._ As dependencies are installed automatically when you generate a new addon, you don't have to do any additional setup. In order to add code for your extension, navigate to `src/index.ts` and update `initialize` method of the extension module. For example: ```typescript // Don't forget to use constants for build-in actions. import { activitiesExplorerActionId } from '@tridion-sites/extensions'; const extensionModule: ExtensionModule = { runtimeInfo: packageJson as RuntimeInformation, initializeGlobals, initialize: builder => { // This is going to remove `Refresh` action from the context menu of Content Explorer Table builder.contentExplorer.table.contextMenu.removeAction(activitiesExplorerActionId.refresh); }, }; ``` Now let's run the extension ```bash $ npm run dev ``` This is going to start a development server on `localhost:3000` by default and show your extension on the `target` environment that you provided while creating the addon. _**Important note:** When making changes that might result in changes to the dist package (adding or removing files) make sure the files array in the `manifest.json` is updated._ ## Packaging an addon When the extension is ready, first run `npm run build`. This command outputs into `/dist` folder in the addon folder (one level above the extension folder). In order to simplify the packing procedure every frontend extension outputs results into the same `/dist` folder. After all extensions are built, run `npm run pack` inside any extension folder to package the addon for use with Tridion Sites. --- _Source: https://npm.io/package/@tridion-sites/extensions-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._