Key Files
After running the init command in your project folder, your project should resemble the following file structure. The public folder should contain all the files to serve your Designer Extension.
| Files | Description |
|---|---|
/src/index.ts | The file where you can call Webflow's Designer APIs using the CLI's Objects and Methods. Webflow will compile any TypeScript into the index.js file to serve in the browser. |
/public/index.html | An HTML file that serves as the main interface for the Extension. This file should include just the contents of the tag, and not include any tags. |
/public/index.js | The file where you can call Webflow's Designer APIs using the CLI's Objects and Methods. This generated when the /src/index.ts file is compiled by running webflow extension serve. |
/public/styles.css | Provides the visual styling for the Extension, including the layout, colors, and fonts. |
webflow.json | The App manifest file that is used to configure a Webflow App and define various parameters that control its behavior including the folder where the App is served from, aka its publicDirectory. See more on this file in it's documentation. |
bundle.zip | After running webflow extension bundle , the CLI will bundle and create a bundle.zip containing your Extension. You can upload this file to Webflow to share your app with others. |
Referencing assets in index.html
index.htmlWhen adding links to scripting and styling files in your index.html file, it's crucial to use relative paths rather than absolute paths. This ensures that your application can correctly locate and load these assets regardless of the environment it's running in.
Relative paths
Relative paths start with the name of the next directory in the path, or with ./ to represent the current directory. For example:
- scripts/app.js: This path points to the
app.jsfile in the scripts directory, which is a subdirectory of the current directory. - ./styles/main.css: This path points to the
main.cssfile in the styles directory, which is a subdirectory of the current directory.
Avoid absolute paths
Absolute paths, which start with a /, should be avoided. These paths are resolved from the root directory, not the current directory. For example:
- /scripts/app.js: This path points to the
app.jsfile in the scripts directory at the root of your file system, not in a subdirectory of the current directory.
Using absolute paths can lead to issues if your application is not located at the root of your file system, which is common when using frameworks like Next.js or React. To ensure your assets are always correctly located and loaded, always use relative paths in your index.html
Building your Extension
The scaffold for your Extension includes a foundational TypeScript file located at src/index.ts. Use this file to add to your interact with the Designer APIs and start building your Extension.
The build process
When you're ready to create a build of your Extension, you can use the npm run build command. This command triggers the build script defined in your package.json file. The build script uses the TypeScript compiler (tsc) to transpile your TypeScript code into JavaScript.
Output
The compiled JavaScript is stored in the /public/index.js file. It's important to note that you do not modify the /public/index.js file directly, as it gets overwritten every time you run the build command. Instead, all your development should be done in the src/index.ts file or other TypeScript files in your src directory.
Publishing your Extension
If you'd like to learn more about publishing your Extension on the Marketplace, read our Marketplace app guidelines our App publishing guide and, our submission guidelines.