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.
|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.|
|The file where you can call Webflow's Designer APIs using the CLI's Objects and Methods|
|Provides the visual styling for the extension, including the layout, colors, and fonts.|
|The file where you can call Webflow's Designer APIs using the CLI's Objects and Methods. Webflow will compile any TypeScript into the |
|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 |
When 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 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.
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 framework like Next.js or . To ensure your assets are always correctly located and loaded, always use relative paths in your index.html
The scaffold for your extension includes a foundational TypeScript file located at
src/index.ts. This file serves as the starting point for adding interactivity to your Extension.
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 (
/public/index.js file. It's important to note that you should 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.