👋 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

Hey @teddyni that is amazing 😻 Are you planning to add support for other frameworks like Tailwind and Angular as well. Congrats on the launch 🚀

I'm always looking at sites for inspiration and have wanted to be able to re-create my favorites, so I'm very excited to give this a try! I have a feeling that this + Cursor will be GOATed for any front-end work I need to do.

Huge fan of Magic Patterns. Paying user. Use it daily. Daily improvements from Alex & Teddy - who are always shipping. 🚀

The idea of taking any element from a website and turning it into a React component with ease is just brilliant. As a developer, I’ve spent way too much time reconstructing design patterns from scratch, and this extension seems like the perfect solution to streamline that workflow. Kudos for incorporating the Magic Patterns editor! The idea of customizing components with AI sounds super exciting. I'm sure this will not only save tons of time but also improve overall UX for projects. Can’t wait to dive in and see how it integrates with my existing B2B stack. Looking forward to the new updates every week. Here’s to more efficient dev days ahead! Upvote from me! 🚀

HUGE time saver! Basically, every site is a template now :)

Been an early user of Magic Patterns and I have to say this chrome extension was a game changer for me. It's so easy to capture a specific component, make it your own through Magic Patterns, and then export it to whatever framework you're using. I find that the React code that Magic Patterns spits out is really easy to copy and paste into ChatGPT and have it converted to whatever framework you need. I use Rails and so I'll say something like "Take this React component and convert it into a Rails view" and it's done pretty seamlessly. So even if you don't use React, Magic Patterns still gets you 90% of the way there!

Magic patterns is an incredible product! Kudos to the team

I've been playing around with Magic Patterns since they first launched, and man, it's changed how I do things. It's super easy to pick up a component from the internet, make it your own with Magic Patterns, and then just drop it into whatever framework you're using. I really like how the React code from Magic Patterns just works. Magic Patterns just gets the job done without any fuss. 10/10!

Really cool tool, I always come across website designs and layouts that I want to save, and for now, I just take screenshots. This make it so much easier to have figma files of all good designs. Congrats on the launch @teddyni 🤠

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

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!

Oh Noice! Interesting examples from Stripe and Linear there too @teddyni and @alexdanilowicz. Have done this at times to start off with a base but automating it makes so much sense. Also, the feature of converting to Chakra shows how deep you have understood the problem. Congrats on the launch! ✨👏

This is amazing 🤩 @teddyni @alexdanilowicz I'm really excited to try this out! This is going to be my go-to for all front-end work.

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!

Hearing from our customers what they have already created with the extension has been incredible... so we can't wait to see what you all build! Some of my favorite use cases: - getting design inspiration from your favorite website and then making it their own with our 'convert' feature - need to build a complex UI, but using the extension to get to a starting point faster (why reinvent the wheel?) It's pretty interesting how we do it technically, too. We grab the HTML and computed styles on the page and then deterministically turn it into JSX. There's no AI involved, actually, until you start editing with natural language or hit the 'convert to your component library' button! It was cool building something 'the classic way' (without AI), but then adding it on as a feature afterward. So let us know: what are you using the Magic Patterns HTML to React extension for?

Congrats on the launch! This is awesome, it works so well. I might never have to write a line of frontend code again

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!

This is crazy! I have been searching for this kind of thing for months.

Seems like a pretty handy tool.