Step-by-Step Guide to Building and Hosting Webflow Apps

What Are Webflow Apps?

Webflow Apps allow developers to extend Webflow’s platform in two main ways:

• Designer Extensions: Mini-apps that run directly inside the Webflow Designer UI. They provide custom panels, workflows, or integrations through an embedded iframe.
• Data Clients: Server-side applications that connect to Webflow through its OAuth-based REST Data API. These are hosted by you and can automate tasks, sync CMS data, or integrate with third-party services.

You can build either type individually, or combine them into a hybrid app that provides both a Designer interface and backend-powered automation.

How Hosting Works

• Designer Extension: Bundled with Webflow. You build it locally using the Webflow CLI, create a bundle.zip, and upload it to your Workspace. Webflow then serves it inside the Designer. You don’t need external hosting for the extension itself.
• Data Client: Hosted by you. This is a regular backend app (Node.js, Python, PHP, etc.) that handles OAuth, stores tokens, and calls Webflow’s Data API. You can host it on platforms like Vercel, Cloudflare Workers, AWS, or your own server.

Step-by-Step: Building a Webflow Data Client (Backend)

1. Register an App: Go to the Webflow Developer Portal, create a new app, and enable the Data Client block. Note your client_id and client_secret, and set your Redirect URI.
2. Choose OAuth Scopes: Select only the permissions you need (e.g., cms:read, cms:write, sites:read).
3. Implement OAuth:
   • Redirect users to Webflow’s consent screen.
   • Receive an authorization code.
   • Exchange it for an access token via https://api.webflow.com/oauth/access_token.
   • Store the token securely in your backend.
4. Make API Calls: Use the token to call endpoints such as /v2/sites or /v2/collections. Pass the token in the Authorization: Bearer header.
5. Handle Rate Limits: Respect Webflow’s request limits (60–120 requests/minute depending on plan, and 1 publish per minute).

Step-by-Step: Building a Designer Extension (Frontend)

1. Install the CLI: Run npm i -g @webflow/webflow-cli.
2. Scaffold a Project: webflow extension init my-extension.
3. Develop Locally: Run npm run dev to test the extension inside the Designer’s Apps panel. It loads as an iframe.
4. Build & Upload: Run npm run build to create bundle.zip, then upload it to your Webflow Workspace → Integrations → App Development.
5. Publish: Publish the uploaded version to make it available in your workspace or to other users.

Hybrid Approach

Many developers choose to build hybrid apps: a Designer Extension for UI (so users can trigger actions inside Webflow) and a backend Data Client for heavy lifting (like syncing thousands of CMS items or integrating with AI services).

Distribution & Installation

Once built, apps can be:

• Private: Installed only within your workspace.
• Invite-only: Shared with specific clients.
• Marketplace: Published in the Webflow Marketplace for public distribution, installable directly from the Designer’s Apps panel.

Production Checklist

• App registered with Data Client and/or Designer Extension enabled.
• OAuth implemented with secure token storage and refresh handling.
• Rate limits respected (use backoff on 429 errors).
• Designer Extension built, zipped, and uploaded.
• App version published and tested via its Installation URL.
• Distribution method decided (Private, Invite-only, or Marketplace).

Conclusion

Webflow Apps open a powerful ecosystem for developers who want to extend Webflow beyond its native capabilities. Whether you build a lightweight Designer Extension, a robust Data Client, or a hybrid solution, the process follows standard web development practices combined with Webflow’s CLI and APIs. With the right hosting setup and OAuth implementation, you can create seamless integrations that scale for both personal and commercial use.