npm - @webflow/webflow-cli - Versions diffs - 1.19.0 → 1.20.0 - Mend

@webflow/webflow-cli 1.19.0 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,15 @@
 # @webflow/webflow-cli
+## 1.20.0
+### Minor Changes
+- d77f3b7: Adds global session storage and new auth commands. Running `webflow auth login` now saves credentials to both `~/.config/webflow/auth.json` (macOS/Linux) or `%APPDATA%\webflow\auth.json` (Windows) **and** the project `.env` file (`WEBFLOW_API_TOKEN`), so existing 1.x workflows continue to work without changes. Two new commands: `webflow auth status` shows the currently logged-in user and active scopes; `webflow auth logout` removes the stored session. The `WEBFLOW_API_TOKEN` environment variable continues to work as a CI/CD override.
+### Patch Changes
+- 067f4cf: Change version flag from `-V` to `-v` for convenience
 ## 1.19.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -1,371 +1,219 @@
 # @webflow/webflow-cli
-The Webflow CLI is a command-line interface that allows you to interact with various Webflow developer products, including Devlink and Designer Extensions.
+The Webflow CLI lets you manage Webflow sites, CMS content, assets, and code components from the command line.
 ## Installation
-You can install the Webflow CLI globally on your machine using npm:
 ```shell
-npm i @webflow/webflow-cli -g
+npm install -g @webflow/webflow-cli
 ```
