### Clone Webflow App Starter

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Clones the official Webflow app starter repository to your local machine. This command requires Git to be installed. It then navigates into the cloned directory and installs project dependencies using npm.

```shell
git clone https://github.com/Webflow-Examples/webflow-app-starter-v2
cd webflow-app-starter-v2
npm install
```

--------------------------------

### Start Webflow Development Server

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Starts the local development server for your Webflow application. This command assumes Node.js and npm are installed and dependencies have been installed via `npm install`. The server typically runs on `http://localhost:3000`.

```shell
npm run dev
```

--------------------------------

### Setup Development Environment

Source: https://developers.webflow.com/designer/data/docs/working-with-localization

Steps to clone the example repository, navigate into the directory, and install project dependencies using npm.

```bash
git clone https://github.com/Webflow-Examples/Localization-Demo.git
cd localization-demo
npm install
```

--------------------------------

### Node.js Server Setup and Dependencies

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Initializes a Fastify server with security headers, sets up environment variable loading, and configures a LevelDB database for storing access tokens. It imports necessary modules like WebflowClient, Fastify, and Level.

```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();
```

--------------------------------

### Clone Project and Install Dependencies

Source: https://developers.webflow.com/designer/data/docs/custom-code

Demonstrates cloning the example repository for custom code integration and installing project dependencies using npm. This setup is crucial for running the example locally.

```bash
git clone https://github.com/Webflow-Examples/custom-code-examples/tree/main
cd custom-code-examples
npm install
npm run install-project
```

--------------------------------

### Clone and Install Webflow Starter Code

Source: https://developers.webflow.com/designer/data/docs/working-with-the-cms

Commands to clone the official Webflow CMS examples repository and install its Node.js dependencies using npm.

```shell
git clone https://github.com/Webflow-Examples/cms-examples.git
cd cms-examples
npm install
```

--------------------------------

### Create and Setup Designer Extension Project

Source: https://developers.webflow.com/designer/data/docs/designer-extensions/getting-started

Scaffolds a new Designer Extension project using the Webflow CLI, navigates into the project directory, and installs necessary dependencies. You can specify a template like 'react' during initialization.

```bash
webflow extension init my-extension-name react
cd my-extension-name
npm install
```

--------------------------------

### Configure Webflow Credentials

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Sets up the necessary environment variables for your Webflow application. You need to replace placeholder values with your actual Client ID and Secret obtained from your Webflow Workspace settings. This file is typically named `.env`.

```ini
WEBFLOW_CLIENT_ID=your_client_id
WEBFLOW_SECRET=your_client_secret
```

--------------------------------

### Webflow REST API - Sites Endpoint Documentation

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Documentation for interacting with the Webflow REST API, specifically the endpoint for listing sites. This includes details on how to authenticate using the WebflowClient and the expected response format. It outlines the process of retrieving an access token and using it to instantiate the client for API calls.

```APIDOC
WebflowClient:
  __init__(options: { accessToken: string })
    accessToken: The OAuth 2.0 access token obtained from Webflow.

  sites:
    list():
      Description: Retrieves a list of all sites associated with the authenticated account.
      Method: GET
      Endpoint: /sites
      Authentication: Bearer Token (via WebflowClient.accessToken)
      Parameters:
        None directly in the request, but implicitly uses the authenticated client.
      Returns:
        An object containing a list of sites. Example:
        {
          "sites": [
            {
              "id": "52e36111a4d7050002000002",
              "name": "My Awesome Site",
              "created_on": "2014-01-24T15:41:05.000Z",
              "slug": "my-awesome-site",
              "status": "published",
              "preview_url": "https://my-awesome-site.webflow.io",
              "thumbnail": "..."
            }
          ]
        }
      Error Conditions:
        401 Unauthorized: If the access token is invalid or expired.
        500 Internal Server Error: For server-side issues.

Related Methods:
  - WebflowClient.getAccessToken({ clientId, clientSecret, code }): Exchanges an authorization code for an access token.
```

--------------------------------

### Make Webflow REST API Request (List Sites) (JavaScript)

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

This example shows how to make authenticated requests to the Webflow REST API after obtaining an access token. It retrieves the token from storage, initializes an authenticated WebflowClient, and calls the 'sites.list()' method to fetch the user's sites. Error handling for unauthorized access (401) is included.

