### Clone Example Library and Install Dependencies Source: https://developers.webflow.com/devlink/introduction/getting-started.mdx Clone the example component library repository and install its dependencies to set up your development environment. ```bash git clone https://github.com/Webflow-Examples/code-component-library.git cd code-component-library npm install ``` -------------------------------- ### Install and Run Project Dependencies Source: https://developers.webflow.com/devlink/getting-started.mdx Run these commands to install project dependencies and start the development server. This is the standard procedure for setting up your project. ```bash npm install npm run dev ``` -------------------------------- ### Get Sites using Webflow JavaScript SDK Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/site-token.mdx Install the Webflow JavaScript SDK to simplify API interactions. This example shows how to fetch a list of sites using the SDK. Ensure you replace YOUR_API_TOKEN with your generated token. ```bash npm install webflow-api ``` ```javascript import { WebflowClient } from 'webflow-api'; const token = 'YOUR_API_TOKEN'; const webflow = new WebflowClient({ accessToken: token }); (async () => { try { const sites = await webflow.sites.list(); console.log(sites); } catch (error) { console.error('Error fetching sites:', error); }})(); ``` -------------------------------- ### Getting Started: Data Clients Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-added Information on getting started with data clients for efficient content delivery. ```APIDOC ## Getting Started: Data Clients ### Description Information on getting started with data clients for efficient content delivery. ### Endpoint `/reference/rest-introduction/quick-start` ``` -------------------------------- ### Get Sites using Webflow Python Package Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/site-token.mdx Install the Webflow Python package to interact with the API. This example demonstrates fetching a list of sites. Replace YOUR_API_TOKEN with your generated token. ```bash pip install webflow ``` ```python from webflow.client import Webflow # Initialize the Webflow client with your access token client = Webflow(access_token="YOUR_API_TOKEN") # Fetch the list of sites sites = client.sites.list() # Print the list of sites print(sites) ``` -------------------------------- ### Run Project in Local Preview Environment Source: https://developers.webflow.com/devlink/getting-started.mdx Execute this command in your terminal to start your project in a local preview environment that simulates your Webflow Cloud setup. ```bash npm run preview ``` -------------------------------- ### Getting Started: FAQs and Troubleshooting Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-added Answers to frequently asked questions and troubleshooting tips for common issues encountered when working with the Apps. ```APIDOC ## Getting Started: FAQs and Troubleshooting ### Description Answers to frequently asked questions and troubleshooting tips for common issues encountered when working with the Apps. ### Endpoint `/docs/faqs-and-troubleshooting` ``` -------------------------------- ### Clone and Install Dependencies Source: https://developers.webflow.com/webflow-cloud/add-object-storage.mdx Clone the starter repository and install necessary dependencies for the project. ```bash git clone https://github.com//webflow-cloud-object-storage.git cd webflow-cloud-object-storage npm install ``` -------------------------------- ### Example Skill Prompt: Site Audit Source: https://developers.webflow.com/mcp/reference/skills.mdx When a relevant skill is installed, Claude Code automatically invokes it based on your prompt. This example shows how to trigger the site audit skill. ```bash Audit my Webflow site for common issues ``` -------------------------------- ### Install Webflow CLI Source: https://developers.webflow.com/devlink/getting-started.mdx Install the Webflow CLI globally using npm. Verify the installation by checking the version. ```bash npm install -g @webflow/webflow-cli ``` -------------------------------- ### Getting Started: Register an App Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-added Instructions on how to register your application to access the Data API services. ```APIDOC ## Getting Started: Register an App ### Description Instructions on how to register your application to access the Data API services. ### Endpoint `/docs/register-an-app` ``` -------------------------------- ### Install styled-components Utility Source: https://developers.webflow.com/code-components/frameworks-and-libraries.mdx Install the `@webflow/styled-components-utils` package for integrating styled-components. This also requires installing `styled-components`, `react`, and `react-dom` as peer dependencies. ```bash npm i @webflow/styled-components-utils ``` ```bash npm i styled-components react react-dom ``` -------------------------------- ### Getting Started: Get a Site Token Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-added Learn how to obtain a site token, a crucial step for authenticating your application with the Data API. ```APIDOC ## Getting Started: Get a Site Token ### Description Learn how to obtain a site token, a crucial step for authenticating your application with the Data API. ### Endpoint `/reference/authentication/site-token` ``` -------------------------------- ### Start Python Server Source: https://developers.webflow.com/data/v2.0.0/reference/oauth-app.mdx Use this command to start your Python server, which will handle the OAuth flow and token exchange. ```bash python app.py ``` -------------------------------- ### Install Emotion Utility Source: https://developers.webflow.com/code-components/frameworks-and-libraries.mdx Install the `@webflow/emotion-utils` package for integrating Emotion with code components. This also requires installing `@emotion/cache`, `@emotion/react`, `react`, and `react-dom` as peer dependencies. ```bash npm i @webflow/emotion-utils ``` ```bash npm i @emotion/cache @emotion/react react react-dom ``` -------------------------------- ### Install Webflow CLI Globally Source: https://developers.webflow.com/designer/reference/webflow-cli.mdx Install the Webflow CLI globally using npm, yarn, or pnpm. Ensure Node.js is installed beforehand. ```bash npm install -g @webflow/webflow-cli # or yarn add global @webflow/webflow-cli or pnpm add -g @webflow/webflow-cli ``` -------------------------------- ### Install Webflow Skills (Claude) Source: https://developers.webflow.com/mcp/reference/skills.mdx Install the Webflow skills from the marketplace into your Claude environment. ```bash claude plugin install webflow-skills@webflow-skills ``` -------------------------------- ### Install Webflow CLI and Dependencies Source: https://developers.webflow.com/code-components/importing/quick-start.mdx Install the Webflow CLI and necessary dependencies for creating a code component library. ```bash npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react ``` -------------------------------- ### Webflow DevLink Export Configuration Source: https://developers.webflow.com/devlink/docs/component-export/installation.mdx Example `webflow.json` file for DevLink Export. This file defines settings for DevLink setup and component export. Ensure your `siteId` is correct and adjust export options as needed. ```json { "siteId": "69d8ea201293ab4c87c1a2e3", "devlink-export": { "rootDir": "./webflow", "components": ".*", "componentGroups": ".*", "ts": true, "cssScopes": true, "relativeHrefRoot": "/" } } ``` -------------------------------- ### Install Webflow CLI Source: https://developers.webflow.com/devlink/introduction/getting-started.mdx Install the Webflow CLI globally to manage your component libraries. Ensure Node.js 18+ and npm 10+ are installed. ```bash npm i --save-dev @webflow/webflow-cli ``` -------------------------------- ### Install Webflow Skills Plugin Source: https://developers.webflow.com/mcp/reference/skills.mdx Use this command to install the Webflow skills plugin. After installation, restart Claude Code for the changes to take effect. ```bash claude plugin install ~/webflow-skills ``` -------------------------------- ### Install Webflow CLI Source: https://developers.webflow.com/apps/docs/designer-extensions/build-a-designer-extension.mdx Install the Webflow CLI globally to manage and run Designer Extensions from the command line. ```shell npm i -g @webflow/webflow-cli ``` -------------------------------- ### Start Claude Code Source: https://developers.webflow.com/mcp/reference/getting-started.mdx Execute this command to start the Claude Code application. ```bash claude ``` -------------------------------- ### Install Node.js Dependencies Source: https://developers.webflow.com/data/v2.0.0/reference/oauth-app.mdx Installs the required packages for a Node.js server using npm. ```bash npm install express dotenv webflow-api ``` -------------------------------- ### Register an App Guide Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-deleted A guide on how to register a new application with Webflow, which is a prerequisite for accessing certain API functionalities. This is part of the 'Getting Started' documentation for applications. ```markdown # Register an App Learn how to register your application with Webflow to integrate with its services. This process is essential for obtaining API credentials. **Slug:** `data/v2.0.0/docs/register-an-app` **Canonical Slug:** `data/docs/register-an-app` ``` -------------------------------- ### Get a Site Token Guide Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-deleted Instructions on how to obtain a site token, which is necessary for authenticating requests to the Data API. This is part of the 'Getting Started' documentation for applications. ```markdown # Get a Site Token This page details the process of obtaining a site token for authenticating with the Data API. Follow these steps to secure your application's access. **Slug:** `data/v2.0.0/docs/getting-started-apps/get-a-site-token` **Canonical Slug:** `data/reference/authentication/site-token` ``` -------------------------------- ### Getting Started with Data Clients Guide Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-deleted An introductory guide to using Webflow's data clients for seamless interaction with the Data API. This section covers the initial steps and best practices for data retrieval. ```markdown # Getting Started with Data Clients This guide will walk you through the initial steps of using Webflow's data clients to efficiently access and manage your data via the API. **Slug:** `data/v2.0.0/docs/data-clients/getting-started` **Canonical Slug:** `data/reference/rest-introduction/quick-start` ``` -------------------------------- ### Clone Starter App and Install Dependencies Source: https://developers.webflow.com/apps/docs/data-clients/build-a-data-client.mdx Clone the Webflow app starter repository and install its dependencies using npm. ```bash git clone https://github.com/Webflow-Examples/webflow-app-starter-v2 cd webflow-app-starter-v2 npm install ``` -------------------------------- ### Install Webflow CLI Source: https://developers.webflow.com/devlink/docs/component-export/installation.mdx Install the Webflow CLI as a development dependency. This is required for bundling and publishing your component library. ```bash npm install -D @webflow/webflow-cli@latest ``` -------------------------------- ### Initialize Server and Dependencies in server.js Source: https://developers.webflow.com/apps/docs/data-clients/build-a-data-client.mdx Import necessary modules, load environment variables, and initialize the Fastify server with security headers and database setup. ```javascript import { WebflowClient } from "webflow-api"; import Fastify from "fastify"; import fastifyStatic from "@fastify/static"; import path from "path"; import url from "url"; import { Level } from "level"; import fs from "fs/promises"; // Load environment variables from .env file const { WEBFLOW_CLIENT_ID, WEBFLOW_SECRET, PORT NODE_ENV = "development", } = process.env; // Validate required environment variables if (!WEBFLOW_CLIENT_ID || !WEBFLOW_SECRET) { console.error( "Missing required environment variables. Please check your .env file:" ); console.error("WEBFLOW_CLIENT_ID and WEBFLOW_SECRET are required"); process.exit(1); } // Initialize our server with basic security headers const server = Fastify({ logger: true, trustProxy: true, // Required for secure cookies behind a proxy }); // Add security headers server.addHook("onSend", async (request, reply) => { reply.headers({ "X-Content-Type-Options": "nosniff", // Prevent MIME type sniffing "X-Frame-Options": "DENY", // Prevent clickjacking "Strict-Transport-Security": "max-age=31536000; includeSubDomains", // Enforce HTTPS }); }); // Initialize the database (Note: Use a proper database in production) const db = new Level("data", { valueEncoding: "json" }); await db.open(); ``` -------------------------------- ### List Available Extension Templates Source: https://developers.webflow.com/designer/reference/webflow-cli.mdx List all available templates that can be used when initializing a new Designer Extension project with the 'init' command. ```bash webflow extension list ``` -------------------------------- ### Webflow Navigation Links Source: https://developers.webflow.com/data/reference/webhooks/events/collection-item-unpublished Provides examples of navigation links for Webflow, including 'Log in', 'Submit an app', and 'Get started'. These are typically used in headers or footers. ```JavaScript self.__next_f.push([1,"57:[[\"$\",\"$L77\",\"0\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/login\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Log in\"}],\n[\"$\",\"$L77\",\"1\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://developers.webflow.com/submit\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Submit an app\"}],\n[\"$\",\"$L77\",\"2\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/signup\",\"icon\":\"$undefined\",\"intent\":\"primary\",\"rightIcon\":\"$undefined\",\"variant\":\"filled\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Get started\"}\n]]\n5a:[[\"$\",\"$L77\",\"0\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/login\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Log in\"}],\n[\"$\",\"$L77\",\"1\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://developers.webflow.com/submit\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Submit an app\"}],\n[\"$\",\"$L77\",\"2\",{\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/signup\",\"icon\":\"$undefined\",\"intent\":\"primary\",\"rightIcon\":\"$undefined\",\"variant\":\"filled\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Get started\"}\n]]\n78:T8c3,"]) ``` -------------------------------- ### List Available Cloud Project Templates Source: https://developers.webflow.com/cli/command-reference.mdx Lists the available project templates that can be used with the `cloud init` command. ```bash webflow cloud list ``` -------------------------------- ### Render Empty State SVG and Text (JavaScript/HTML Structure) Source: https://developers.webflow.com/data/reference/webhooks/events/ecomm-inventory-changed Renders an SVG icon (an arrow) and accompanying text ('Select an endpoint to get started') for an empty state or initial view. This is likely used when no data is available or to guide user interaction. ```javascript self.__next_f.push([1,"f:[\"$\",\"div\",null,{\"className\":\"flex size-full flex-col items-center justify-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-left t-muted mb-2 size-8\",\"children\":[[\"$\",\"path\",\"1l729n\",{\"d\":\"m12 19-7-7 7-7\"}],[\"$\",\"path\",\"x3x0zl\",{\"d\":\"M19 12H5\"},\"$undefined\"}]}]], [\"$\",\"h6\",null,{\"className\":\"t-muted\",\"children\":\"Select an endpoint to get started\"}]]}\n"]) ``` -------------------------------- ### Create React App Source: https://developers.webflow.com/code-components/importing/quick-start.mdx Use create-react-app to set up a new React project for your code components. Navigate into the created directory. ```bash npx create-react-app code-components cd code-components ``` -------------------------------- ### REST Introduction - Quick Start Source: https://developers.webflow.com/data/reference/webhooks/events/collection-item-unpublished Provides a quick start guide to begin using the Webflow Data API. ```APIDOC ## GET /api/rest/introduction/quick-start ### Description Guides users through the initial steps of interacting with the Webflow Data API. ### Method GET ### Endpoint /api/rest/introduction/quick-start ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example None ### Response #### Success Response (200) - **content** (string) - The quick start guide content. #### Response Example ```json { "content": "Follow these steps to get started..." } ``` ``` -------------------------------- ### Initialize Python Server Source: https://developers.webflow.com/data/v2.0.0/reference/oauth-app.mdx Sets up a Flask server in Python, loads environment variables, and initializes the Webflow client. ```python from flask import Flask, request, redirect import requests from webflow import WebflowClient from dotenv import load_dotenv import os load_dotenv() app = Flask(__name__) client_id = os.getenv('CLIENT_ID') client_secret = os.getenv('CLIENT_SECRET') redirect_uri = os.getenv('REDIRECT_URI') state = os.getenv('STATE') # We'll add the necessary endpoints here in the steps below if __name__ == '__main__': app.run(port=3000) ``` -------------------------------- ### Get Workspace Audit Logs with Webflow Python Package Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/workspace-token.mdx Use the Webflow Python package to retrieve audit logs. Install the package using 'pip install webflow'. Replace YOUR_ACCESS_TOKEN with your workspace token. ```python from webflow.client import Webflow import datetime # Initialize the Webflow client with your access token client = Webflow(access_token="YOUR_ACCESS_TOKEN") # Fetch the list of activity across your workspace audit_logs = client.workspaces.audit_logs.get_workspace_audit_logs( workspace_id_or_slug="hitchhikers-workspace", from_=datetime.datetime.fromisoformat( "2024-04-22 16:00:31+00:00", ), to=datetime.datetime.fromisoformat( "2024-04-22 16:00:31+00:00", ), ) # Print the audit logs print(audit_logs) ``` -------------------------------- ### Using a Site Token with cURL Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/site-token.mdx This example demonstrates how to use a site token to authenticate a GET request to the Webflow API using cURL. ```APIDOC ## GET /v2/sites ### Description Retrieves a list of sites associated with your Webflow account. ### Method GET ### Endpoint https://api.webflow.com/v2/sites ### Parameters #### Headers - **accept** (string) - Required - `application/json` - **authorization** (string) - Required - `Bearer YOUR_API_TOKEN` ### Request Example ```bash curl --request GET \ --url https://api.webflow.com/v2/sites \ --header 'accept: application/json' \ --header 'authorization: Bearer YOUR_API_TOKEN' ``` ### Response #### Success Response (200) - **sites** (array) - A list of site objects. #### Response Example ```json { "sites": [ { "id": "60b8a7b3c1d4a1001f8e4e5f", "name": "My Awesome Site", "displayName": "My Awesome Site", "workspaceId": "60b8a7b3c1d4a1001f8e4e5d", "createdAt": "2021-06-03T10:00:00.000Z", "updatedAt": "2021-06-03T10:00:00.000Z", "liveItemId": "60b8a7b3c1d4a1001f8e4e60" } ] } ``` ``` -------------------------------- ### Start Node.js Server Source: https://developers.webflow.com/data/v2.0.0/reference/oauth-app.mdx Use this command to start your Node.js server, which will handle the OAuth flow and token exchange. ```bash node server.js ``` -------------------------------- ### Fetch Workspace Audit Logs using Webflow Python SDK Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/workspace-token.mdx This example demonstrates how to fetch workspace audit logs using the Webflow Python SDK. First, install the package (`pip install webflow`). Replace `YOUR_ACCESS_TOKEN` with your workspace token and `hitchhikers-workspace` with your workspace identifier. ```APIDOC ## Fetch Workspace Audit Logs using Webflow Python SDK ### Description This method retrieves a list of activity across your workspace using the Webflow Python SDK. ### Method Signature `client.workspaces.audit_logs.get_workspace_audit_logs(workspace_id_or_slug, from_, to)` ### Parameters #### Path Parameters - **workspace_id_or_slug** (string) - Required - The ID or slug of the workspace. #### Query Parameters - **from_** (datetime) - Optional - The start date for the audit logs. - **to** (datetime) - Optional - The end date for the audit logs. ### Request Example ```python from webflow.client import Webflow import datetime # Initialize the Webflow client with your access token client = Webflow(access_token="YOUR_ACCESS_TOKEN") # Fetch the list of activity across your workspace # Note: The actual variable name for the response is not explicitly defined in the source, using 'audit_logs' as per example. audit_logs = client.workspaces.audit_logs.get_workspace_audit_logs( workspace_id_or_slug="hitchhikers-workspace", from_=datetime.datetime.fromisoformat( "2024-04-22 16:00:31+00:00", ), to=datetime.datetime.fromisoformat( "2024-04-22 16:00:31+00:00", ), ) # Print the audit logs print(audit_logs) ``` ### Response #### Success Response The response will be an object containing a list of audit log items and pagination details, similar to the cURL example response. ``` -------------------------------- ### Fetch Workspace Audit Logs using Webflow JavaScript SDK Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/workspace-token.mdx This example shows how to fetch workspace audit logs using the Webflow JavaScript SDK. Ensure you have installed the SDK (`npm install webflow-api`) and replace `YOUR_API_TOKEN` with your workspace token and `workspace_id_or_slug` with your workspace identifier. ```APIDOC ## Fetch Workspace Audit Logs using Webflow JavaScript SDK ### Description This method retrieves a list of activity across your workspace using the Webflow JavaScript SDK. ### Method Signature `webflow.workspaces.auditLogs.getWorkspaceAuditLogs(workspaceIdOrSlug, options)` ### Parameters #### Path Parameters - **workspaceIdOrSlug** (string) - Required - The ID or slug of the workspace. #### Query Parameters - **from** (string) - Optional - The start date for the audit logs (ISO 8601 format). - **to** (string) - Optional - The end date for the audit logs (ISO 8601 format). ### Request Example ```javascript import { WebflowClient } from 'webflow-api'; const token = 'YOUR_API_TOKEN'; const webflow = new WebflowClient({ accessToken: token }); (async () => { try { const auditLogs = await webflow.workspaces.auditLogs.getWorkspaceAuditLogs('workspace_id_or_slug', { from: "2024-04-22T16:00:31Z", to: "2024-04-22T16:00:31Z" }); console.log(auditLogs); } catch (error) { console.error('Error fetching audit logs:', error); } })(); ``` ### Response #### Success Response The response will be an object containing a list of audit log items and pagination details, similar to the cURL example response. ``` -------------------------------- ### Initialize Node.js Server Source: https://developers.webflow.com/data/v2.0.0/reference/oauth-app.mdx Sets up an Express server in Node.js, loads environment variables, and initializes the Webflow client. ```javascript require('dotenv').config(); const express = require('express'); const { WebflowClient } = require('webflow-api'); const app = express(); const port = 3000; /* We'll add the necessary endpoints here in the steps below. */ app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`); }); ``` -------------------------------- ### GET /data/reference/ecommerce/settings/get-settings Source: https://developers.webflow.com/data/reference/webhooks/events/user-account-deleted Retrieves the current ecommerce settings. Use this to fetch configuration details for your ecommerce setup. ```APIDOC ## GET /data/reference/ecommerce/settings/get-settings ### Description Retrieves the current ecommerce settings. Use this to fetch configuration details for your ecommerce setup. ### Method GET ### Endpoint /data/reference/ecommerce/settings/get-settings ### Parameters #### Path Parameters #### Query Parameters #### Request Body ### Request Example ```json { "example": "request body" } ``` ### Response #### Success Response (200) - **field1** (type) - Description #### Response Example ```json { "example": "response body" } ``` ``` -------------------------------- ### Initialize Git Repository Source: https://developers.webflow.com/devlink/getting-started.mdx Navigate to your new project directory and initialize a Git repository. Remember to publish this repository to GitHub for Webflow Cloud integration. ```bash cd your-project-name git init ``` -------------------------------- ### Get Workspace Audit Logs with Webflow JavaScript SDK Source: https://developers.webflow.com/data/v2.0.0/reference/authentication/workspace-token.mdx Use the Webflow JavaScript SDK to fetch audit logs. Ensure you have installed the 'webflow-api' package. Replace YOUR_API_TOKEN with your workspace token. ```javascript import { WebflowClient } from 'webflow-api'; const token = 'YOUR_API_TOKEN'; const webflow = new WebflowClient({ accessToken: token }); (async () => { try { const auditLogs = await webflow.workspaces.auditLogs.getWorkspaceAuditLogs('workspace_id_or_slug', { from: "2024-04-22T16:00:31Z", to: "2024-04-22T16:00:31Z" }); console.log(auditLogs); } catch (error) { console.error('Error fetching audit logs:', error); } })(); ``` -------------------------------- ### Install Webflow Skills CLI Source: https://developers.webflow.com/mcp/reference/skills.mdx Use this command to open an interactive installer for selecting and adding Webflow skills to your agents. ```bash npx skills add webflow/webflow-skills ``` -------------------------------- ### Navigation Links Source: https://developers.webflow.com/data/reference/webhooks/events/collection-item-unpublished Provides navigation links to different sections of the Webflow Developer Documentation, including Reference, Guides, Examples, and Changelog. ```javascript self.__next_f.push([1,"13:[\"$\",\"$L62\",null,{\"children\":[[[\"$\",\"$L63\",\"74424b1c89d6462d590388243a2913b547939eac3dea11b7d56949b831f1a37a\",{\"value\":\"74424b1c89d6462d590388243a2913b547939eac3dea11b7d56949b831f1a37a\",\"asChild\":true,\"children\":[\"$\",\"$L64\",null,{\"className\":\"\",\"href\":\"/data/reference/rest-introduction\",\"scroll\":true,\"id\":\"74424b1c89d6462d590388243a2913b547939eac3dea11b7d56949b831f1a37a\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Reference\"}]]}]}],\"$\",\"$L63\",\"ab0f957654d59d5c14e660c859421e808e667cdb0671cebe907ac00932b95164\",{\"value\":\"ab0f957654d59d5c14e660c859421e808e667cdb0671cebe907ac00932b95164\",\"asChild\":true,\"children\":[\"$\",\"$L64\",null,{\"className\":\"\",\"href\":\"/data/docs/getting-started-apps\",\"scroll\":true,\"id\":\"ab0f957654d59d5c14e660c859421e808e667cdb0671cebe907ac00932b95164\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Guides\"}]]}]}],\"$\",\"$L63\",\"ae92f70b8682098a75e458e11ff34b29bf5349d3464057e30f0db5fc8f75c56d\",{\"value\":\"ae92f70b8682098a75e458e11ff34b29bf5349d3464057e30f0db5fc8f75c56d\",\"asChild\":true,\"children\":[\"$\",\"$L64\",null,{\"className\":\"\",\"href\":\"/data/examples\",\"scroll\":true,\"id\":\"ae92f70b8682098a75e458e11ff34b29bf5349d3464057e30f0db5fc8f75c56d\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Examples\"}]]}]}],\"$\",\"$L63\",\"8660740addfefba41835e506f5b01cc6551c83221aaf70b5503ac7e0ece891fd\",{\"value\":\"8660740addfefba41835e506f5b01cc6551c83221aaf70b5503ac7e0ece891fd\",\"asChild\":true,\"children\":[\"$\",\"$L64\",null,{\"className\":\"\",\"href\":\"/data/changelog\",\"scroll\":true,\"id\":\"8660740addfefba41835e506f5b01cc6551c83221aaf70b5503ac7e0ece891fd\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Changelog\"}]]}]}],\"$undefined\"}]}]\n22:[[\"$\",\"$L65\",null,{\"nodeId\":\"757110196c72cd89d6f2b214bd23d753ecb627377d56c1992e89abb67f994aae\",\"sidebarRootNodeId\":\"71fec8b28c287579d01acf0eadc1fe65cadece02c198bf6fb8188237e00c4c37\",\"tabId\":\"74424b1c89d6462d590388243a2913b547939eac3dea11b7d56949b831f1a37a\",\"productId\":\"Data API\",\"productSlug\":\"data\",\"versionId\":\"v2\",\"versionSlug\":\"data\",\"versionIsDefault\":false,\"productIsDefault\":false}],\"$L66\"]\n24:null\n28:[[\"$\",\"title\",\"0\",{\"children\":\"Collection Item Unpublished | Webflow Developer Documentation\"}],[\"$\",\"meta\",\"1\",{\"name\":\"application-name\",\"content\":\"Webflow Developer Documentation\"}],[\"$\",\"meta\",\"2\",{\"name\":\"generator\",\"content\":\"https://buildwithfern.com\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://developers.webflow.com/data/reference/webhooks/events/collection-item-unpublished\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Collection Item Unpublished | Webflow Developer Documentation\"}],[\"$\",\"meta\",\"5\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"6\",{\"name\":\"twitter:title\",\"content\":\"Collection Item Unpublished | Webflow Developer Documentation\"}],[\"$\",\"link\",\"7\",{\"rel\":\"icon\",\"href\":\"https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/2025-09-18T03:33:40.085Z/assets/favicon.jpeg\"}]]\n"])self.__next_f.push([1,"67:I[95695,[\"2380\",\"static/chunks/2380-a50e08f79d320d9e.js\",\"3161\",\"static/chunks/3161-c335cdf24fe8f001.js\",\"8321\",\"static/chunks/8321-1451310857f6f6db.js\",\"2975\",\"static/chunks/2975-75994b6a13d07b98.js\",\"7909\",\"static/chunks/7909"]]) ``` -------------------------------- ### Integrate Webflow Components in Next.js Source: https://developers.webflow.com/devlink/getting-started.mdx Update your Next.js page component to import and include Navbar and Footer components from the \"/webflow\" directory. This example assumes a React Server Component or Client Component setup. ```typescript "use client"; import { Navbar } from "../../../../webflow/Navbar"; // Import the Navbar component import { Footer } from "../../../../webflow/Footer"; // Import the Footer component export default function Home() { return (

