[{"data":1,"prerenderedAt":420},["ShallowReactive",2],{"project-42043552":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":46,"post_text":48,"what":49,"said":104,"maker_in_thread":212,"shape":223,"grid":227,"attempts":383,"same_week":384,"maker_shows":41,"maker_hidden":412,"reader_version":413,"card":414},"42043552","Magic Patterns (HTML to React extension)","Convert any website into a React component","title","Show HN: Convert any website into a React component","https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fhtml-to-react-figma-by-ma\u002Fchgehghmhgihgmpmdjpolhkcnhkokdfp","chromewebstore.google.com","alexdanilowicz",1730739780,2024,326,61,173,3515,5,"legend","dev_tools","browser extension for design-to-code","browser_extension",[24,25,26,27,28],"html to react","website to react component","computed styles","chrome extension","design to code","curious",0.077,{"positive":32,"neutral":33,"mixed":34,"critical":35},9,20,0,7,36,{"design":38,"execution":40,"idea":42,"pricing":44,"privacy":45},{"positive":39,"critical":34},2,{"positive":41,"critical":39},1,{"positive":43,"critical":43},4,{"positive":34,"critical":34},{"positive":34,"critical":41},[18,47,34,47,34,41,47,18,47,34,41,18,18,47,41,47,18,41,34,34,41,34,47,47,47,34,47,47,18,18,47,34,47,41,47,47,41,18,18,47],3,"Hey HN, we built a Chrome Extension (https:\u002F\u002Fwww.magicpatterns.com\u002Fextension) that converts a snippet of any website to an isolated React component.\n\nDemo video: https:\u002F\u002Fyoutu.be\u002FhutUYDkyE_A\n\nHow it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors \u002F inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX\n\nIt was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out global styles, removing inherited st",{"problem":50,"audience":56,"pricing":60,"motivation":71,"time_to_build":75,"stack":76,"openness":101,"stage":102,"team_size":103},{"value":51,"source":52,"evidence":53},"Getting existing website designs into a prototyping tool as editable code","maker",[54],{"id":55},"post",{"value":57,"source":52,"evidence":58},"Software teams and frontend developers prototyping product ideas",[59],{"id":55},{"value":61,"source":62,"evidence":63},"Free to try; paid Pro tier with private generations","commenter",[64,68],{"id":65,"by":66,"text":67},"42048507","bkyan","On the pricing page, there is a highlighted bullet point for \"Private generations\" under the Pro tier. How does that differ from the other tiers?",{"id":69,"by":11,"text":70},"42046970","thanks for the callout — was taking me a second to respond because I wasn't 100% sure. It's a good question. I was actually trying to get the phone with a copyright lawyer to…",{"value":72,"source":52,"evidence":73},"Get existing design context from any website into their AI design product",[74],{"id":55},null,[77,81,90,97],{"value":78,"source":52,"evidence":79},"React",[80],{"id":55},{"value":82,"source":52,"evidence":83},"Plasmo (extension framework)",[84,87],{"id":85,"by":11,"text":86},"42053549","> I activate the select mode then hover over elements, and it won't pick up on anything. Did you have these pages (the tab itself) open before you installed the extension? Try…",{"id":88,"by":11,"text":89},"42054050","We used Plasmo to build the extension, so I think should be easy to publish it to the Firefox Add-ons store too. To be honest, no one has ever asked this before! Will look into it!",{"value":91,"source":52,"evidence":92},"window.getComputedStyle",[93,94],{"id":55},{"id":95,"by":11,"text":96},"42048427","yes! it uses window.getComputedStyle There's a long write up here on the technical guts but happy to answer any qs:…",{"value":98,"source":52,"evidence":99},"LLM for Tailwind, Shadcn, Chakra conversion",[100],{"id":55},"unknown","launched","team",{"praise":105,"objections":127,"requests":166,"questions":181,"alternatives":200},[106,117],{"value":107,"source":62,"evidence":108},"Useful for getting HTML and CSS from sites and converting to Tailwind",[109,113],{"id":110,"by":111,"text":112},"42045204","rriley","This is a very useful browser extension. Really love the fact that you are even able to convert the styles to TailwindCSS. Very clever.",{"id":114,"by":115,"text":116},"42053424","frays","Very useful way to get the HTML and CSS for a website!",{"value":118,"source":62,"evidence":119},"Works well on smaller components",[120,124],{"id":121,"by":122,"text":123},"42052540","sech8420","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…",{"id":125,"by":11,"text":126},"42053519","When 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…",[128,142,153,160],{"value":129,"source":62,"evidence":130},"Possible copyright and trade dress infringement from copying designs",[131,135,139],{"id":132,"by":133,"text":134},"42045726","nicce","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,…",{"id":136,"by":137,"text":138},"42046347","spmurrayzzz","IANAL 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…",{"id":140,"by":133,"text":141},"42054841","> . As long as you don't copy text\u002Fimages\u002Fsvg, the only issue is going to be \"trade dress\" infringement since CSS styles are not copyrightable. (not a lawyer so this isn't legal…",{"value":143,"source":62,"evidence":144},"Phishing and theft misuse concerns",[145,149],{"id":146,"by":147,"text":148},"42047773","Zopieux","There are already 34 companies using this tool to create high quality login form clones for phishing purposes.",{"id":150,"by":151,"text":152},"42046115","superb_dev","Oh cool, theft as a service!",{"value":154,"source":62,"evidence":155},"Font mismatch in Tailwind conversion",[156],{"id":157,"by":158,"text":159},"42045235","robertlagrant","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…",{"value":161,"source":62,"evidence":162},"Unreliable on some sites and selection failures",[163],{"id":164,"by":122,"text":165},"42056912","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…",[167,174],{"value":168,"source":62,"evidence":169},"Firefox support",[170],{"id":171,"by":172,"text":173},"42054027","skylovescoffee","Nice job! Are there any plans to make it compatible with Firefox?",{"value":175,"source":62,"evidence":176},"Vanilla JS\u002FHTML output support",[177],{"id":178,"by":179,"text":180},"42056207","santa_boy","Yet to try but is there a way to support vanilla JS? Most of my nowadays are pure HTML\u002FJS\u002FCSS (using Alpine mostly)",[182,186,193],{"value":183,"source":62,"evidence":184},"Copyright status of generated output",[185],{"id":132,"by":133,"text":134},{"value":187,"source":62,"evidence":188},"Whether generated output is sent to the backend for localhost pages",[189],{"id":190,"by":191,"text":192},"42048980","itronitron","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…",{"value":194,"source":62,"evidence":195},"How it compares to Cursor Composer",[196],{"id":197,"by":198,"text":199},"42045269","mushufasa","How does this compare to cursor composer?",[201,208],{"value":202,"source":62,"evidence":203},"SnipCSS",[204],{"id":205,"by":206,"text":207},"42054212","mrieck","I am the maker of SnipCSS. https:\u002F\u002Fwww.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…",{"value":209,"source":62,"evidence":210},"Cursor Composer",[211],{"id":197,"by":198,"text":199},{"comments":213,"answered":214,"key":215},19,11,[216,219,222],{"id":217,"text":218},"42045664","thank you - we're a team of 2 and former full-time frontend engineers so that means a lot to us! You're spot on with the guard rails: we do a lot of post-processing, i.e., after…",{"id":220,"text":221},"42050852","The nice thing about building a design tool is correct output is defined as “did it render.” We do things like strip out hallucinated imports and parse the ast for errors to help…",{"id":69,"text":70},{"commenters":224,"max_depth":43,"maker_replies":213,"first_comment_mins":225,"lifespan_hours":226},39,149,49,[228,232,234,237,238,240,244,246,250,251,255,257,261,264,265,266,269,271,273,277,280,283,285,287,291,294,295,296,300,302,306,308,311,313,316,319,320,322,326,328,332,333,335,336,338,343,345,349,350,354,357,358,360,362,366,369,371,373,376,379,381],[229,34,18,230,231,34],"42045556","maker\u002Fpositive\u002Fdesign","chis",[217,34,34,233,11,41],"maker\u002Fneutral\u002Fexecution",[235,34,47,233,236,34],"42049779","sky2224",[220,34,34,233,11,41],[132,41,47,239,133,34],"project\u002Fneutral\u002Fidea",[241,41,34,242,243,34],"42045975","commenter\u002Fneutral\u002Fidea","demarq",[245,41,34,242,133,34],"42046245",[247,41,41,248,249,34],"42046647","project\u002Fcritical\u002Fidea","szundi",[136,41,47,239,137,34],[252,41,47,253,254,34],"42046863","maker\u002Fneutral\u002Fnone","abstractspoon",[69,41,34,256,11,41],"maker\u002Fneutral\u002Fidea",[258,41,18,259,260,34],"42050814","maker\u002Fpositive\u002Fnone","KronisLV",[262,41,47,239,263,34],"42047803","ysavir",[205,41,34,242,206,34],[140,41,34,242,133,34],[267,41,41,248,268,34],"42054724","ibejoeb",[110,39,18,270,111,34],"project\u002Fpositive\u002Fdesign",[272,39,34,256,11,41],"42045403",[274,47,18,275,276,34],"42053417","project\u002Fpositive\u002Fidea","rahimnathwani",[278,47,34,279,11,41],"42053580","commenter\u002Fneutral\u002Fnone",[281,43,47,239,282,34],"42047965","TheRealPomax",[157,18,41,284,158,34],"project\u002Fcritical\u002Fexecution",[286,18,34,233,11,41],"42045309",[288,18,47,289,290,34],"42047352","project\u002Fneutral\u002Fexecution","joahua",[121,292,18,293,122,34],6,"project\u002Fpositive\u002Fexecution",[85,292,34,233,11,41],[164,292,41,284,122,34],[297,35,34,298,299,34],"42049646","other\u002Fneutral\u002Fnone","hipadev23",[301,35,34,253,11,41],"42051014",[303,304,34,298,305,34],"42046153",8,"urbandw311er",[307,304,34,253,11,41],"42046255",[309,32,41,248,310,34],"42045683","ape4",[312,32,34,233,11,41],"42045744",[65,314,47,315,66,34],10,"project\u002Fneutral\u002Fpricing",[317,314,34,318,11,41],"42048674","maker\u002Fneutral\u002Fpricing",[178,214,47,289,179,34],[321,214,34,289,11,41],"42057319",[323,324,47,253,325,34],"42057050",12,"misstercool",[327,324,34,253,11,41],"42066374",[329,330,47,289,331,34],"42053362",13,"wordpad25",[125,330,34,289,11,41],[171,334,47,289,172,34],14,[88,334,34,253,11,41],[114,337,18,275,115,34],15,[339,340,18,341,342,34],"42046049",16,"project\u002Fpositive\u002Fnone","instagary",[344,340,34,253,11,41],"42053568",[346,347,47,289,348,34],"42048195",17,"darepublic",[95,347,34,289,11,41],[351,352,47,239,353,34],"42051011",18,"javed6542",[355,213,47,239,356,34],"42050845","davedx",[150,33,41,248,151,34],[359,33,34,253,11,41],"42046242",[190,33,47,361,191,34],"project\u002Fneutral\u002Fprivacy",[363,33,47,364,365,34],"42049218","maker\u002Fneutral\u002Fprivacy","teddarific",[367,33,47,361,368,34],"42049229","rasso",[146,33,41,370,147,34],"project\u002Fcritical\u002Fprivacy",[372,33,18,275,191,34],"42049473",[374,33,18,275,375,34],"42051987","CM30",[377,33,47,239,378,34],"42054568","recursive",[197,380,47,239,198,34],21,[382,380,34,239,11,41],"42045364",[],[385,390,394,398,403,408],{"id":386,"name":387,"points":388,"category":389},"42063709","YourHackerNews",564,"productivity",{"id":391,"name":392,"points":393,"category":389},"42027187","Someday",313,{"id":395,"name":396,"points":397,"category":389},"42027654","Lynx.boo",303,{"id":399,"name":400,"points":401,"category":402},"42060856","SuperSplat",271,"creative",{"id":404,"name":405,"points":406,"category":407},"42036041","Meal Planner Dinner Ideas",266,"consumer_social",{"id":409,"name":410,"points":411,"category":20},"42063346","Aide",253,false,"v2",{"id":415,"name":5,"line":6,"ai":412,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":416,"top":18,"kw":417,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":418,"url":9,"mix":419,"praise":107,"objection":129,"sub":21},42043552,0.08,[24,25,26,27,28],"5303013530155313510010333033553031331553",[32,33,34,35],1793991104375]