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
Ema Elisi
Elisi : AI-powered Goal Management App
Congrats, @teddyni! This is a game changer for designers and developers. The ability to convert web snippets directly into React components will save so much time! Excited to see how the Magic Patterns editor enhances our workflow. Can't wait to give it a spin! 🚀
Teddy Ni
Magic Patterns
Maker
@ema_elisi Thanks Ema, excited for you to give it a try!
Udaya Sri
Wow!! I absolutely loved this. As a non-tech person, products like these are my favorite. Congrats on the launch!
Teddy Ni
Magic Patterns
Maker
@udaya_sri Thanks Udaya! Our goal is to make frontend accessible and fun for ANYONE!
Zenda
LinkedCRM AI
Wow, this is exactly what I need! I often see great animations, but implementing them myself takes a lot of time. Exporting to Figma is great, but I'm curious about your future plans, will you support exporting to Framer? BT W, congrats on the launch!
Teddy Ni
Magic Patterns
Maker
@zenda1122 Thanks Zenda! Feel the same way about animations — we don't work with all animations yet, but definitely a huge goal of ours. We're definitely thinking about supporting an export to Framer — we've done this manually in the past and it's definitely automatable!
Star Boat
Congratulations on the Product Hunt launch 🚀 The Magic Patterns editor for customization is the cherry on top. Can't wait to try this out and streamline my workflow! Great job, Teddy & Alex! 👏
Teddy Ni
Magic Patterns
Maker
@star_boat We agree! The extension is amazing on its own, but being able to use AI to further customize really takes you home!
Igor Vagner
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!🙂
Teddy Ni
Magic Patterns
Maker
@igor_vagner Currently we parse out SVGs actually into it's own separate component! We're working on separating out actual components under the hood using the same techniques that we do with SVGs :)
Michael Moyo
Ocular AI
Love this product!! Simply amazing! Congrats gents! @teddyni and @alexdanilowicz!
Teddy Ni
Magic Patterns
Maker
@alexdanilowicz @michael_moyo_ Thanks Michael, appreciate your support!
Otto Nagengast
HUGE time saver! Basically, every site is a template now :)
Teddy Ni
Magic Patterns
Maker
@onagengast Thanks Otto! Exactly — the internet is now your design library!
Alex Chan
Congrats on the launch! This is awesome, it works so well. I might never have to write a line of frontend code again
Teddy Ni
Magic Patterns
Maker
@alex_chan13 Thanks Alex! That's our hope!
Jai from Worksaga
As myself a React developer, this tool is cool and interesting to use. Kudos to team!
Teddy Ni
Magic Patterns
Maker
@jai_singhal Thanks Jai! Anyone who works with React + has to build frontend designs will find this useful!
Alex Lee
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!
Teddy Ni
Magic Patterns
Maker
@alex_lee21 Thanks for all your support since the beginning!
First
Previous
12345
Next
Last