Turn the internet into your component library with our HTML to React browser extension. Convert snippets of any website into a React component. Use the Magic Patterns editor to customize and iterate. Export to code or Figma.
👋 Hey Product Hunt!
It's been almost exactly a year since we launched our first product in the design tooling space. Over this time, we noticed a common workflow: Copying existing design patterns to code or Figma, and then customizing them to your own product.
We would constantly see folks with a website pulled up side-by-side with their IDE or Figma slowly recreating websites manually... we figured there had to be a better way. Introducing HTML to React.
Here's how it works:
1. Enable the HTML to React browser extension
2. Select the element on the page you want to copy
3. Boom! You get the React code that is also exportable to Figma
4. You can further use the Magic Patterns editor to further customize + edit the component with AI
Let us know what you think — we're shipping new versions every week and would love to build for you!
- Teddy & Alex
Such an impressive tool. I am so impressed by how fast it works. This is gonna be game changer for me personally when creating moodboard/inspo gallery. The quick import to figma is just lovely. Can't wait to integrate it in my daily design process and show this to my devs haha
It is interesting ... but lets say a webpage is using a payed template ... so you copy part of the template, reverse engineer the code ... hmm might be a problem for you if you get successful.
I recommend HTML to React for developers who want to easily convert designs from websites to React components!
Congratulations, Teddy and Alex! 🎉
It’s amazing to see how your new tool, HTML to React, is simplifying the design-to-code workflow. The ability to seamlessly convert HTML to React components and export to Figma is a game-changer for designers and developers alike. Your dedication to streamlining the process and integrating AI is truly impressive.
What are some of the most surprising use cases or feedback you’ve received from users since launching HTML to React?
Congrats on the launch @teddyni ! This is a cool idea, and must have been difficult to build. Will check it out when I have time, and might start building website again.
This is fantastic, Teddy! 🙌 The Magic Patterns editor sounds like a game changer—no more manual copying and pasting! Just select, click, and voilà, instant React component. Can't wait to see how this enhances my workflow. Are there any plans for additional customization features in future updates? Definitely upvoting this! Keep up the great work, guys!
I think I missed something, I see it working on the Google home page but when I try the "select HTML" on the producthunt page or Linkedin I don't see the widget purple box around elements.
Love this! Time to steal all the great websites. Love how this is a chrome extension not something that's heavy. A great starting point.
congrats on the launch @teddyni and team!
Love this product!! Simply amazing! Congrats gents! @teddyni and @alexdanilowicz!
Huge fan of Magic Patterns. Paying user. Use it daily. Daily improvements from Alex & Teddy - who are always shipping. 🚀
Been a customer of Magic patterns for ages, if you are tired of wasting time on frontend and ideation, I would recommend giving the tool out for a spin, saved me weeks of work
Wow, it’s great idea!
Is there only one component created for React, or is there a combination of components, for example, if I choose a large element...?:)
And congratulations on the launch!🙂
This is an incredible feature! Been following you guys for a while and it's amazing to see the commitment to improving the design tooling workflow!
As myself a React developer, this tool is cool and interesting to use. Kudos to team!
