Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
aec0f79
refactor: Update webflow configuration to use devlink-export with new…
paulvmoreau-webflow May 18, 2026
e5ebc2a
refactor: Update Layout.astro to use new webflow imports and include …
paulvmoreau-webflow May 18, 2026
3a97cb1
refactor: Update index.astro to use new webflow component imports
paulvmoreau-webflow May 18, 2026
cd9dd1a
refactor: Enhance webflow configuration and components with new DevLi…
paulvmoreau-webflow May 18, 2026
d1243c4
refactor: Simplify link configuration in index.astro
paulvmoreau-webflow May 18, 2026
4971f05
CLD-1736: Replace DevLink _Builtin imports with native HTML
fbaralle May 18, 2026
b2e9059
Fix DevLink import paths: ./devlink → ./webflow
fbaralle May 18, 2026
2215ec4
refactor: Remove telemetry settings from webflow configuration
paulvmoreau-webflow May 18, 2026
ec88ff4
Move styles back to inline styles in index.astro
fbaralle May 18, 2026
76758d6
refactor: Clean up webflow configuration by removing unused treeShake…
paulvmoreau-webflow May 18, 2026
4d33601
Apply DevLink scope class to <body> so Webflow styles apply
fbaralle May 18, 2026
8dd9535
docs: Enhance README with Webflow CLI setup instructions
paulvmoreau-webflow May 18, 2026
733e3f5
refactor: Remove deprecated DevLink styles and update class references
paulvmoreau-webflow May 18, 2026
335145f
Move DevLink scope class from <body> to <html>
fbaralle May 18, 2026
db19b5f
Add prefers-color-scheme dark support to Layout.astro
fbaralle May 18, 2026
48e52fb
Merge pull request #2 from Webflow-Examples/cld-1736-remove-devlink-c…
fbaralle May 18, 2026
661a178
Merge branch 'v1' into devlink-v2-update
paulvmoreau-webflow May 19, 2026
305d7cd
refactor: Remove DEVLINK_SCOPE_CLASS from <html> tag
paulvmoreau-webflow May 19, 2026
4f24bf6
refactor: Remove obsolete DevLink components and related files
paulvmoreau-webflow May 19, 2026
b79ca64
Merge pull request #1 from Webflow-Examples/devlink-v2-update
paulvmoreau-webflow May 19, 2026
447f1cf
chore: bump scaffold to Astro 6
fbaralle May 19, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,39 @@ Example Astro app configured for [Webflow Cloud](https://webflow.com/cloud).
| `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).

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

```bash
npx webflow auth login
```

Then, install the needed dependencies.

```bash
npm install
```

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

```bash
npx webflow devlink export
```

Select your desired Webflow site from the sites listed.

You can also view <a href="https://developers.webflow.com/devlink/reference/overview" target="_blank" rel="noopener noreferrer">our DevLink documentation</a> 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 `./src/webflow/` with components you can import directly into your Vite app.


## Learn more

- [Astro documentation](https://docs.astro.build)
Expand Down
12 changes: 9 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
"name": "astro",
"type": "module",
"version": "0.0.1",
"engines": {
"node": ">=22.12.0"
},
"overrides": {
"vite": "^7"
},
"scripts": {
"dev": "astro dev",
"build": "astro build",
Expand All @@ -11,11 +17,11 @@
"cf-typegen": "wrangler types"
},
"dependencies": {
"@astrojs/cloudflare": "^12.6.6",
"@astrojs/react": "^4.2.5",
"@astrojs/cloudflare": "^13.5.0",
"@astrojs/react": "^5.0.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"astro": "^5.17.2",
"astro": "^6.1.4",
Comment on lines +20 to +24

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Update the lockfile with the Astro 6 dependency graph

These dependency bumps are not accompanied by a package-lock.json update; the committed lockfile still records the root package as @astrojs/cloudflare ^12.6.6, @astrojs/react ^4.2.5, and astro ^5.17.2. In clean Webflow/CI deployments that install from the lockfile with npm ci, the install is no longer reproducible for the Astro 6 scaffold and will have to resolve missing v13/v5/v6 package entries instead of using the committed dependency graph, which can block or skew builds. Please regenerate and commit the lockfile together with these version changes.

Useful? React with 👍 / 👎.

"react": "^19.1.0",
"react-dom": "^19.1.0"
},
Expand Down
23 changes: 21 additions & 2 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import { DevLinkProvider } from '../../devlink/DevLinkProvider';
import "../../devlink/global.css"; // Webflow Styles
import { DevLinkProvider } from '../../webflow/DevLinkProvider';
import { DevLinkFontTags } from '../../webflow/webflow_modules/DevLinkFontTags';
import "../../webflow/css/global.css"; // Webflow Styles
---

<!doctype html>
Expand All @@ -9,6 +10,7 @@ import "../../devlink/global.css"; // Webflow Styles
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.svg`} />
<DevLinkFontTags />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
Expand All @@ -23,10 +25,27 @@ import "../../devlink/global.css"; // Webflow Styles
</html>

