Subscribe
Sign in
Magic Patterns
p/patterns-4Prototype your product ideas with AI.
Start new thread
Teddy Ni

HTML to React - Turn a design from any website into your own

by•

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.

Add a comment

Replies

Best
Teddy Ni
Maker
📌
👋 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
Teddy Ni
Maker
@devindsgbyq thanks Devin! That’s a great q - the long answer short is it depends on how the website implements their responsiveness. If the website uses CSS to natively handle responsiveness, our extension will capture it! But if the site is using JavaScript, we unfortunately don’t have a way now to get multiple viewports. We definitely want to support more down the line - any frameworks or tools you’re thinking of in particular?
Christofer Huber
Hey @teddyni that is amazing 😻 Are you planning to add support for other frameworks like Tailwind and Angular as well. Congrats on the launch 🚀
Teddy Ni
Maker
@crebuh You can currently convert the code to Tailwind using our AI! We don't have current plans to support Angular, but we have customers who use us in conjunction with ChatGPT to convert our React code into Angular!
Alex Danilowicz
Maker
@teddyni @crebuh thanks christofer! We already support Tailwind in the sense that you can 'convert' the grabbed HTML to any component library, such as Shadcn, Chakra, or just plain ol' Tailwind! Angular.. some day! With AI anything it's possible. We view the Chrome Extension as a 'starting point' and AI helps you edit and make it your own.
Sam Crombie
💡 Bright idea
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.
Alex Danilowicz
Maker
@samuel_crombie thanks Sam! Using Cursor + our Chrome extension to get design inspiration is definitely a popular use case
Teddy Ni
Maker
@samuel_crombie Thanks Sam! Magic Patterns + Cursor = 10x building!
Harshad
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.
Alex Danilowicz
Maker
@codewithharshad thanks harshad!!! appreciate the support!
Teddy Ni
Maker
@alexdanilowicz @codewithharshad Thanks for the support Harshad! Excited to see what you build with it.
Alex Danilowicz
Maker
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?
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! ✨👏
Teddy Ni
Maker
@alexdanilowicz @akigugale Two of our favorite websites :) Being able to convert it to your design system of choice is one of our favorite pieces — makes the code actually usable in your codebase!
Nifal Adam
Nice. Any way to convert tailwind to webflow or figma?
Alex Danilowicz
Maker
@nifal_adam2 Hey yes! There’s a “convert” button in the top right corner that will take the HTML and computed styles and turn it into any design system you want, including Tailwind!
Teddy Ni
Maker
@nifal_adam2 Hey Nifal, we also natively support exporting it out to Figma!
Nifal Adam
@teddyni woah. So you guys are able to convert tailwind to figma? Thats really cool, I will check it out now.
Olivia Jane Mitchell
HTML to React sounds super handy. Just checked out the demo, and it looks really promising.
Teddy Ni
Maker
@oliviajanemitchell Thanks Olivia, excited to see what you build with it!
Ditarth Desai
Congratulations on the launch! This HTML-to-React extension is a brilliant tool for developers.
Teddy Ni
Maker
@ditarth_wbs Appreciate it Ditarth!
Amy G. Debnam
Finally, a tool that understands my React struggles! 🙌 Time to say goodbye to endless divs and hello to cleaner code.
Teddy Ni
Maker
@amy_g_debnam Haha the code is only going to get cleaner too as we add more processing!
Kyrylo Silin
Hey Teddy, Can you give an example of the kind of tweaks it can make to the components? How does the Figma export handle more complex layouts or responsive designs? Congrats on the launch!
Teddy Ni
Maker
@kyrylosilin Hey Kyrylo! Yeah absolutely — Some example tweaks would be: - Making a light mode design into dark mode - Changing copy - Adding sections, removing sections, editing sections Honestly, you can really tweak anything you want — our AI is pretty powerful so it'll try its best to do whatever you ask it! RE: Complex layouts + responsive designs in Figma — we unfortunately don't natively handle responsive designs in Figma, but it'll be able to handle complex layouts. A pro tip would be to use our import, and then use Figma's auto-auto layout feature to convert everythign to autolayout which should get you ALMOST to responsiveness!
Ace
I will recommend Magic Patterns to our team's front-end developers and designers. I hope they'll thank me for it!
Teddy Ni
Maker
@oldmann Let us know what they think — hopefully it supercharges your whole team's speed!
Madan Chaolla Park
Fantastic! Also really cool!!!! Like the color palette too! I'm a bit of a penny pincher - but I've got lots a friends colleagues and clients to use it!!!!!!
Teddy Ni
Maker
@madan_chaolla_park Thanks Madan, we spent some time working on the color palette so great to hear that was appreciated :)
Udaya Sri
Wow!! I absolutely loved this. As a non-tech person, products like these are my favorite. Congrats on the launch!
Teddy Ni
Maker
@udaya_sri Thanks Udaya! Our goal is to make frontend accessible and fun for ANYONE!
Patricia Harris
Hey @teddyni, really love this idea! This is exactly what I need to speed up my workflow. Quick question though—does this tool require any coding skills, or is it straightforward for non-coders like me? Congrats on the launch.
Teddy Ni
Maker
@patriciaharris Hey Patricia, thanks for checking us out! No coding experience needed — you can export designs out to Figma, or edit them with natural language!
Muhammad Salman
That will help front end developers a lot appreciate the product.
Teddy Ni
Maker
@muhammad_salman39 Thanks Muhammad! As someone who lives in the frontend, glad I'm able to help others!
Bryan
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! 🚀
Teddy Ni
Maker
@dance17219 Thanks Bryan! Can't wait to see what you build with it.
Ali Eskandari
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 🤠
Teddy Ni
Maker
@ali_eskandari Thanks Ali! I've almost entirely stopped taking screenshots since we got a beta of this extension out. Why take a screenshot when you can get a rich editable design out of it!
Antoine Gauthier
This is a game changer, @teddyni! Can't wait to see the magic unfold with the Magic Patterns editor. Upvoting this! 🚀
Teddy Ni
Maker
@antoine_gauthier_ Appreciate it Antoine! The Magic Patterns editor is where the magic happens ✨
Tal Feld
This is crazy! I have been searching for this kind of thing for months.
Teddy Ni
Maker
@tal_feld Thanks Tal! Glad to end your search haha