Welcome to Webflow Cloud

This is a simple test using Basic components with enhanced styling.
{ // Your code here console.log("The Browser API is ready to use!"); const consentStatus = wf.getUserTrackingChoice(); console.log(consentStatus); }); ``` -------------------------------- ### Render Navigation Links Source: https://developers.webflow.com/data/reference/webhooks/events/site-publish Renders navigation links for 'Reference', 'Guides', 'Examples', and 'Changelog'. Each link includes a specific ID and class for styling and functionality. ```javascript self.__next_f.push([1,"9:[[\"$\ \",\"$L5b\",null,{\"moduleIds\":[\"components/themes/ThemedDocs.tsx -\u003e ./default/DefaultDocs\"]}], [\"$\ \",\"$L5c\",null,{\"announcement\":[\"$\ \",\"$L5d\",null,{\"announcement\":\" Build faster with AI \u003cimg src='https://dhygzobemt712cloudfront.net/Icons/Dark/24px/Ai.svg' alt='AI icon' style='display:inline;vertical-align:middle;width:1em;height:1.2em;padding-bottom:2px;'/\u003e Get started with Webflow's \u003ca href='/data/docs/ai-tools'\u003eMCP Server\u003c/a\u003e\",\"children\":[\"$\ \",\"$55\",null,{\"fallback\":\" Build faster with AI \u003cimg src='https://dhygzobemt712cloudfront.net/Icons/Dark/24px/Ai.svg' alt='AI icon' style='display:inline;vertical-align:middle;width:1em;height:1.2em;padding-bottom:2px;'/\u003e Get started with Webflow's \u003ca href='/data/docs/ai-tools'\u003eMCP Server\u003c/a\u003e\",\"children\":\"$L5e\"}]}], \"header\":[\"$\ \",\"$L5f\",null,{\"className\":\"max-w-page-width mx-auto\",\"logo\":[\"$\ \",\"$55\",null,{\"fallback\":null,\"children\":[\"$\ \",\"$L5\",null,{\"parallelRouterKey\":\"logo\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\ \",\"$L7\",null,{ } ],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]},\"versionSelect\":[\"$\ \",\"$55\",\"version-select-1\",{\"fal ``` -------------------------------- ### Install Emotion Utility Package Source: https://developers.webflow.com/code-components/frameworks-and-libraries.mdx Install the necessary Emotion utility package for styling Material UI components within the Shadow DOM. ```bash npm i @webflow/emotion-utils ``` -------------------------------- ### Navigation Links for Webflow Source: https://developers.webflow.com/data/v1.0.0/reference/cms/items/collection-item-deleted These snippets represent navigation links within the Webflow platform. They include hrefs for submitting an app, getting started, and logging in, with associated styling classes and intent. ```JavaScript {\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://developers.webflow.com/submit\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Submit an app\"} ``` ```JavaScript {\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/signup\",\"icon\":\"$undefined\",\"intent\":\"primary\",\"rightIcon\":\"$undefined\",\"variant\":\"filled\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Get started\"} ``` ```JavaScript {\"id\":\"$undefined\",\"className\":\"group cursor-pointer\",\"href\":\"https://webflow.com/dashboard/login\",\"icon\":\"$undefined\",\"intent\":\"none\",\"rightIcon\":\"$undefined\",\"variant\":\"minimal\",\"rounded\":\"$undefined\",\"scroll\":true,\"children\":\"Log in\"} ``` -------------------------------- ### Initialize New Designer Extension Project Source: https://developers.webflow.com/designer/reference/webflow-cli.mdx Initialize a new Designer Extension project with a specified name and an optional template. Use 'webflow extension list' to see available templates. ```bash webflow extension init [template] ``` ```bash webflow extension init my-react-extension react ``` -------------------------------- ### Webflow Navigation Links Source: https://developers.webflow.com/data/reference/webhooks/events/page-metadata-updated Provides navigation links for essential developer actions such as logging in, submitting an app, and getting started with Webflow. These links are typically used in headers or call-to-action sections. ```javascript self.__next_f.push([ 1, "7b:I[26173,[\"2514\",\"static/chunks/f2ccdbd5-d4b9226322997a0a.js\",\"8809\",\"static/chunks/4f318f91-5e6b7b683cd615d3.js\",\"679\",\"static/chunks/25691670-2d18d0a9ea0361a8.js\",\"2380\",\"static/chunks/2380-a50e08f79d320d9e.js\",\"3161\",\"static/chunks/3161-c335cdf24fe8f001.js\",\"8321\",\"static/chunks/8321-1451310857f6f6db.js\",\"2975\",\"static/chunks/2975-75994b6a13d07b98.js\",\"8364\",\"static/chunks/8364-68adc3df19856510.js\",\"7909\",\"static/chunks/7909-bb24f71a9da69f06.js\",\"5616\",\"static/chunks/5616-469cf25d13fc196a.js\",\"5724\",\"static/chunks/5724-b9d388b451d60426.js\",\"1365\",\"static/chunks/1365-4040bfdd57f1969e.js\",\"5041\",\"static/chunks/5041-5ffb126794e478b0.js\",\"7055\",\"static/chunks/7055-a22fbd3333e44dab.js\",\"4032\",\"static/chunks/4032-709954a22b5bac47.js\",\"1026\",\"static/chunks/1026-105090b655e897eb.js\",\"9132\",\"static/chunks/9132-0766c86104189ffa.js\",\"1642\",\"static/chunks/1642-582130639ceab07d.js\",\"5488\",\"static/chunks/5488-fc34eea3f45445ab.js\",\"5910\",\"static/chunks/5910-82980b7bc9551e7e.js\",\"92\",\"static/chunks/92-49dc8fef18002b36.js\",\"3599\",\"static/chunks/3599-deb75ae78d576c97.js\",\"701\",\"static/chunks/701-4ab55d0d70350daf.js\",\"7085\",\"static/chunks/7085-6fbf70e905b335fb.js\",\"7109\",\"static/chunks/7109-dd513ee22178f32b.js\",\"751\",\"static/chunks/751-52ef397e26aaf5fd.js\",\"7050\",\"static/chunks/app/%5Bhost%5D/%5Bdomain%5D/static/%40sidebar/%5Bslug%5D/page-5bfb104ac0431998.js\"],\"SidebarTabsRootImpl\" ]) self.__next_f.push([ 1, "tatic/chunks/7055-a22fbd3333e44dab.js\",\"4032\",\"static/chunks/4032-709954a22b5bac47.js\",\"1026\",\"static/chunks/1026-105090b655e897eb.js\",\"9132\",\"static/chunks/9132-0766c86104189ffa.js\",\"1642\",\"static/chunks/1642-582130639ceab07d.js\",\"5488\",\"static/chunks/5488-fc34eea3f45445ab.js\",\"5910\",\"static/chunks/5910-82980b7bc9551e7e.js\",\"92\",\"static/chunks/92-49dc8fef18002b36.js\" ]) ``` -------------------------------- ### Webflow Navigation Links Source: https://developers.webflow.com/data/reference/webhooks/events/comment-created Provides the structure for navigation links within the Webflow developer documentation. Includes links for logging in, submitting an app, and getting started. ```javascript self.__next_f.push([ "$", "$L78", "0", { "id": "$undefined", "className": "group cursor-pointer", "href": "https://webflow.com/dashboard/login", "icon": "$undefined", "intent": "none", "rightIcon": "$undefined", "variant": "minimal", "rounded": "$undefined", "scroll": true, "children": "Log in" } ]); self.__next_f.push([ "$", "$L78", "1", { "id": "$undefined", "className": "group cursor-pointer", "href": "https://developers.webflow.com/submit", "icon": "$undefined", "intent": "none", "rightIcon": "$undefined", "variant": "minimal", "rounded": "$undefined", "scroll": true, "children": "Submit an app" } ]); self.__next_f.push([ "$", "$L78", "2", { "id": "$undefined", "className": "group cursor-pointer", "href": "https://webflow.com/dashboard/signup", "icon": "$undefined", "intent": "primary", "rightIcon": "$undefined", "variant": "filled", "rounded": "$undefined", "scroll": true, "children": "Get started" } ]); ``` -------------------------------- ### Initialize Webflow Cloud Project Source: https://developers.webflow.com/cli/command-reference.mdx Initializes a new Webflow Cloud project from a template. You can specify the framework, mount path, and the Webflow site ID to connect to. ```bash webflow cloud init -f astro -m /app -s 1234567890 ```