Build components visually in Webflow, connect to your local React project, and import ready-to-use components complete with props, slots and interactions. It's the fastest way to prototype something you can actually use in your product.
Hey ProductHunt!
I’m excited to announce the latest Webflow Labs launch: DevLink https://webflow.com/devlink! DevLink allows you to build components in Webflow for use in React projects — design and development teams can quickly ship pixel perfect designs and simplify the way they collaborate.
Creating ready-to-use, high-fidelity React components in Webflow’s best-of-breed designer can help teams in a lot of ways:
- Launch web apps and products faster by skipping the entire process of coding UI elements
- Connect Marketing and Product by providing a method for owners of the core app to repurpose work done on the marketing site
- For agencies and freelancers, expand the services you offer clients by giving them entire design systems with code counterparts.
To use DevLink, there’s just a few basic steps:
1. Design and build UI components in Webflow using our visual development Designer
2. Connect Webflow with your local React project
3. Import ready-to-use React components complete with props, slots, and interactions
Best of all, anyone on any plan can start to use DevLink for free during our beta!
Used alongside our [Figma-to-Webflow plugin](https://www.producthunt.com/prod...), we imagine our users will be able to design almost straight through to production.
We're launching DevLink in beta and we’re keen to see what folks would most like to see next. We have lots of enhancements planned, such as Storybook, supporting more frameworks other than React (Svelte, Vue, etc), and more!
You’ll need a Webflow account, so make sure to sign up for a free Webflow account if you don’t have one already. https://webflow.com/devlink
Let us know what you think!
Webflow Labs is a new innovation lab at Webflow I'm heading up. You can read more about it here: https://webflow.com/blog/announc...
Having worked on both backend and frontend development with other team members, I have sympathy for each 'side' and how difficult it can be to coordinate changes without falling out not to mention how much time, money and energy is wasted in the (broken) process. So to be able to work on either side and work in relative harmony together is a godsend for a busy app development team.
When do you think the "import of React components back into Webflow" piece might be available @bryantchou and how would that work exactly? I'm assuming that the Source component the desginer works on would be left untouched and the fully hooked-up React component would become a new component instance in the Webflow project?
@theflowagency we're considering a few different options so we don't have an exact answer right now. In fact we wanna hear from the community on different use cases so that we can build what's best! But to try answer your question, the idea is that you'd be able to import your own custom React components and use any instance of it you want in the Webfow project.
@_fedefiore How cool would that be: having the source component design side-by-side on the same page as the React component instance and to see your design brought to life there and then? Exciting times...✨
@theflowagency to be honest having them side-by-side would require many technical challenges so that might not be a reality in the short them unfortunately. We want to deliver incremental value as quickly as possible so we'll probably start with some sort of React embeds as a way to solve for certain use cases (i.e. bring in your custom components into a Webflow site). But definitely we'll want to explore more powerful long term solutions!
I'm sure this is cool and it's great to see Webflow opening up more doors with its product, but the core Webflow platform has so many issues and open feature requests that I can't help but be disappointed when I see things like this come out from the Webflow team. Why is precious development time being spent on things that very few (if any) people are asking for and not fixing the more pressing issues that are plaguing your main product?
Your pricing is confusing, user permissions/editability are ridiculously lacking, eCommerce is useless, Webflow forms are barely passable, and there are SO many little missing features that should be a no-brainer to include, but for some reason Webflow hasn't added in yet (media library for clients, on-page filtering/sorting, reordering collection items, etc).
The actual Webflow builder is bar-none the absolute best way to create marketing sites available today. Believe me, I love you guys. You have an amazing product. But you're all over the place when it comes to your policies and business decisions, and it's hard to continue to have confidence in your product when I don't see any major improvement on these fundamental items that have been left broken for years.
Any thoughts?
@adam_hayman I personally disagree, Webflow has allowed me to understand HTML & CSS to build marketing websites. Now with this feature as I am learning React, I am able to leverage my Webflow skills to style components faster than other React devs. Huge opportunity for Webflow freelancers to find gigs in web-app development and not only marketing websites.
@marvinkr You're right - it's probably not fair for me to say that very few (if any) people are asking for this. I don't know what sort of user feedback Webflow is getting, so I'm sure they built this after a lot of thought and research.
But my points about the broken-ness of their core product are still valid and I do think it'd be a better use of their time to fix and expand on that rather than venture into new territory, which is what they're doing here.
Hey @adam_hayman appreciate the sentiment. We have launched over 28 enhancements and features since the beginning of the year and a huge list of enhancements coming as well. Lots of the feedback has been addressed in https://webflow.com/community/we... actually so we may have had some of your points covered already.
In addition we have a slew of yet-to-be-announced - but HUGE things coming 🤗. Many of them will address the gaps around ecomm, etc you have pointed out.
As for DevLink, it comprises 2% of our overall R&D headcount — this is a small but big unlock for many in the WF ecosystem, especially those that build products.
@alexandre_teillet1 absolutely! We believe DevLink can unlock a lot of new use cases and we're eager to hear from the community what they'd like to see next!
Congrats Webflow! This is exciting for many reasons. I come from a technical background building interactive web applications and I know the pain having to exchange designs and discussing tradeoffs. This is truly game changer!
@bryantchou are there plans to support the other direction? React to Webflow? I think that would open to a ton of possibilities. React apps powered by the Webflow CMS for example 😉
I look forward to seeing what Webflow and Webflow Labs launches next, keep it up!
This is a great idea!! I see a lot of value since this can help the designers to go extra mile in the product team and build the components they are designing.
My question is, since every product team works with different utility classes and mixins, how should be the workflow between Webflow Devlink and the dev team to have a smooth collaboration?
@victorgiron you're not alone in asking this question. To be honest, workflows and best practices is something we're hoping to understand better during this open beta period when we'll gather feedback from customers. We've documented some best practices here https://university.webflow.com/l... and we'll add more!
That being said, DevLink components by default use css modules so that each component is "encapsulated" with its own styles and can live side-by-side with other custom components that use any other utility class.
Huge congrats to the Webflow team! Webflow has been a game changer in the way that I build and create on the web, so much so that I'm now working on helping create a better ecosystem for Webflow through a variety of tools and services.
It's exciting to see Devlink go live to the public. It's always a breath of fresh air seeing feedback taken into account so quickly and the Webflow team making updates to their ecosystem on a weekly, and sometimes daily basis.
I can't stop raving about this product to my friends and colleagues. It's a true gem in a sea of mediocrity. I can't imagine going back to my old ways after using it
Webflow