Recently, Astro announced that Webflow has made a US$150.000 donation towards the Astro project. And since Webflow and Cloudflare seem to be best friends now, a few days later Cloudflare decided to match this donation, highlighting how tightly the ecosystems are aligning.
Astro is the new cool kid on the block in the JavaScript framework world. It introduces a powerful islands architecture, allowing developers to combine components from React, Vue, Svelte, and more inside a single site. Astro was created by Fred Schott in 2021 to enable developers to build fast, performant, content-driven websites. Its server-first rendering approach sends lightweight HTML to the browser with zero unnecessary JavaScript, resulting in impressively fast-loading websites.
What Is Webflow DevLink?
In 2023, Webflow introduced DevLink at Webflow Conf. The goal: design components visually inside Webflow, then sync them into a React project.
The idea is great, but I always missed a sense of its “real-world relevance”. Many React apps are highly dynamic client-side applications, where brand identity is less tied to individually styled components. For teams that already use CSS frameworks like Tailwind, creating components that aren't very "brand-design-rich" directly in code is often just easier and avoids the extra bloat DevLink and its styling for the components brings.
For a while, adoption seemed sparse, and DevLink updates were quiet. Honestly, I thought the project might have been shelved or quietly sunset at Webflow Labs.
Enter Webflow Cloud
But then, on May 5, 2025, Webflow surprised us with the launch of Webflow Cloud — and this instantly changed the equation.
Webflow Cloud lets you deploy full-stack web apps directly alongside your Webflow site. It supports popular JavaScript frameworks including Next.js and Astro, enabling:
- Integration with APIs
- Authentication and complex logic
- Real-time data flows
- Seamless brand consistency across your marketing site and apps
This was the missing piece! Finally, Webflow DevLink components matter in server-rendered frameworks (like Astro or Next.js), where brand-aligned visual components can exist side by side with business logic and performance-focused rendering.
Why This Matters for Agencies and Businesses
I’d like to iterate why this is such a big deal: At our studio, we frequently hear from businesses that want to migrate to Webflow for its easy content editing and marketer-friendly workflows. But until now, Webflow often hit limitations in areas like authentication, gated content, integrations, or complex e‑commerce.
With Webflow Cloud + Astro DevLink, we get the best of both worlds:
- Webflow CMS + editor to handle visuals and marketing
- Server-side JavaScript frameworks to handle logic, APIs, and data
- Native DevLink components injected into the app for perfect design consistency
This combo is powerful for marketing websites that need more than just static content.
Why Astro Is a Perfect Fit
As mentioned above, Astro is a high-performance, content-heavy focused framework designed for speed and flexibility with a server-first philosophy. It ships minimal JavaScript by default, supports component islands and can integrate with any headless CMS or API. These are all reasons it makes it an ideal fit for Webflow Cloud.
Astro + DevLink Integration: First steps
So, I decided to give Astro and DevLink a go. How easy would it be to connect Webflow with Astro? How would the synchronization work and how robust would it be? Can I use an atomic design system?
To get going fast with Astro and to not spend too much time creating a working website from scratch, I used the starter blog template from the official Astro tutorial. I wanted to create a boilerplate template marketing website built with Astro that can be seamlessly connected to Webflow via DevLink. The styling is kept minimal and is primarily controlled by the Webflow project (to keep bloat as minimal as possible), allowing for easy design management and updates.
You can find the project and all information on our public repo. Feel free to clone it and experiment with DevLink yourself.
Deployment Results: Vercel vs. Webflow Cloud
The installation was straightforward. Webflow offers great documentation for setting up DevLink for your already set up project and I also got it deployed to Vercel without issues. However, as a side note, the documentation does only focus on React and does not mention Astro (regarding the DevLinkProvider in particular). I offer a solution for this in the repo though.
I then tried to publish my application to Webflow Cloud by following the official Webflow documentation, but I encountered an issue that isn’t currently mentioned there.
When DevLink is set up this way, it exports components as .js files containing JSX.
On Vercel this works fine, because .js is treated as JSX by default.
However, on Webflow Cloud, which seems to rely on Astro with Vite for the build process, Vite does not parse JSX in .js files by default.
As a result, the components weren’t recognized and the build failed. To resolve this, I installed additional packages and added a custom loader for DevLink .js files inside astro.config.mjs.
I’ve documented my workaround here.
I also tested different Astro setups to see if there was a scenario where components would be exported as .jsx files instead, such as starting a project from scratch or installing React instead of Preact. In every case, DevLink continued to export components as .js files.
Interestingly, when initialising a fresh Webflow Cloud project with webflow cloud init, DevLink imports the components in the required .jsx format, and the build succeeds without issues.
I have reached out to Webflow to get clarification on this issue. I wanted to understand why DevLink exports components as .js files when used on its own, but switches to .jsx files when a project is initialized with webflow cloud init. Or perhaps I am doing something wrong? I also asked whether developers are really expected to patch astro.config.mjs manually with additional plugins and loaders in order to get DevLink components building properly on Webflow Cloud, and why this requirement is not mentioned in the documentation. In addition, I asked Webflow to confirm whether Webflow Cloud uses Vite and Astro specifically during the build phase rather than at runtime.
It's with the engineering team now. I'll post any updates here, so make sure to check back in a week or so.
First Impressions of DevLink with Astro
Despite the hiccups I ran into, I was happy with the results. The setup is quick and straightforward, and while I did face some syncing issues—such as changes not always coming through when applying new styles to a button component—the problem was resolved by renaming it. Overall, DevLink feels robust and fast, with changes reflected in the codebase almost instantly. And can I use an atomic design system? Yes indeed! Nesting components within components is no problem, which makes it easy to embrace a truly modular approach to building.
Looking Ahead: Code Components + DevLink
This has the potential to be a real game changer for our agency work at HNDRX to provide for clients that need more than “just a simple marketing website”. Additionally, with the introduction of Code Components at the most recent Webflow Conf, it’s now even possible to integrate React components directly into a Webflow site. This means we can build highly complex experiences/components (looking at you three.js) that require a true development environment, filling in the gaps where Webflow alone can’t quite deliver (yet?).
For our next Studio Jam at the end of October, I’ll be diving deeper into Code Components, so stay tuned for that. In the meantime, I’m excited to create a more complete Astro–DevLink starter template that anyone can use as a foundation for building their own marketing website with Astro, while still leveraging the power and flexibility of the Webflow Visual Designer.
.jpg)