App Structure

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.

FilesDescription
/src/index.tsThe 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.htmlAn HTML file that serves as the main interface for the Extension. This file should include just the contents of the <body> tag, and not include any <head> tags.
/public/index.jsThe 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.cssProvides the visual styling for the Extension, including the layout, colors, and fonts.
webflow.jsonThe 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.zipAfter 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

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

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.js file in the scripts directory, which is a subdirectory of the current directory.
  • **./styles/main.css: **This path points to the main.css file 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.js file 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.

Built with