```javascript
server.get("/sites", async (req, reply) => {
  try {
    const accessToken = await db.get("token");

    const webflow = new WebflowClient({ accessToken });

    const sites = await webflow.sites.list();
    return sites;

  } catch (error) {
    console.error("API Error:", error);

    // Handle different types of errors
    if (error.response?.status === 401) {
      return reply.code(401).send({
        error: "Invalid token",
        message: "Please authenticate again",
      });
    }

    return reply.code(500).send({
      error: "Server error",
      message: "Failed to fetch sites",
    });
  }
});
```

--------------------------------

### Webflow Designer API Overview

Source: https://developers.webflow.com/designer/data/docs/hybrid-apps

Provides an overview of the Webflow Designer API, its capabilities, and navigation to key sections like Reference, Guides, Examples, and Changelog.

```APIDOC
Designer API:
  Control the Webflow Designer

Navigation:
  - Reference: /designer/reference/introduction
  - Guides: /designer/data/docs/getting-started-apps
  - Examples: /designer/examples
  - Changelog: /designer/changelog
```

--------------------------------

### Install Webflow CLI

Source: https://developers.webflow.com/designer/data/docs/designer-extensions/getting-started

Installs the Webflow Command Line Interface globally using npm. This tool is essential for creating, managing, and running Designer Extensions locally.

```bash
npm i -g @webflow/webflow-cli
```

--------------------------------

### Request Webflow Access Token using SDK (JavaScript)

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

This snippet demonstrates the server-side process of exchanging an authorization code for an access token using the Webflow JavaScript SDK. It handles the OAuth 2.0 flow, stores the token securely, and redirects the user upon successful authentication. Dependencies include the Webflow SDK, a database client, and environment variables for client credentials.

```javascript
server.get("/auth", async (req, reply) => {
  try {
    // Exchange the code for an access token
    const token = await WebflowClient.getAccessToken({
      clientId: WEBFLOW_CLIENT_ID,
      clientSecret: WEBFLOW_SECRET,
      code: code, // Assuming 'code' is available from the request query parameters
    });

    // Store the token in the database
    await db.put("token", token);

    if (NODE_ENV === "development") {
      console.log("\nAccess Token Received:", token, "\n");
    }

    return reply.redirect("/?authorized=true");
  } catch (error) {
    console.error("Auth Error:", error);
    return reply.code(500).send({
      error: "Authentication failed",
      message: error.message,
    });
  }
});
```

--------------------------------

### Start Development Server

Source: https://developers.webflow.com/designer/data/docs/designer-extensions/getting-started

Command to start the development server for the Webflow Designer Extension. This command concurrently runs the CLI's 'webflow extension serve' and webpack in watch mode for live updates.

```shell
npm run dev
```

--------------------------------

### Webflow App Installation and Testing

Source: https://developers.webflow.com/designer/data/docs/faqs-and-troubleshooting

Apps must be published to the Webflow Marketplace (publicly or privately) to be installable by other users. For pre-publication testing with a limited group, contact Webflow support with a list of user emails.

```APIDOC
App Installation Requirements:
  - Published to Marketplace: Apps must be submitted and approved for either public or private listing.

Pre-Publication Testing:
  - Contact: Email developers@webflow.com.
  - Limit: Up to 5 Webflow user emails can be provided.
  - Action: Webflow support adds these users to a test group, enabling them to install the app using a specific install URL.
  - Install URL Reference: https://developers.webflow.com/data/docs/submitting-your-app#installation-configuration
```

--------------------------------

### Webflow App Registration: Installation Settings

Source: https://developers.webflow.com/designer/data/docs/register-an-app

Optional settings to control how your app can be installed by users. This feature allows restricting installations to a single site or enabling broader access across multiple sites or the entire workspace.

```APIDOC
Installation Settings:
  Restrict app installation to a specific site: boolean (When enabled, users can only authorize your app for a single site. Default is disabled.)
```

--------------------------------

### Webflow App Development Resources

Source: https://developers.webflow.com/designer/data/docs/webflows-developer-terms-of-service

Details on developing applications for Webflow, including getting started guides, data clients, designer extensions, and hybrid app development.

```APIDOC
Webflow Apps:
  Getting started: /designer/data/docs/getting-started-apps
  Data Clients: /designer/data/docs/data-clients
  Designer Extensions: /designer/data/docs/designer-extensions
  Hybrid Apps: /designer/data/docs/hybrid-apps
```

