Get started with DevLink

Join host Aron Korenblit and guest Victoria Plummer, developer relations lead @ Webflow for a workflow session. You'll learn how to use DevLink to sync website components built in Webflow with any React project to bridge the gap between design and dev.
Get access to the beta & additional DevLink resources: wfl.io/livestream-devlink
----
Timestamps:
00:00:00 Stream start
00:02:20 Stream intro
00:05:08 Introducing Victoria from our Devrel team
00:07:06 What is Devlink?
00:10:20 Starting the Devlink demo
00:11:00 Why should you build a web page with React?
00:13:59 The role does Webflow play in a React app
00:15:11 How to find a React synced component in Webflow
00:19:31 How to create a React component with Devlink
00:23:59 Making changes to the styles of a React component
00:26:19 Making a dynamic React component
00:30:59 Q: What types of objects can be passed into React?
00:31:48 Q: What is a runtime prop and a slot?
00:34:25 Comparing runtime props in Webflow and React
00:36:58 Example of a React slot
00:38:58 Adding a chart into React
00:41:28 Q: Can it run a Webflow interaction?
00:43:35 Q: Can existing React components be brought into Webflow?
00:43:36 Q: Can Devlink work with other frontend frameworks?
00:44:25 Q: What Webflow elements are supported in Devlink?
00:45:16 Q: What happens if I make frontend changes in React?
00:46:28 Q: Can I create components for a design system?
00:46:58 Q: Is the Webflow publishing tied to Devlink sync?
00:48:14 Q: Can you show how the React app consumes the data?
00:51:04 Best practices for syncing
00:53:00 Where to find more about Devlink?
00:53:40 Credit roll

[@Webflow]

All resources mentioned in today's stream: wfl.io/livestream-devlink

[@fathom5209]

Thank you Aaron and Victoria : )

[@deborahsanchez7595]

You guays are amazing! I love all that webflow is bringing to the world! Thank you so much 🙏🏼

[@EncontreumnerdBrasil]

Great content guys!

[@Webflow]

Aron here! Thanks so much!

[@dimitrisqq]

I believe there was a 'link' command in Webflow's Conf 2022 video that it's missing here, showcasing instant update between Designer & local development server ⚡ . And that was the superkiller feature instead of running 'sync' for every little change you might make. Will this feature be brought back?

[@Webflow]

Hi Dimitri! In talking to React developers after the conference, we came to the conclusion that a manual sync was better since the workflow is between two different people (the developer in React and the Webflow developer). Real-time wasn't needed (and in fact led to a worst workflow).

[@dimitrisqq]

@@Webflow Well, the people at the conference seemed rather excited about this! Since the feature was announced and developed what about bringing the (alternative) choice to the users? From my understanding a user can choose whether to have it linked realtime or not.

[@Webflow]

@@dimitrisqq I'll bring that feedback to the team! Thanks Dimitri!

[@leeleefu2137]

@@Webflow To be able to chose if you want to have it auto sync would be nice. I also don’t like that you have to manually update it every time.

[@dimitrisqq]

@@Webflow 🥰🙏

[@alexhornak8129]

But what if I want to bring react compontnets that are leveraging extended functionality back into my webflow project for use on a webflow production site? Is this on the roadmap?

[@kevinchase127]

The point of taking it to react is so you can extend the functionality of what a static webflow site can do. Webflow uses jquery, so the advantage is building components easily in Webflow then using them in react instead of having to code the UI from scratch. React has many advantages over jquery which is why they’ve built devlink. I’m sure if there was a way to use reacts functionality inside of Webflow then they would have done that first likely

[@Webflow]

Hi Alex, today there's no way to bring existing React components back into Webflow whether that's for use in a Webflow site or to edit to bring back into a React App.

[@Guuglio]

Thank you! Great content. But why do you have ads in your (Webflow) channel? Same thru all your videos...

[@Tontonbeats]

is the Live Link feature shown in the Keynote of the Webflow conf 2022 still coming?

[@Webflow]

Dev Link is that feature :)

[@Tontonbeats]

@@Webflow no it’s not, there was feature of Dev link shown that allowed for real-time updates of the local dev environment

[@LutherDePapier]

@@Tontonbeats The answer was in another which I'm copy-pasting here for you: "Hi Dimitri! In talking to React developers after the conference, we came to the conclusion that a manual sync was better since the workflow is between two different people (the developer in React and the Webflow developer). Real-time wasn't needed (and in fact led to a worst workflow)."

[@rodneygreen639]

I'm trying to follow the example. I can't get the onClick to work as a runtime prop. I'm running it on localhost next.js. Any documentation for this?

[@Webflow]

Hi Rodney, you can check out the documentation here: docs.developers.webflow.com/docs/devlink-documentation-and-usage-guide#runtime-props

[@angstrom1058]

I'm trying to find guidance on using Webflow as a design tool so I can built "snippets" of golang templates here, (what you would call "components" perhaps) and then bring them into my go project in VS Code. Ultimately I would inject the components dynamically into my golang based web app at runtime using HTMX. Ya, sounds complicated but really it isn't. I want to use an HTML/CSS/JS design tool like webflow, because doing it all in VS Code is a bit primative.

[@user-zc7os7on7k]

is it possible to publish the devlink components as npm packges

[@invisiblehandofadamsmith]

Hello from Krakow Poland 1🤗🤗🤗

[@Webflow]

Heyooo!

[@kevynlevine]

Using react, can you make it pop?

[@Webflow]

Make it pop in Webflow then have it shine in React

[@web3Terry]

Will this same process work with react in VS code

[@Webflow]

We used VSCode in this example so yes!

[@alinurislam-gc2yl]

Webflow vs React frame work. What Can And what Can't? Need a vedio.

[@GTICHATTER]

webflow can do everything*, react can do the rest. *everything meaning ALMOST everything.