1. Origine
DevLink a été annoncé lors de la Webflow Conf 2022 et ouvert progressivement à partir de 2023. À l'origine, il avait un seul périmètre : exporter les composants construits dans le Designer Webflow vers une codebase React. L'outil répondait à un problème structurel des équipes mixtes : l'interface était conçue dans Webflow, mais l'équipe dev la reconstituait à la main dans sa codebase, avec toute la dette de synchronisation que ça implique à chaque itération.
En 2024, Webflow a élargi significativement ce périmètre. L'import de composants React dans Webflow ("code components") a été ajouté, suivi du déploiement d'applications full-stack sur Webflow Cloud. L'ancienne beta d'export est devenue une sous-fonctionnalité parmi d'autres ; ce qui était un outil de synchro design/dev est devenu une plateforme de développement hybride.
2. Utilité
DevLink répond à deux problèmes distincts selon le sens d’utilisation.
Export (Webflow → React) : une équipe conçoit ses composants UI dans Webflow Designer | boutons, cards, sections, navigation. Via la CLI DevLink, ces composants sont exportés en React/TypeScript avec leurs CSS modules. Chaque mise à jour de design se propage à la codebase via une commande, sans que le développeur ait à retoucher le composant. Pour un studio qui livre des composants à une équipe dev cliente, c’est un point de départ de qualité production et un gain de synchronisation considérable.
Import (React → Webflow) : Webflow atteint ses limites sur les interfaces complexes (calculateurs ROI, charts interactifs, formulaires multi-étapes avec logique conditionnelle...). Avec les code components, un développeur crée le composant React dans sa codebase, expose des props configurables, et l’importe dans Webflow via DevLink. L'équipe Webflow l'utilise directement sur le canvas, comme n'importe quel composant natif Webflow, en ajustant les props sans toucher au code. Résultat : des pages Webflow qui combinent intégration no-code et logique applicative complexe.
3. Fonctionnalités
DevLink regroupe trois ensembles de fonctionnalités distincts.
Export de composants (Webflow → React)
- Export des composants Webflow en React/TypeScript avec CSS modules
- Synchronisation via CLI (
npx webflow devlink sync) - Propriétés et variantes des composants conservées comme props React
- Compatible Next.js, Remix et tout framework React
- Mises à jour de design propagées sans friction à chaque sync
Import de code components (React → Webflow)
- Import de composants React dans le canvas Webflow via CLI ou CI
- Props exposées et configurables directement dans le Designer, sans code
- Slots pour permettre à l'équipe Webflow de composer du contenu à l'intérieur du composant
- Variants React utilisables comme variantes de composants Webflow
- Mise à jour du composant via push CLI | l'équipe Webflow reçoit la nouvelle version automatiquement
Webflow Cloud
- Déploiement d’applications Next.js et Astro directement sur Webflow Cloud
- Logique backend et APIs sans infrastructure externe
- Push via CLI ou déclenchement automatique depuis GitHub (CI/CD natif)
- Accès aux données CMS Webflow depuis l’application
→ Découvrir notre article sur Webflow Cloud.
4. Cas concrets
→ Un studio livre un site Webflow pour une fintech. Le client dispose déjà d’une app Next.js avec des composants React maison | simulateur de prêt, tableau de bord, graphiques de performance. Plutôt que de reconstruire ces composants dans Webflow, l’équipe dev les importe via DevLink. L'équipe Webflow les intègre dans les pages du site comme des composants natifs, ajuste les props (couleurs, labels, données de démo) directement dans le Designer. Le site est livré avec des fonctionnalités applicatives réelles | sans backend custom, sans iframe.
→ Dans l’autre sens : un studio construit un design system dans Webflow pour un client qui développe une application React en parallèle. Chaque composant | bouton, badge, card, modal | est conçu dans Webflow avec ses variantes. Via DevLink, l'équipe React récupère des composants prêts à l'emploi, stylés et maintenus par l'équipe Webflow. Quand la charte évolue, une commande suffit à propager les changements dans toute la codebase.
5. Prix
DevLink est inclus dans les plans Webflow suivants, sans coût additionnel :
- Plans Workspace : Freelancer, Core, Growth, Agency, Enterprise
- Plans Site : CMS, Business, Enterprise
L’export de composants (component export) est accessible automatiquement à tout utilisateur configurant une Webflow Cloud app. Webflow Cloud dispose de son propre modèle tarifaire selon l’usage.
→ Documentation officielle : developers.webflow.com
→ Page produit : webflow.com/feature/devlink
6. Questions fréquentes
DevLink remplace-t-il l’export de code Webflow ?
Non, l’export de code Webflow génère du HTML/CSS statique pour l’ensemble d’une page. DevLink opère au niveau des composants, dans un contexte React. Les deux coexistent et répondent à des besoins différents. L’export de code convient pour un intégrateur qui récupère le markup d’une page. DevLink convient pour une équipe qui maintient une codebase React sur la durée.
Faut-il être développeur ?
La configuration initiale de DevLink et l’intégration dans l’app React nécessitent des compétences dev (Node.js, CLI, React). Une fois le setup en place, les mises à jour de design se propagent sans intervention technique supplémentaire.
DevLink fonctionne-t-il uniquement avec React ?
L’export génère des composants React/TypeScript. Webflow Cloud supporte Next.js et Astro officiellement. Des projets communautaires permettent l’usage avec d’autres frameworks, mais React reste le seul framework officiellement supporté pour l’import et l’export de composants.
Quelle différence avec le Webflow headless via API
?L’API Webflow donne accès aux données CMS depuis n’importe quel frontend. DevLink va plus loin : il synchronise les composants visuels eux-mêmes entre Webflow et la codebase, pas seulement les données. Les deux approches sont complémentaires, DevLink + API CMS Webflow est d’ailleurs le combo standard sur les projets Webflow Cloud.