--------------------------------

### Webflow Designer API Reference

Source: https://developers.webflow.com/designer/data/docs/localizing-components-beta

Overview of the Designer API, providing control over the Webflow Designer interface and functionality. Includes links to specific guides and examples.

```APIDOC
Designer API:
  Purpose: Control the Webflow Designer.
  Sections:
    - Reference: https://developers.webflow.com/designer/reference/introduction
    - Guides: https://developers.webflow.com/designer/data/docs/getting-started-apps
    - Examples: https://developers.webflow.com/designer/examples
    - Changelog: https://developers.webflow.com/designer/changelog
```

--------------------------------

### Component Instance JSON Response Example

Source: https://developers.webflow.com/designer/data/docs/localizing-components-beta

An example JSON response illustrating the structure of a component instance as returned by the Get Page Content endpoint. It highlights overridden properties that can be localized.

```JSON
{
  "id": "34a7a7db-656d-7f88-167b-408785df039f",
  "type": "component-instance",
  "componentId": "1fa6f97b-84f7-2db3-29cb-1275161e432f",
  "properties": [
    {
      "id": "ea72bc3f-05ad-603b-1c91-6c6d875d1379",
      "text": {
        "html": null,
        "text": "Features"
      }
    },
    {
      "id": "c231a00f-3df8-ec07-15b7-86a4795541c4",
      "type": "Plain Text",
      "label": "Navbar link - Products",
      "text": {
        "html": null,
        "text": "Products"
      }
    },
    {
      "id": "52be38f0-169b-8da1-63f8-951da106280a",
      "type": "Plain Text",
      "label": "Navbar link - Resources",
      "text": {
        "html": null,
        "text": "Resources"
      }
    },
    {
      "id": "68924720-efbe-730d-eccf-47118e486009",
      "type": "Plain Text",
      "label": "Navbar link - Contact",
      "text": {
        "html": null,
        "text": "Contact"
      }
    },
    {
      "id": "6644d791-c4b3-a065-35c5-053d194a759b",
      "type": "Plain Text",
      "label": "Button Text - Get Started",
      "text": {
        "html": null,
        "text": "Get Started"
      }
    }
  ]
}
```

--------------------------------

### Webflow Designer API Overview

Source: https://developers.webflow.com/designer/data/docs/webflows-developer-terms-of-service

Provides an overview of the Webflow Designer API, enabling developers to control the Webflow Designer. Includes navigation to key sections like Reference, Guides, Examples, and Changelog.

```APIDOC
Designer API:
  Description: Control the Webflow Designer.
  Navigation:
    - Reference: /designer/reference/introduction
    - Guides: /designer/data/docs/getting-started-apps
    - Examples: /designer/examples
    - Changelog: /designer/changelog
```

--------------------------------

### Webflow Developer Resources

Source: https://developers.webflow.com/designer/data/docs/webflows-developer-terms-of-service

Key resources for Webflow developers, including example projects, command-line tools, SDKs, and developer workspace access.

```APIDOC
Webflow Developer Resources:
  Examples: https://github.com/Webflow-Examples/
  Webflow CLI: https://www.npmjs.com/package/%40webflow/webflow-cli
  Webflow SDK: https://github.com/webflow/js-webflow-api
  Developer Workspace: /designer/data/docs/developer-workspace
  MCP server and AI tools: /designer/docs/ai-tools
```

--------------------------------

### Submitting Your App to the Webflow Marketplace

Source: https://developers.webflow.com/designer/data/docs/submitting-your-app

A guide detailing the process for submitting applications to the Webflow Marketplace. It covers technical requirements, preparation steps, submission procedures, and post-submission activities.

```APIDOC
Webflow Marketplace App Submission:
  Purpose: Guide for submitting apps for review and publication.
  Steps:
    1. Prepare technical requirements and submission assets.
    2. Submit via the Webflow App submission form (https://developers.webflow.com/submit).
    3. Respond to feedback if necessary.
    4. Publicize upon approval and publication.
  Technical Requirements:
    - App registered to a workspace connected to a public Webflow Profile.
    - Two-factor authentication enabled for an admin account on the workspace.
    - App thoroughly tested and fully functional.
    - Clear documentation and error handling.
    - Adherence to Webflow’s security best practices and privacy guidelines.
  Key Sections:
    - Submission process
    - Technical Requirements
    - Submission preparation
    - Submit your app
    - Installation configuration
    - Choosing your installation URL
    - Best practices for onboarding users
    - Post submission
    - Updating your app on the Marketplace
```

