6. Publishing and distribution

Once you've built and tested your Designer Extension, the next step is to get in in the hands of your eagerly awaiting users! This guide will walk you through the process of uploading, bundling, and publishing your extension.

Building Your Extension

Before you can publish your extension, you need to build it. This process compiles your code into a format that can be executed by the browser. You can build your code using the npm run build command:

npm run build

This command creates a dist directory in your project, which contains the built version of your extension.

Bundling Your Extension

After building your extension, you need to bundle it for submission. The bundle includes all the files necessary to run your extension, packaged into a single .zip file. You can create the bundle using the webflow extension bundle command:

webflow extension bundle

This command creates a bundle.zip file in your project directory.

πŸ“˜

The Extension size limit is 5MB

The bundle size limit is 5MBl If your extension is larger than 5MB you may encounter an error when trying to bundle it.

Uploading and Publishing Your Extension

With your extension bundled, you're now ready to upload it. Here's how:

  1. Go to your Workspace settings. Click on the Integrations tab.
  2. Scroll down to the "App development" section.
  3. Locate your app and click on the "publish extension version" option.
  4. In the file dialog that appears, select the bundle.zip file that you created in the previous step.

πŸ“˜

Note: The Workspace where you registered your app will be used as the Author of the App, and the Workspace Icon will be the icon of your Author page. (e.g. https://webflow.com/@devrel) Only Workspace Admins change these settings.

After uploading the file, you should see a success message indicating that your extension has been uploaded.

Submitting your Extension to the Marketplace

To share your extension on the Marketplace first, review

Once your extension is uploaded, Webflow will review it before it becomes publicly available. This process can take a few days, and you'll receive an email notification once your extension is live.

You can then share your app with others by directing them to its page in the Webflow Marketplace. Users can add your extension to their projects directly from this page.

Congratulations πŸŽ‰, you've now published a Webflow App with a Designer Extension! We can't wait to see what you'll create.