-## Usage
+## Commands
-- [Code Components Libraries](#code-components-libraries)
-- [Webflow Designer APIs & Extensions](#webflow-designer-apis-and-extensions)
-- [Devlink](#devlink)
+- [Authentication](#authentication)
+- [Sites](#sites)
+- [CMS](#cms)
+- [Assets](#assets)
+- [DevLink Import (Code Components)](#devlink-import-code-components)
+- [DevLink Export](#devlink-export)
+- [Designer Extensions](#designer-extensions)
+- [Global Options](#global-options)
-### Global Options
+---
-The following options are available for all commands:
+## Authentication
-- **`--no-input`** - Avoid prompting or doing anything interactive. Use this for CI/CD pipelines.
-- **`--manifest <path>`** - Path to a manifest .json file or directory containing webflow.json. Default: `./webflow.json`
-- **`--skip-update-check`** - Skip checking for `@webflow` packages updates
+Authenticate with Webflow and save credentials locally.
-### Code Components Libraries
+```shell
+webflow auth login          # OAuth login — saves token to .env
+webflow auth login --force  # Re-authenticate even if credentials exist
+```
-[Code Components](https://developers.webflow.com/code-components/introduction) allow you to build custom React components and share them to your Webflow workspace. The Webflow CLI provides commands to manage and share your component libraries.
+---
-#### Prerequisites
+## Sites
-Before using the library commands, you need to create a `webflow.json` configuration file in your project root. Here's an example:
+Manage Webflow sites from the CLI.
-```json
-{
-  "library": {
-    "name": "My Component Library",
-    "description": "A collection of custom components",
-    "components": ["src/components/**/*.webflow.tsx"]
-  }
-}
+```shell
+webflow sites list                           # List all sites in your workspace
+webflow sites get <siteId>                   # Get details for a specific site
+webflow sites domains --site <siteId>        # List custom domains for a site
+webflow sites publish --site <siteId>        # Publish a site
 ```
-**Configuration Options:**
-- **`name`** (required): The display name of your library
-- **`description`** (optional): A description of your library
-- **`components`** (required): Glob pattern(s) for your component files
-- **`id`** (optional): Library ID (auto-generated on first share)
-- **`renderer`** (optional): Custom renderer configuration
-  - Can be a string path to a renderer module
-  - Or an object with `client` and `server` paths
-- **`bundleConfig`** (optional): Path to a webpack configuration file for custom bundle overrides
+### `sites list` options
-#### Sharing a Library
+| Flag                | Description                                                                                                      |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `--fields <fields>` | Comma-separated columns to display (id, displayName, shortName, timeZone, createdOn, lastUpdated, lastPublished) |
+| `--json`            | Output as JSON                                                                                                   |
-Share your component library to your Webflow workspace:
+### `sites publish` options
-```shell
-webflow library share
-```
+| Flag                  | Description                                                |
+| --------------------- | ---------------------------------------------------------- |
+| `--site <siteId>`     | Site ID to publish                                         |
+| `--domain <domainId>` | Publish to a specific custom domain (repeatable)           |
+| `--page <pageId>`     | Publish a single page instead of the full site             |
+| `--dry-run`           | Preview what would be published without triggering a build |
-This command will:
+---
-1. Collect metadata from your component files
-2. Bundle your components for both client and server environments
-3. Upload the bundles to Webflow's CDN
-4. Register the library in your workspace
+## CMS
-##### Authentication
+Manage CMS collections and items.
-You need a Workspace API token to share libraries. On your first share, the CLI will guide you through an OAuth flow to authenticate and generate a token.
+```shell
+# Collections
+webflow cms collections list --site <siteId>
+webflow cms collections get --site <siteId> --collection <collectionId>
+webflow cms collections create --site <siteId> --name "Blog Posts" --slug "blog-posts"
-Alternatively, you can provide a token manually with an environment variable:
+# Fields
+webflow cms fields create --collection <collectionId> --name "Author" --type PlainText
-```shell
-export WEBFLOW_WORKSPACE_API_TOKEN=your_token_here
-webflow library share
+# Items
+webflow cms items list --site <siteId> --collection <collectionId>
+webflow cms items get --site <siteId> --collection <collectionId> --item <itemId>
+webflow cms items create --site <siteId> --collection <collectionId> --data '{"name":"Hello"}'
+webflow cms items update --site <siteId> --collection <collectionId> --item <itemId> --data '{"name":"Updated"}'
+webflow cms items delete --site <siteId> --collection <collectionId> --item <itemId>
+webflow cms items publish --site <siteId> --collection <collectionId> --item <itemId>
 ```
-You can generate a Workspace API token in your Webflow workspace settings.
+### `cms collections list` options
-##### Options
+| Flag                | Description                                                            |
+| ------------------- | ---------------------------------------------------------------------- |
+| `--sort-by <field>` | Sort by: `displayName`, `slug`, `lastUpdated` (default: `displayName`) |
+| `--order <dir>`     | `asc` or `desc` (default: `asc`)                                       |
+| `--json`            | Output as JSON                                                         |
-- **`--api-token <token>`** - Workspace API token (overrides environment variable)
-- **`--force`** - Force compilation even with warnings or type errors
-- **`--debug-bundler`** - Display final bundler configurations for debugging
-- **`--dev`** - Bundle in development mode for debugging
-- **`--verbose`** - Display more detailed information
+---
-#### Bundling for Local Development
+## Assets
-Bundle your library locally without sharing to Webflow:
+Upload and manage site assets.
 ```shell
-webflow library bundle --public-path /public
+webflow assets list --site <siteId>                        # List assets
+webflow assets upload <file> --site <siteId>               # Upload a file
+webflow assets update <assetId> --display-name "New name"  # Update asset metadata
+webflow assets folders --site <siteId>                     # List asset folders
+webflow assets folders create --site <siteId> --name "Images"
 ```
-This is useful for:
+### `assets list` options
-- Testing your components locally
-- Debugging bundle issues
+| Flag                  | Description                                                                                               |
+| --------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--folder <folderId>` | Filter by folder                                                                                          |
+| `--sort-by <field>`   | Sort by: `displayName`, `originalFileName`, `contentType`, `size`, `lastUpdated` (default: `displayName`) |
+| `--order <dir>`       | `asc` or `desc` (default: `asc`)                                                                          |
+| `--fields <fields>`   | Comma-separated columns to display                                                                        |
+| `--limit <n>`         | Max assets to return                                                                                      |
+| `--offset <n>`        | Skip N assets (for pagination)                                                                            |
+| `--json`              | Output as JSON                                                                                            |
-##### Options
+### `assets upload` options
-- **`--public-path <path>`** (required) - Public path for the bundle
-- **`--output-path <path>`** - Output directory (default: `./dist`)
-- **`--force`** - Force compilation even with warnings or type errors
-- **`--debug-bundler`** - Display final bundler configurations
-- **`--dev`** - Bundle in development mode
-- **`--verbose`** - Display more detailed information
+| Flag                   | Description                         |
+| ---------------------- | ----------------------------------- |
+| `--name <displayName>` | Display name (defaults to filename) |
+| `--folder <folderId>`  | Upload into a folder                |
+| `--dry-run`            | Preview without uploading           |
-The bundled files will be written to the output directory with separate `client` and `server` subdirectories.
+**Supported file types:** PNG, JPG, JPEG, GIF, SVG, WEBP, AVIF (≤ 4 MB); PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV, ODT, ODS, ODP, JSON, Lottie (≤ 10 MB)
-#### Viewing Logs
+---
-Display the logs directory and path to the latest log file:
+## DevLink Import (Code Components)
+Build and import React component libraries to your Webflow workspace.
 ```shell
-webflow library log
+webflow devlink import    # Build and share your component library
+webflow devlink bundle    # Build locally without sharing
 ```
-This is helpful for debugging issues with the `share` or `bundle` commands.
-#### Customizing Bundle Configuration
-You can customize the webpack configuration used to bundle your components by providing a `bundleConfig` option in your `webflow.json` file. This allows you to add custom loaders, plugins, or modify the build process.
+Aliases: `webflow library share`, `webflow library bundle`
-##### Configuration File
+### Prerequisites
-In your `webflow.json`, specify the path to your bundle config file:
+Create a `webflow.json` in your project root:
 ```json
 {
   "library": {
     "name": "My Component Library",
-    "components": ["src/components/**/*.webflow.tsx"],
-    "bundleConfig": "./webpack.webflow.js"
+    "description": "A collection of custom components",
+    "components": ["src/components/**/*.webflow.tsx"]
   }
 }
 ```
-##### Bundle Config Format
-Your bundle config file can export configurations in three ways:
-**1. Static Object**
-Export a static configuration object:
-```js
-// webpack.webflow.js
-module.exports = {
-  mode: "production",
-  devtool: "source-map",
-  module: {
-    rules: (currentRules) => [
-      ...currentRules,
-      { test: /\.svg$/, use: ["@svgr/webpack"] },
-    ],
-  },
-};
-```
-**2. Function (Environment-Specific)**
-Export a function that receives the environment (`Environment.Client` or `Environment.Server`) and returns a configuration:
-```js
-// webpack.webflow.js
-const { Environment } = require("@webflow/data-types");
-module.exports = (env) => ({
-  mode: env === Environment.Client ? "production" : "development",
-  devtool: env === Environment.Client ? "source-map" : false,
-  module: {
-    rules: (currentRules) => [
-      ...currentRules,
-      {
-        test: env === Environment.Client ? /\.client\.js$/ : /\.server\.js$/,
-        use: "custom-loader",
-      },
-    ],
-  },
-});
-```
-**3. Array (Multiple Configs)**
-Export an array of objects and/or functions to merge multiple configurations:
-```js
-// webpack.webflow.js
-const { Environment } = require("@webflow/data-types");
-const {
-  styledComponentsBundleConfig,
-} = require("@webflow/styled-components-utils");
-module.exports = [
-  // Include third-party config
-  styledComponentsBundleConfig,
-  // Add environment-specific settings
-  (env) => ({
-    mode: env === Environment.Client ? "production" : "development",
-  }),
-  // Add custom rules
-  {
-    module: {
-      rules: (currentRules) => [
-        ...currentRules,
-        { test: /\.svg$/, use: ["@svgr/webpack"] },
-      ],
-    },
-  },
-];
-```
-##### Common Use Cases
-**Adding a Custom Loader**
-```js
-module.exports = {
-  module: {
-    rules: (currentRules) => [
-      ...currentRules,
-      {
-        test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
-      },
-    ],
-  },
-};
-```
-**Modifying an Existing Loader**
-```js
-module.exports = {
-  module: {
-    rules: (currentRules) =>
-      currentRules.map((rule) => {
-        // Extend the CSS loader configuration
-        if (rule.test instanceof RegExp && rule.test.test("test.css")) {
-          // Modify the rule...
-          return modifiedRule;
-        }
-        return rule;
-      }),
-  },
-};
-```
-**Using CSS-in-JS Library Configs**
-```js
-const {
-  styledComponentsBundleConfig,
-} = require("@webflow/styled-components-utils");
-// For styled-components
-module.exports = styledComponentsBundleConfig;
-```
-##### Merging Behavior
-When multiple configs are provided (via array), they are merged with the following behavior:
-- **Regular properties**: Later configs override earlier ones
-- **Module rules**: Rules transformation functions are chained together in order
-- **Plugins**: Plugin arrays are concatenated
-- **ModuleFederationPlugin shared**: Shared dependency configurations are merged
-##### Blocked Properties
+### `devlink import` options
-For security and consistency, the following webpack properties cannot be overridden:
+| Flag                  | Description                                         |
+| --------------------- | --------------------------------------------------- |
+| `--api-token <token>` | Workspace API token (overrides `WEBFLOW_API_TOKEN`) |
+| `--force`             | Compile even with warnings or type errors           |
+| `--dev`               | Bundle in development mode                          |
-- `entry`
-- `output`
-- `target`
+### `devlink bundle` options
-Attempting to override these properties will result in a warning and they will be ignored.
+| Flag                   | Description                                           |
+| ---------------------- | ----------------------------------------------------- |
+| `--public-path <path>` | Set the public path for the bundle                    |
+| `--output-path <path>` | Set the output path for the bundle (default `./dist`) |
+| `--force`              | Compile even with warnings or type errors             |
+| `--dev`                | Bundle in development mode                            |
-### Webflow Designer Extensions and APIs
+---
-[Designer Extensions](https://docs.developers.webflow.com/v2.0.0/docs/apps-overview) are single-page web Apps that run inside of of the Webflow Designer, and manipulate elements on the canvas through [Webflow's Designer APIs.](https://docs.developers.webflow.com/v2.0.0/reference/introduction-1). You can use the Webflow CLI to develop and package your Designer Extensions.
+## DevLink Export
-#### Creating an Extension
-To create a new extension, use the `webflow extension init` command:
-```shell
-webflow extension init my-extension
-```
-This command creates a new directory named `my-extension` with a basic scaffold for your extension. See more details about the scaffolding on the [App structure reference](https://docs.developers.webflow.com/v2.0.0/reference/app-structure).
-#### Running your Extension Locally
-Navigate to the newly created folder for your extension. You can serve your extension locally using the following command. The default port is set to 1337.
+Export Webflow Components from your Webflow Site
 ```shell
-npm run dev
+webflow devlink export    # Export Webflow Components
 ```
-This will run the `webflow extension serve` and command, allowing you test your App locally.
-##### Options
+### `devlink export` options
-- `port` - Serve your extension at a specific port on localhost: `webflow extension serve 1234`
+| Flag                  | Description                                         |
+| --------------------- | --------------------------------------------------- |
+| `--api-token <token>` | Workspace API token (overrides `WEBFLOW_API_TOKEN`) |
+| `--site <siteId>`     | Site ID to export from                              |
-#### Building and Bundling your Extension
+---
-If you're using the scaffolding built out from the `webflow extension init` command, you can create a build of your extension, an bundle it for publishing using the` npm run build` command:
+## Designer Extensions
-```shell
-npm run build
-```
-This will run the `webflow extension bundle` CLI command, which will output a `bundle.zip` file in your extension’s directory. You can upload this extension to Webflow via the "Integrations" tab in your workspace settings. Note: The extension size limit is 5MB.
-### Devlink
-DevLink allows you to visually design and build web components for React directly in Webflow. [Learn more in our DevLink overview,](https://webflow.com/devlink) and read the [DevLink documentation](https://docs.developers.webflow.com/docs/devlink-documentation-and-usage-guide).
+Scaffold and serve Webflow Designer Extensions.
 ```shell
-npx webflow devlink -h
+webflow extension init <name>   # Create a new extension project
+webflow extension serve [port]  # Serve locally (default port: 1337)
+webflow extension bundle        # Build and package for upload (outputs bundle.zip)
 ```
-In order to use the DevLink CLI first you'll need to create a `.webflowrc` configuration file on your application's root directory.
+---
-The supported formats are JavaScript(.js) and JSON (.json).
+## Global Options
-It should look something like this:
+Available on all commands:
-JSON:
+| Flag                  | Description                                        |
+| --------------------- | -------------------------------------------------- |
+| `--no-input`          | Disable interactive prompts (for CI/CD)            |
+| `--manifest <path>`   | Path to `webflow.json` (default: `./webflow.json`) |
+| `--skip-update-check` | Skip checking for package updates                  |
+| `--verbose`           | Show detailed output                               |
-```json
-{
-  "host": "https://api.wfdev.io:8443",
-  "rootDir": "./devlink",
-  "siteId": "[YOUR SITE ID]",
-  "authToken": "[API TOKEN]"
-}
-```
-JavaScript:
-```js
-module.exports = {
-  host: "https://api.wfdev.io:8443",
-  rootDir: "./devlink",
-  siteId: "[YOUR SITE ID]",
-  authToken: process.env.WF_TOKEN,
-};
-```
-You'll have to generate an API token to your application. This can be done on your Webflow project
-by going to Site Settings > Integrations.
-#### Sync your design system
-```shell
-npx webflow devlink sync
-```
+---
 ## License