Magic Patterns (HTML to React extension)
Dev tools
browser extension for design-to-code
SHOW HN2024
Legend
Magic Patterns (HTML to React extension)
Convert any website into a React component
chromewebstore.google.com#html to react#website to react component#computed styles#chrome extension#design to code
How HN took it
9 positive, 20 neutral or asking, 0 mixed, 7 critical, out of 36 comments about the project. Thread score +0.08.
Idea: 4 for, 4 againstExecution: 1 for, 2 againstDesign: 2 for, 0 againstPrivacy: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Useful for getting HTML and CSS from sites and converting to Tailwind
From 2 comments
This is a very useful browser extension. Really love the fact that you are even able to convert the styles to TailwindCSS. Very clever.
rriley on HNVery useful way to get the HTML and CSS for a website!
frays on HN
Works well on smaller components
From 2 comments
This is absolutely fantastic. I love it. Works great on about 80% of the website elements I've tried across about 10 websites now. I tried it on our site, and was able to…
sech8420 on HNWhen every website on the internet is your possible input set, there are some bugs, but it should work on most framer sites. That said, the extension is WAY BETTER at smaller…
alexdanilowicz on HN
Objections
Possible copyright and trade dress infringement from copying designs
From 3 comments
I am going to be that person, but how is the copyright for the output of tools like this? Since not all websites include license on their site, yet their looks are replicated,…
nicce on HNIANAL but my guess that the output seems likely to be considered a "derivative work" (referring to US law in this case). So you'd need prior authorization from the copyright…
spmurrayzzz on HN> . As long as you don't copy text/images/svg, the only issue is going to be "trade dress" infringement since CSS styles are not copyrightable. (not a lawyer so this isn't legal…
nicce on HN
Phishing and theft misuse concerns
From 2 comments
There are already 34 companies using this tool to create high quality login form clones for phishing purposes.
Zopieux on HNOh cool, theft as a service!
superb_dev on HN
Font mismatch in Tailwind conversion
From 1 comment
I'm not sure if I did it wrong, but going to the Hacker News bar and looking at the font of the Hacker News logo, it's different. Original is: Verdana, Geneva, sans-serif Yours…
robertlagrant on HN
Unreliable on some sites and selection failures
From 1 comment
I tried again, and still no luck after full refreshes and what not! I will shoot you an email with the one site I was having trouble with. But the reliability so far today has…
sech8420 on HN
Requests
Firefox support
From 1 comment
Nice job! Are there any plans to make it compatible with Firefox?
skylovescoffee on HN
Vanilla JS/HTML output support
From 1 comment
Yet to try but is there a way to support vanilla JS? Most of my nowadays are pure HTML/JS/CSS (using Alpine mostly)
santa_boy on HN
Questions
Copyright status of generated output
From 1 comment
I am going to be that person, but how is the copyright for the output of tools like this? Since not all websites include license on their site, yet their looks are replicated,…
nicce on HN
Whether generated output is sent to the backend for localhost pages
From 1 comment
If someone runs this on localhost to try it out, is any of the generated output sent to your system? >> "Generations that aren't private may be featured in our public, community…
itronitron on HN
How it compares to Cursor Composer
From 1 comment
How does this compare to cursor composer?
mushufasa on HN
Alternatives named
SnipCSS
From 1 comment
I am the maker of SnipCSS. https://www.snipcss.com Just like with other tools such as yt-dlp, the user is required to use it responsibly. As long as you don't copy…
mrieck on HN
Cursor Composer
From 1 comment
How does this compare to cursor composer?
mushufasa on HN