--------------------------------

### Webflow OAuth 2.0 Authorization Flow Initiation

Source: https://developers.webflow.com/designer/data/docs/data-clients/getting-started

Handles the initiation of the OAuth 2.0 authorization flow for Webflow. If no authorization code is present in the request, it redirects the user to Webflow's authorization page using the Webflow JavaScript SDK's authorizeURL method.

```javascript
// OAuth 2.0 authentication endpoint
server.get("/auth", async (req, reply) => {
const { code, error, error_description } = req.query;

// If no code is provided, redirect to the authorization URL
if (!code) {
const installUrl = WebflowClient.authorizeURL({
scope: scopes, // 'scopes' variable is assumed to be defined elsewhere
clientId: WEBFLOW_CLIENT_ID,
// Optional: Add state parameter for CSRF protection
state: Math.random().toString(36).substring(7),
});
return reply.redirect(installUrl);
}
});
```

--------------------------------

### Start Project with npm

Source: https://developers.webflow.com/designer/data/docs/custom-code

Executes the development server for the project using npm. This command is essential for running the application locally during development.

```Bash
$ npm run dev
```

--------------------------------

### Webflow Localization Example Project

Source: https://developers.webflow.com/designer/data/docs/working-with-localization

Provides code samples and localized data for demonstrating website localization workflows within Webflow. This resource helps developers implement multi-locale content strategies.

