> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developers.webflow.com/apps/docs/designer-extensions/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server. # Designer API & Extensions ![A Designer Extension creating elements on the canvas.](/_fern-files/webflow.docs.buildwithfern.com/53e647a7afdd983ee0428ad7cd5475417a56edb0a62afe1b90499db3eb819c17/assets/images/7500640-New_Apps_Screengram.gif) Designer Extensions are web applications that run directly inside the Webflow Designer. Using the [Designer APIs](/designer/reference/introduction), you can create powerful new tools that integrate seamlessly with a user's workflow, helping them design, create, and optimize their sites faster than ever. ## What you can build Using the [Designer APIs](/designer/reference/introduction), you can build extensions that programmatically interact with a user's design and content in real-time. This opens up a world of possibilities for workflow automation and creative tooling. #### Automate layout and content creation Generate complex components, populate data from third-party sources, or build entire page structures with a single click. #### Manage design systems Create tools that allow users to apply and maintain consistent branding, manage variables, and swap themes. #### Streamline asset management Build extensions that connect to external asset libraries, optimize images, or automate asset organization. #### Create dynamic site structures Programmatically add and organize pages and folders, perfect for sites with complex information architecture. ## How they work Designer Extensions are single-page applications that run inside a secure `iframe` within the Webflow Designer. They use Webflow's client-side **Designer APIs** to communicate with the Designer, allowing your app to perform actions that would typically require manual user intervention. For more advanced use cases, your extension can also integrate with your own backend services and third-party APIs including Webflow's [Data APIs](/data/reference/introduction). ## The development workflow From your first line of code to a public Marketplace launch, here's an overview of the development process. #### Register your App in Webflow Before you can start building, you need to register a new app within your Webflow Workspace settings. [Register your App](/data/docs/register-an-app) #### Create a Designer Extension from the CLI Use the Webflow CLI to scaffold a starter project and run a local development server for live testing. [Create a Designer Extension from the CLI](/apps/docs/designer-extensions/build-a-designer-extension) #### Build with the Designer APIs The Designer APIs are how your app will interact with the Webflow canvas, providing a robust interface to control the Designer. [Build with the Designer APIs](/designer/reference/introduction) #### Publish to your Workspace When you're ready, upload your extension to Webflow to share it with your team for testing and internal use in your Workspace. [Publish to your Workspace](/apps/docs/publishing-your-app) #### Submit to the Marketplace Share your creation with the world by submitting it to the Webflow Marketplace. [Submit to the Marketplace](/apps/docs/marketplace/submitting-your-app) ## FAQs #### Can I use the Data APIs in my Designer Extension? Yes, you can use the [Data APIs](/data/reference/introduction) in your Designer Extension to access and update data from Webflow's servers. This is called a **Hybrid App**. When you setup your app, you'll need to select both the **Data Client** and **Designer Extension** options. #### Which frameworks and libraries can I use to build my Designer Extension? You can use any framework that outputs static resources and runs in a browser environment. Just make sure your extension fits within the iframe dimensions provided by Webflow. #### How do I test my Designer Extension? #### Install your extension on a test site In the left sidebar of your workspace, navigate to **Apps & Integrations** > **Develop**. Click the "..." button next to your app and select **Install App**. You'll see an authorization screen where you can select the sites or workspace you want to install the app on. #### Run the extension in development mode In your terminal, navigate to your project folder and run the following command: ```bash webflow extension serve ``` This will start development mode locally (port 1337). #### Preview and interact with your extension in the Designer On your test site, open the Apps pane and find your app. Click "Launch Development App" to preview and interact with your locally hosted extension in the Designer. #### Why isn't my extension interacting with Webflow as expected? * Double-check your use of the [Designer APIs](/designer/reference/overview) and ensure you’re using the correct methods. * Check the browser console for errors and review our [error handling guidelines](/designer/reference/error-handling). * Designer APIs only access content on the current page, not other sites or pages. * Make sure your app has the right permissions and scopes. * For Data API issues, verify you’re using the correct endpoints and valid tokens. #### Why does my app look different in Webflow than expected? * Designer Extensions run in an iframe with controlled dimensions. Check your configuration and use [resizing methods](https://developers.webflow.com/designer/reference/resize-extension) if needed. * Use scoped CSS or scoped class names to avoid style conflicts with Webflow’s native styles. * Test at different viewport sizes to ensure responsive behavior. #### Why can't I upload a new version of my Designer Extension Bundle? Only Workspace admins can upload new bundles. If you’re not an admin, contact your Workspace administrator to upload the bundle or grant you the necessary permissions. #### Why isn't my extension showing up in Webflow? * Make sure you’ve [bundled your app with the Webflow CLI](/apps/docs/publishing-your-app#build-your-extension) and uploaded your Designer Extension via the Dashboard. * Confirm the app is installed on your site or workspace (check the App Development section in your workspace). ## Docs - [Create your first Designer Extension](https://developers.webflow.com/data/v2.0.0-beta/docs/designer-extensions/getting-started.md): A quick guide to help you set up a Designer Extension and start creating Apps that work directly in the designer - [How to bundle and upload your Designer Extension to Webflow](https://developers.webflow.com/data/v2.0.0-beta/docs/publishing-your-app.md): A step-by-step guide to building, bundling, and uploading your Designer Extension to a Webflow Workspace. - [Configuring your Designer Extension](https://developers.webflow.com/designer/guides/configuring-your-app.md): A comprehensive guide to setting up and configuring your Webflow Designer Extension. - [Webflow CLI Reference](https://developers.webflow.com/designer/reference/webflow-cli.md): A comprehensive reference for the Webflow CLI, used for developing Designer Extensions. - [Design Guidelines](https://developers.webflow.com/data/v2.0.0-beta/designer/docs/design-guidelines.md): A guide on designing for Webflow Apps for the designer