Vite + React + TypeScript + Webflow Cloud (site-attached)

Example Vite + React + TypeScript app with a Hono worker on Cloudflare, configured for Webflow Cloud with Devlink integration for connecting to an existing Webflow site.

Project structure

.
├── index.html
├── LICENSE
├── package.json
├── package-lock.json
├── public
│   ├── hono.svg
│   ├── vite.svg
│   └── webflow.svg
├── src
│   ├── App.tsx
│   ├── globals.d.ts
│   ├── main.tsx
│   ├── style.css
│   ├── webflow/         # generated by Webflow CLI from your linked site
│   └── worker.ts
├── tsconfig.json
├── vite.config.ts
├── webflow.json
├── worker-configuration.d.ts
└── wrangler.json

src/main.tsx mounts the React app in src/App.tsx. src/worker.ts is the Hono worker that serves the /api/hello endpoint and the built static assets. Components exported from your Webflow site land in src/webflow/ and can be imported straight into App.tsx.

Commands

Command	Action
npm install	Install dependencies.
npm run dev	Start the Vite dev server (default http://localhost:5173).
npm run build	Production-build the app to dist/.
npm run preview	Serve the production build locally (default http://localhost:4173).
npm run deploy	Deploy to Webflow Cloud with the Webflow CLI.
npm run cf-typegen	Regenerate worker-configuration.d.ts from wrangler.json.

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

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 + npx webflow devlink export) the CLI populates ./src/webflow/ with components you can import directly into your Vite app.

Learn more

• Vite documentation
• Hono documentation
• Webflow Cloud
• Devlink