```JavaScript
// Example: Fetching localized content for a specific locale
// This is a conceptual example, actual implementation depends on Webflow API specifics.

async function getLocalizedContent(siteId, locale) {
  const API_URL = `https://api.webflow.com/sites/${siteId}/localization`;
  try {
    const response = await fetch(API_URL, {
      headers: {
        'Authorization': `Bearer YOUR_API_KEY`
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    // Process data to find content for the specified locale
    return data.content[locale];
  } catch (error) {
    console.error("Error fetching localized content:", error);
    return null;
  }
}

// Example Usage:
// const siteId = "your_site_id";
// getLocalizedContent(siteId, "fr").then(content => {
//   if (content) {
//     console.log("Localized content for France:", content);
//     // Update DOM elements with localized content
//   }
// });
```

--------------------------------

### Example cURL Request for Live Collection Item

Source: https://developers.webflow.com/designer/data/docs/cms-content-delivery

Demonstrates how to fetch a specific published CMS item using cURL. This example includes the necessary URL structure and an Authorization header.

```bash
curl https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live \
  -H "Authorization: Bearer <token>"
```

--------------------------------

### Webflow Marketplace App Development & Submission

Source: https://developers.webflow.com/designer/data/docs/overview

Guides for developing and submitting applications to the Webflow Marketplace. Covers essential steps from following guidelines to marketing your app.

```APIDOC
Webflow Marketplace Developer Resources:

*   **App Guidelines**
    -   Description: Follow safety, quality, and design standards for a smooth submission and approval process.
    -   Related: Submitting your App, Listing your App

*   **Submitting your App**
    -   Description: Use the step-by-step process to submit your app for review.
    -   Related: App Guidelines, Listing your App

*   **Listing your App**
    -   Description: See how your app will appear in the Marketplace and what content to include.
    -   Related: App Guidelines, Submitting your App

*   **Marketing your App**
    -   Description: Learn how to showcase your app to the Webflow community.
    -   Related: App Guidelines, Submitting your App

*   **App Visibility: Public vs. Private**
    -   Description: Choose to make your app public (listed in Marketplace) or private (controlled access via direct install URL).
    -   Related: Private Apps

*   **User Testing Before Publishing**
    -   Description: Test your app with a small group before going live by requesting up to 5 test users via developers@webflow.com.
    -   Related: Testing and managing private apps
```

--------------------------------

### Registering a Webflow App

Source: https://developers.webflow.com/designer/data/docs/register-an-app

A guide detailing the steps required to register a new application with Webflow. This process involves accessing workspace settings and providing necessary application details.

```APIDOC
Registering a Webflow App:

Purpose:
  To create and register a new Webflow App within a specific workspace, enabling development and integration.

Prerequisites:
  - A Webflow account.
  - A Webflow Workspace with Admin permissions.

Steps:
  1. Open the Webflow Dashboard and log in.
  2. Select the desired Workspace for your app (a dedicated development workspace is recommended).
  3. Navigate to Workspace settings.
  4. Go to the 'Apps & Integrations' tab.
  5. Scroll to the 'App Development' section.
  6. Click the 'Create an App' button to open the App creation modal.
  7. Add required app details in the modal.

Permissions:
  - Only Workspace admins can create apps, view client secrets, upload bundles, and modify app settings.
```

--------------------------------

### Serve Webflow Extension Locally

Source: https://developers.webflow.com/designer/data/docs/faqs-and-troubleshooting

Starts a local development server for your Webflow Designer Extension. This command is used to run your extension in development mode, typically listening on port 1337, allowing for live preview and interaction within the Webflow Designer.

```bash
$ webflow extension serve
```

--------------------------------

### Webflow SDK and CLI Resources

Source: https://developers.webflow.com/designer/data/docs/marketplace-guidelines

Links to essential developer tools for interacting with the Webflow platform. Includes the JavaScript SDK for API access and the Webflow CLI for project management.

```APIDOC
Webflow SDK:
  Description: Official JavaScript SDK for interacting with the Webflow API.
  Repository: https://github.com/webflow/js-webflow-api

Webflow CLI:
  Description: Command-line interface for managing Webflow projects and deployments.
  Package: https://www.npmjs.com/package/%40webflow/webflow-cli
```

--------------------------------

### Localized SEO Data Example

Source: https://developers.webflow.com/designer/data/docs/working-with-localization

An example JSON structure representing localized SEO data for a Webflow page, including title, slug, SEO meta tags, and Open Graph properties.

```JSON
{
  "title": "Contactez-nous",
  "slug": "contactez-nous",
  "seo": {
    "title": "Contactez-nous | AstralFund Financier",
    "description": "Contactez AstralFund Financier pour des conseils financiers experts et un soutien. Notre équipe dédiée est là pour vous aider sur votre chemin vers le succès financier. Contactez-nous aujourd'hui."
  },
  "openGraph": {
    "title": "AstralFund Financier - Votre partenaire pour la réussite financière",
    "titleCopied": true,
    "description": "Découvrez les services financiers personnalisés d'AstralFund et prenez le contrôle de votre avenir financier. Contactez-nous pour en savoir plus.",
    "descriptionCopied": true
  }
}
```

--------------------------------

### Webflow SDK and CLI Resources

Source: https://developers.webflow.com/designer/data/docs/register-an-app

Links to official resources for the Webflow SDK and Webflow CLI, which are essential tools for developing and interacting with the Webflow platform.

```APIDOC
Webflow SDK:
  - Description: Official JavaScript SDK for interacting with Webflow APIs.
  - Link: https://github.com/webflow/js-webflow-api

Webflow CLI:
  - Description: Command-line interface for Webflow development tasks.
  - Link: https://www.npmjs.com/package/%40webflow/webflow-cli
```

--------------------------------

### Webhook Event Data Example

Source: https://developers.webflow.com/designer/data/docs/working-with-webhooks

An example of the JSON payload structure sent by Webflow when a form submission event occurs. This payload contains details about the trigger, the submitted data, and the form's schema.

```json
{
  "triggerType": "form_submission",
  "payload": {
    "name": "Contact Us",
    "siteId": "65427cf400e02b306eaa049c",
    "data": {
      "First Name": "Zaphod",
      "Last Name": "Beeblebrox",
      "email": "zaphod@heartofgold.ai",
      "Phone Number": 15550000000
    },
    "schema": [
      {
        "fieldName": "First Name",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c4"
      },
      {
        "fieldName": "Last Name",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c5"
      },
      {
        "fieldName": "email",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c6"
      },
      {
        "fieldName": "Phone Number",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c7"
      }
    ],
    "submittedAt": "2022-09-14T12:35:16.117Z",
    "id": "6321ca84df3949bfc6752327",
    "formId": "65429eadebe8a9f3a30f62d0",
    "formElementId": "4e038d2c-6a1e-4953-7be9-a59a2b453177"
  }
}
```

--------------------------------

### Webflow Designer API Overview

Source: https://developers.webflow.com/designer/data/docs/getting-started-apps

Provides an overview of the Webflow Designer API, its purpose in extending Webflow's capabilities, and the main types of applications that can be built.

```APIDOC
Webflow Designer API:
  Purpose: Control the Webflow Designer and extend its functionality.

App Capabilities:
  1. Data Clients:
     - Description: Harness site data (CMS content, form submissions, translations).
     - Use Cases: Sync data between Webflow and external tools, push content to social media, send form responses to CRMs.
     - APIs Used: Webflow's Data APIs.

  2. Designer Extensions:
     - Description: Automate complex design tasks within the Webflow Designer.
     - Use Cases: Streamline repetitive design work, import/transform assets, apply styles, manage content updates.

  3. Hybrid Apps:
     - Description: Combine Data Clients and Designer Extensions for comprehensive solutions.
     - Use Cases: Integrate content management via APIs with direct design controls for a unified workflow.
```

--------------------------------

### Node.js Webflow Signature Validation Example

Source: https://developers.webflow.com/designer/data/docs/working-with-webhooks

This Node.js example demonstrates how to validate Webflow webhook signatures using Express. It includes parsing JSON bodies, extracting headers, generating the HMAC-SHA256 hash, and performing a timing-safe comparison with the provided signature. It also verifies the timestamp to ensure the request is not older than 5 minutes.

```javascript
const express = require('express');
const crypto = require('crypto');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;
const CLIENT_SECRET = 'your_client_secret'; // Replace with your Webflow OAuth application's client secret

app.use(bodyParser.json()); // Parse JSON request bodies

app.post('/webhook', (req, res) => {
  // Step 1: Extract headers and body from the request
  const requestBody = JSON.stringify(req.body);
  const timestamp = req.headers['x-webflow-timestamp'];
  const providedSignature = req.headers['x-webflow-signature'];

  // Step 2: Verify the signature
  if (!verifyWebflowSignature(CLIENT_SECRET, timestamp, requestBody, providedSignature)) {
    return res.status(400).send('Invalid signature'); // Respond with a 400 Bad Request if verification fails
  }

  // Process the webhook request as necessary
  console.log('Webhook verified and received:', req.body);
  res.status(200).send('Webhook received');
});

function verifyWebflowSignature(clientSecret, timestamp, requestBody, providedSignature) {
  try {
    // Step 3: Convert the timestamp to an integer
    const requestTimestamp = parseInt(timestamp, 10);

    // Step 4: Generate the HMAC hash
    const data = `${requestTimestamp}:${requestBody}`;
    const hash = crypto.createHmac('sha256', clientSecret)
      .update(data)
      .digest('hex');

    // Step 5: Compare the generated hash with the provided signature
    if (!crypto.timingSafeEqual(Buffer.from(hash, 'hex'), Buffer.from(providedSignature, 'hex'))) {
      throw new Error('Invalid signature');
    }

    // Step 6: Validate the timestamp (within 5 minutes)
    const currentTime = Date.now();
    if (currentTime - requestTimestamp > 300000) { // 5 minutes in milliseconds
      throw new Error('Request is older than 5 minutes');
    }

    return true; // The request is valid

  } catch (err) {
    console.error(`Error verifying signature: ${err.message}`);
    return false;
  }
}

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

```

--------------------------------

### Webflow Developer Resources

Source: https://developers.webflow.com/designer/data/docs/submitting-your-app

Key tools and libraries for Webflow developers, including the command-line interface and the JavaScript SDK.

```APIDOC
Developer Resources:
  - Webflow CLI: https://www.npmjs.com/package/%40webflow/webflow-cli
  - Webflow SDK: https://github.com/webflow/js-webflow-api
```

--------------------------------

### Python Webflow Signature Validation Example

Source: https://developers.webflow.com/designer/data/docs/working-with-webhooks

This Python example shows how to validate Webflow webhook signatures using Flask. It covers extracting the timestamp and signature from headers, constructing the data string, generating the HMAC-SHA256 hash with the client secret, and comparing it with the provided signature. It also includes timestamp verification to ensure the request is recent.

```python
from flask import Flask, request, jsonify
import hmac
import hashlib
import json
import time

app = Flask(__name__)

# Replace with your Webflow OAuth application's client secret
CLIENT_SECRET = 'your_client_secret'

# Function to verify the Webflow signature
def verify_webflow_signature(client_secret, timestamp, request_body, provided_signature):
    try:
        # Convert the timestamp to an integer
        request_timestamp = int(timestamp)

        # Generate the HMAC hash
        data = f"{request_timestamp}:{request_body}"
        hash_object = hmac.new(client_secret.encode('utf-8'), data.encode('utf-8'), hashlib.sha256)
        generated_hash = hash_object.hexdigest()

        # Compare the generated hash with the provided signature
        if not hmac.compare_digest(generated_hash, provided_signature):
            raise ValueError('Invalid signature')

        # Validate the timestamp (within 5 minutes)
        current_time = int(time.time())
        if current_time - request_timestamp > 300:  # 5 minutes in seconds
            raise ValueError('Request is older than 5 minutes')

        return True  # The request is valid

    except (ValueError, TypeError) as e:
        print(f"Error verifying signature: {e}")
        return False

@app.route('/webhook', methods=['POST'])
def webhook():
    # Step 1: Extract headers and body from the request
    request_body = request.data.decode('utf-8')
    timestamp = request.headers.get('x-webflow-timestamp')
    provided_signature = request.headers.get('x-webflow-signature')

    # Step 2: Verify the signature
    if not verify_webflow_signature(CLIENT_SECRET, timestamp, request_body, provided_signature):
        return jsonify({'error': 'Invalid signature'}), 400

    # Process the webhook request as necessary
    try:
        webhook_data = json.loads(request_body)
        print('Webhook verified and received:', webhook_data)
        return jsonify({'message': 'Webhook received'}), 200
    except json.JSONDecodeError:
        return jsonify({'error': 'Invalid JSON body'}), 400

if __name__ == '__main__':
    app.run(port=3000)

```

--------------------------------

### Webflow SDK and CLI Resources

Source: https://developers.webflow.com/designer/data/docs/localizing-components-beta

Links to essential developer tools for interacting with Webflow. The Webflow SDK (js-webflow-api) facilitates programmatic access, while the Webflow CLI aids in project management and deployment.

```APIDOC
Webflow SDK:
  Repository: https://github.com/webflow/js-webflow-api
  Description: JavaScript SDK for interacting with the Webflow API.

Webflow CLI:
  Package: @webflow/webflow-cli
  NPM: https://www.npmjs.com/package/%40webflow/webflow-cli
  Description: Command-line interface for managing Webflow projects.
```

--------------------------------

### Get Component Properties API Reference

Source: https://developers.webflow.com/designer/data/docs/localizing-components-beta

Retrieves the localizable properties for a specific component, identified by its ID. This is essential for understanding which parts of a component can be translated.

```APIDOC
GET /data/v2.0.0-beta/reference/pages-and-components/components/get-properties

Description:
  Fetches the localizable properties of a given component.

Parameters:
  - componentId (path parameter): The unique identifier of the component.

Response:
  Returns a JSON object containing the component ID and a list of its properties.
  Each property object includes:
  - id: Unique identifier for the property.
  - label: The display name of the property.
  - type: The data type of the property (e.g., "Plain Text", "Rich Text").
  - text: An object containing the text values, which may include:
    - html: The HTML representation of the content.
    - text: The plain text representation.

Example Response Structure:
{
  "componentId": "658205daa3e8206a523b5ad4",
  "properties": [
    {
      "id": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "label": "Title",
      "type": "Plain Text",
      "text": {
        "html": null,
        "text": "The Hitchhiker's Guide to the Galaxy"
      }
    },
    {
      "id": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "label": "Content",
      "type": "Rich Text",
      "text": {
        "html": "<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>",
        "text": null
      }
    }
  ],
  "pagination": {
    "limit": 2,
    "offset": 0,
    "total": 2
  }
}
```

--------------------------------

### Get User Info Endpoint

Source: https://developers.webflow.com/designer/data/docs/submitting-your-app

Retrieves details about the authenticated user. This endpoint is typically called after a successful OAuth authorization to identify the user within your system.

```APIDOC
GET /data/reference/token/authorized-by

Description:
  Fetches information about the user who authorized the application.

Usage:
  This endpoint is called using an access token obtained via the OAuth flow.

Returns:
  User details, including identifiers and potentially profile information.
```