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
/public/index.htmlAn 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.jsThe file where you can call Webflow's Designer APIs using the CLI's Objects and Methods
/public/styles.cssProvides the visual styling for the extension, including the layout, colors, and fonts.
/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.
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.

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 framework like Next.js or . To ensure your assets are always correctly located and loaded, always use relative paths in your index.html

Building your Extension with TypeScript

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.

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 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.

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.