Magic Patterns
Design your product ideas with AI.
Start new thread
Teddy Ni

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

by
Magic Patterns
•
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
Magic Patterns
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
Devin doggy
@teddyni Congratulations on the launch! 🎉 The HTML to React tool looks impressive. I'm curious about how it handles responsive design elements and if it adapts to various screen sizes when converting HTML to React. Also, are there plans to integrate support for additional frameworks or design tools in the future?
Teddy Ni
Magic Patterns
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
Mailfox
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
Magic Patterns
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
Magic Patterns
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
Web Action SDK
💡 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
Magic Patterns
Maker
@samuel_crombie thanks Sam! Using Cursor + our Chrome extension to get design inspiration is definitely a popular use case
Teddy Ni
Magic Patterns
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
Magic Patterns
Maker
@codewithharshad thanks harshad!!! appreciate the support!
Teddy Ni
Magic Patterns
Maker
@alexdanilowicz @codewithharshad Thanks for the support Harshad! Excited to see what you build with it.
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
Magic Patterns
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
Magic Patterns
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
Magic Patterns
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.
Alex Danilowicz
Magic Patterns
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?
Olivia Jane Mitchell
HTML to React sounds super handy. Just checked out the demo, and it looks really promising.
Teddy Ni
Magic Patterns
Maker
@oliviajanemitchell Thanks Olivia, excited to see what you build with it!
Kyrylo Silin
Telebugs
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
Magic Patterns
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
Magic Patterns
Maker
@oldmann Let us know what they think — hopefully it supercharges your whole team's speed!
123
•••
Next
Last