This is a reference implementation of Webflow DevLink for documentation purposes. It is a Next.js project bootstrapped with create-next-app.

The app uses the Next.js App Router (app/) on Next.js 16. DevLink exports land in webflow/ (see devlink-export.rootDir in webflow.json); pages import those components (for example app/page.tsx).

Getting Started

Clone the Webflow Project

In order to use this project, you'll need to clone this Webflow project into your own workspace. https://webflow.com/made-in-webflow/website/devlink-reference

Set up your local environment

Note

To preview the app locally, run npm install and npm run dev. You do not need the Webflow CLI unless you you make changes to the DevLink components from the cloned Webflow site. If you do make changes, follow the steps below to update the components in the webflow/ directory.

Install Webflow CLI (global install is optional; you can also run the CLI without npx in the export step below).

npm install -g @webflow/webflow-cli

Log in to Webflow and select your desired workspace from the opened browser window. You can append --force to reset any existing authentication.

npx webflow auth login

Then, install the needed dependencies.

npm install

Sync all the Webflow components into your local filesystem. Answer the prompts to generate and configure your webflow.json.

npx webflow devlink export

Select the cloned "DevLink: Weather" site from the sites listed.

Last, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.