Astro + Webflow Cloud

Example Astro app configured for Webflow Cloud.

Project structure

/
├── public/
├── src/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── astro.config.mjs
├── wrangler.json
└── package.json

Commands

Command	Action
npm install	Install dependencies
npm run dev	Start dev server at http://localhost:4321
npm run build	Production build to ./dist/
npm run preview	Build and preview with Wrangler locally
npm run deploy	Deploy with Webflow Cloud CLI

Set up Webflow CLI

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 # --force

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 your desired Webflow site from the sites listed.

You can also view our DevLink documentation to learn more about all the options, features, and supported elements.

The webflow.json devlink-export block tells the Webflow CLI where to write generated React components from your linked Webflow site. After running webflow cloud init (or webflow auth login + webflow devlink export) the CLI populates ./webflow/ with components you can import directly into your Astro app.

Learn more

• Astro documentation
• Webflow Cloud