<style>
:root {
--background: #ffffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

html,
body {
margin: 0;
width: 100%;
height: 100%;
}

body {
background: var(--background);
color: var(--foreground);
}
</style>
83 changes: 25 additions & 58 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,67 +1,34 @@
---
import Layout from '../layouts/Layout.astro';
import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
import Layout from "../layouts/Layout.astro";

// Once you've synced DevLink components, import them from "../../webflow/*"
// import { ComponentName } from "../../webflow/ComponentName";
---

<Layout>
<Section
client:load
tag="section"
className="margin-bottom-24px"
style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
<section
style="min-height: 100vh; display: flex; align-items: center; justify-content: center;"
>
<Container>
<Block
tag="div"
className="hero-split"
style={{
textAlign: 'center',
maxWidth: '600px',
margin: '0 auto'
}}
>
<h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
<p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
<div style={{marginTop: '12px'}}>
<Link
button={true}
options={{
href: "https://developers.webflow.com/webflow-cloud/getting-started"
}}
className="button-primary"
<div class="container">
<div style="text-align: center; max-width: 600px; margin: 0 auto;">
<h1
style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;"
>
Welcome to Webflow Cloud
</h1>
<p style="margin-bottom: 1.5rem;">
Your Astro project is ready. Start building and sync your Webflow
components and design system.
</p>
<div style="margin-top: 0.75rem;">
<a
href="https://developers.webflow.com/data-clients/docs/getting-started"
style="display: inline-block; padding: 12px 24px; border-radius: 4px; background: #146ef5; color: #ffffff; text-decoration: none; box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);"
>
Get Started
</Link>
</a>
</div>
</Block>
</Container>
</Section>
</div>
</div>
</section>
</Layout>

<style>
h1 {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.button-primary {
border-radius: 4px;
background: #146ef5;
color: #ffffff;
box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
}

.button-primary:hover {
background: #2c80fd;
color: #ffffff;
}
</style>
15 changes: 8 additions & 7 deletions webflow.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
"cloud": {
"framework": "astro"
},
"devlink": {
"rootDir": "./devlink",
"cssModules": true,
"fileExtensions": {
"js": "jsx"
}
"devlink-export": {
"rootDir": "./webflow",
"components": ".*",
"componentGroups": ".*",
"ts": false,
"cssScopes": true,
"relativeHrefRoot": "/"
}
}
}
3 changes: 1 addition & 2 deletions wrangler.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "astro",
"main": "./dist/_worker.js/index.js",
"compatibility_date": "2025-04-15",
"compatibility_flags": ["nodejs_compat"],
"assets": {
"binding": "ASSETS",
"directory": "./dist"
"directory": "./dist/client"
},
"observability": {
"enabled": true
Expand Down