[{"data":1,"prerenderedAt":471},["ShallowReactive",2],{"project-32037740":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":91,"maker_in_thread":230,"shape":242,"grid":246,"attempts":432,"same_week":433,"maker_shows":42,"maker_hidden":463,"reader_version":464,"card":465},"32037740","Aspect","Copy React code from any site","title","Show HN: Copy React code from any site","https:\u002F\u002Fsample-code.aspect.app","sample-code.aspect.app","tscepo",1657390016,2022,374,72,97,2570,4,"legend","dev_tools","browser extension for copying page components","browser_extension",[24,25,26,27,28],"react","copy component","html to jsx","browser extension","inspect element","mixed",-0.111,{"positive":32,"neutral":33,"mixed":34,"critical":35},6,13,2,12,33,{"docs":38,"idea":41,"execution":43,"performance":44,"design":45},{"positive":39,"critical":40},0,1,{"positive":42,"critical":32},3,{"positive":34,"critical":18},{"positive":39,"critical":40},{"positive":39,"critical":39},[42,42,39,42,39,42,47,42,39,42,40,42,40,40,40,47,40,47,40,47,42,47,39,40,40,40,39,39,39,39,39,39,39,39,39,39,39,40,47,40],5,"I made this because building React components from scratch is super annoying. Most visual elements already exist on the web, and I figured there should be a way to leverage that. I hope it's useful!",{"problem":50,"audience":56,"pricing":65,"motivation":71,"time_to_build":75,"stack":76,"openness":89,"stage":90,"team_size":89},{"value":51,"source":52,"evidence":53},"Rebuilding React components from scratch is tedious; reuse existing web visuals instead","maker",[54],{"id":55},"post",{"value":57,"source":58,"evidence":59},"React and web frontend developers","inferred",[60,61],{"id":55},{"id":62,"by":63,"text":64},"32038165","boomskats","This is really, really neat! I've just tried it with a few random apps and it works flawlessly. Loving where you're going with Aspect. It fits the ux\u002Fcomponent dev persona much…",{"value":66,"source":52,"evidence":67},"Enterprise per-seat pricing planned, similar to Figma",[68],{"id":69,"by":11,"text":70},"32038366","Thanks! Since Aspect aims to solve the design-to-engineering handoff problem, I think we monetize on a per-seat basis for enterprise customers. Similar to Figma's pricing model…",{"value":72,"source":52,"evidence":73},"Building React components from scratch is annoying",[74],{"id":55},null,[77],{"value":78,"source":79,"evidence":80},"Chrome extension","commenter",[81,85],{"id":82,"by":83,"text":84},"32038346","gCoaster","Tried it, doesn't seem to generate or copy a react component. Chrome app seems to mimic inspect element functionality of my browser. Don't think this app does what is described.",{"id":86,"by":87,"text":88},"32040050","pleb_nz","Be better if it were only chrome.","unknown","launched",{"praise":92,"objections":119,"requests":161,"questions":177,"alternatives":196},[93,104,108],{"value":94,"source":79,"evidence":95},"Clean landing page and simple design",[96,100],{"id":97,"by":98,"text":99},"32038781","thih9","Nice work and an excellent landing page; congrats! What happens if the target website uses a react component library (like mui)? I guess for some use cases it could still be…",{"id":101,"by":102,"text":103},"32038963","news_92","Nice work! Love how simple the landing page is. Does it copy adaptive styles as well?",{"value":105,"source":79,"evidence":106},"Works well on real sites",[107],{"id":62,"by":63,"text":64},{"value":109,"source":79,"evidence":110},"Useful for beginners and learning",[111,115],{"id":112,"by":113,"text":114},"32039115","iorek_dev","No lash back, but real question on the value, IMO this tool is very useful for beginners, but myself being more experienced now, I would not use it. The html structure and the…",{"id":116,"by":117,"text":118},"32038467","oliwarner","Remember: others' work is theirs unless they license it to you. Just because you technically can copy something doesn't mean you're allowed to make and distribute copies or…",[120,135,149,154],{"value":121,"source":79,"evidence":122},"Copyright and derivative work concerns",[123,127,131],{"id":124,"by":125,"text":126},"32038616","dpbriggs","This is pretty cool. Are you worried about copyright at all though? Especially if this get used in a commercial context?",{"id":128,"by":129,"text":130},"32038231","rubyist5eva","How is that not considered creating derivative works? Would not touch this for anything beyond basic toys and never for anything commercial, no chance in hell. Edit: view source…",{"id":132,"by":133,"text":134},"32039246","spinny","if the code for the web app is available (assuming a license that permits it) there is no need to use an extension to copy a component. you got the source code if the code is not…",{"value":136,"source":79,"evidence":137},"Exports HTML-like markup, not true React components",[138,141,145],{"id":139,"by":113,"text":140},"32039160","I think there is great value if you sell this to all the small web agencies. But it is a bit misleading to say it will copy a component. Components are more than HTML\u002FCSS. Maybe…",{"id":142,"by":143,"text":144},"32039278","cush","HTML and CSS does not a Component make",{"id":146,"by":147,"text":148},"32039412","tomhallett","I think this is very cool, but two thoughts: 1) Your explainer \"Copy React code from any website\" implies that I'm copying the react code from a website. What you are doing is…",{"value":150,"source":79,"evidence":151},"Output HTML\u002Finline styles are cluttered",[152,153],{"id":112,"by":113,"text":114},{"id":146,"by":147,"text":148},{"value":155,"source":79,"evidence":156},"Does not handle component logic or non-HTML rendering",[157],{"id":158,"by":159,"text":160},"32039617","zeroonetwothree","Most of the complexity of React components is in the business logic (validation, interactivity, accessibility, data fetching, etc.). It seems like this isn't going to help you…",[162,166,173],{"value":163,"source":79,"evidence":164},"Show React output in demo video",[165],{"id":146,"by":147,"text":148},{"value":167,"source":79,"evidence":168},"Support for other frameworks like Vue, Angular, Svelte",[169],{"id":170,"by":171,"text":172},"32038357","rvz","Your response tells me it is a game changer and is going to be useful for tons of developers. I predict that they will create this for Angular, Vue, Svelte, etc.",{"value":174,"source":79,"evidence":175},"Browsers beyond Chrome",[176],{"id":86,"by":87,"text":88},[178,184,188],{"value":179,"source":79,"evidence":180},"How does it work?",[181],{"id":182,"by":183,"text":179},"32047990","gardenhedge",{"value":185,"source":79,"evidence":186},"Does it copy adaptive or responsive styles?",[187],{"id":101,"by":102,"text":103},{"value":189,"source":79,"evidence":190},"Does it work with transpiled code or component libraries like MUI?",[191,195],{"id":192,"by":193,"text":194},"32038438","PeterWhittaker","Q for you: does this work if the code has been transpired, e.g., with Babel?",{"id":97,"by":98,"text":99},[197,208,215,222],{"value":198,"source":79,"evidence":199},"CSS Scan",[200,204],{"id":201,"by":202,"text":203},"32039284","AdriaanvRossum","Reminds me of CSS scan [1]. It was also on Hacker News [2] a while back. [1] https:\u002F\u002Fcssscan.pro\u002F [2] https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=17609252",{"id":205,"by":206,"text":207},"32040419","matthberg","Wow, $20\u002Fmonth or $120 yearly for what looks like a very thin wrapper on inspect-element features. I'm sure some might be willing to pay for the convenience it adds, yet with a…",{"value":209,"source":79,"evidence":210},"SnappySnippet",[211],{"id":212,"by":213,"text":214},"32041199","egfx","This is like SnappySnippet, https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fsnappysnippet\u002Fmdmgnnmlhdfofojkdoajglgmhaicejkk?hl=en-US And it’s open source. This file does all the parsing…",{"value":216,"source":79,"evidence":217},"Huula",[218],{"id":219,"by":220,"text":221},"32039319","mosfets","Reminds of Huula[1] which snapshots the whole web page. [1]: https:\u002F\u002Fhuu.la",{"value":223,"source":79,"evidence":224},"Browser view source and inspect element",[225,229],{"id":226,"by":227,"text":228},"32038751","nemothekid","This reminds me of the \"olden\" days where you view source and copy\u002Fpaste into Dreamweaver. Is this limited to React sites, or any HTML page?",{"id":82,"by":83,"text":84},{"comments":231,"answered":32,"key":232},7,[233,236,239],{"id":234,"text":235},"32039813","At the time of posting, the extension actually allows you to export either jsx (which you can directly place in a react file) or html. That detail just isn't shown in the video,…",{"id":237,"text":238},"32038969","Any page that renders html should work!",{"id":240,"text":241},"32039416","Thanks! It'll work so long as what's rendered is html, instead of say a canvas element.",{"commenters":243,"max_depth":32,"maker_replies":231,"first_comment_mins":244,"lifespan_hours":245},54,47,25,[247,249,251,255,259,261,262,264,266,267,270,273,277,278,282,285,288,291,293,296,299,300,301,302,305,309,311,312,315,317,318,321,325,327,331,334,337,340,343,348,352,355,356,358,360,365,367,370,372,375,378,381,384,386,389,392,395,397,399,401,404,408,412,414,416,419,421,424,426,427,430],[146,39,42,248,147,39],"project\u002Fmixed\u002Fdocs",[234,39,39,250,11,40],"maker\u002Fneutral\u002Fnone",[252,39,42,253,254,39],"32040520","project\u002Fneutral\u002Fidea","pg_1234",[256,39,39,257,258,39],"32042755","commenter\u002Fneutral\u002Fnone","gpderetta",[260,39,39,257,254,39],"32044083",[212,40,42,253,213,39],[201,34,42,263,202,39],"project\u002Fneutral\u002Fnone",[205,34,39,265,206,39],"other\u002Fneutral\u002Fpricing",[139,42,42,248,113,39],[268,42,42,253,269,39],"32039255","thecassandrist",[271,42,42,253,272,39],"32039290","onion2k",[274,18,47,275,276,39],"32038439","project\u002Fpositive\u002Fidea","kirse",[124,47,42,253,125,39],[279,47,39,280,281,39],"32038908","other\u002Fneutral\u002Fnone","ugjka",[283,47,39,280,284,39],"32039007","metadat",[286,47,39,280,287,39],"32041650","sibit",[289,47,42,253,290,39],"32039129","EnKopVand",[132,47,40,292,133,39],"project\u002Fcritical\u002Fidea",[294,47,39,257,295,39],"32039304","cuddlecake",[297,47,39,257,298,39],"32039324","maxboone",[226,32,42,263,227,39],[237,32,39,250,11,40],[158,231,40,292,159,39],[82,303,40,304,83,39],8,"project\u002Fcritical\u002Fexecution",[306,307,40,292,308,39],"32038433",9,"bencollier49",[97,310,42,253,98,39],10,[240,310,39,250,11,40],[62,313,47,314,63,39],11,"project\u002Fpositive\u002Fexecution",[69,313,39,316,11,40],"maker\u002Fneutral\u002Fpricing",[142,35,40,292,143,39],[319,33,47,314,320,39],"32041357","epberry",[322,33,40,323,324,39],"32041664","project\u002Fcritical\u002Fperformance","b0ner_t0ner",[219,326,42,253,220,39],14,[328,329,47,275,330,39],"32039528",15,"frays",[101,332,42,333,102,39],16,"project\u002Fneutral\u002Fdesign",[335,332,39,336,11,40],"32041102","maker\u002Fneutral\u002Fdesign",[192,338,42,339,193,39],17,"project\u002Fneutral\u002Fexecution",[341,338,39,342,11,40],"32039424","maker\u002Fneutral\u002Fexecution",[344,345,47,346,347,39],"32038173",18,"project\u002Fpositive\u002Fnone","lowwave",[349,345,39,350,351,39],"32038830","commenter\u002Fpositive\u002Fnone","Kaze404",[353,345,39,280,354,39],"32038837","MarcelOlsz",[112,345,40,304,113,39],[86,357,40,304,87,39],19,[182,359,42,263,183,39],20,[361,362,40,363,364,39],"32039360",21,"project\u002Fcritical\u002Fdocs","darepublic",[366,362,39,342,11,40],"32039874",[368,362,39,369,364,39],"32040016","commenter\u002Fneutral\u002Fexecution",[116,371,39,280,117,39],22,[373,371,39,257,374,39],"32038479","OtomotO",[376,371,39,257,377,39],"32038560","chunkyks",[379,371,39,257,380,39],"32038648","croes",[382,371,39,257,383,39],"32038891","aleksandrh",[385,371,39,257,377,39],"32038937",[387,371,39,280,388,39],"32038631","amelius",[390,371,39,280,391,39],"32038942","shadowgovt",[393,371,39,280,394,39],"32039099","littlestymaar",[396,371,39,280,391,39],"32040297",[398,371,39,257,394,39],"32043106",[400,371,39,280,133,39],"32039682",[402,371,39,257,403,39],"32041871","hyperhopper",[405,371,39,406,407,39],"32038790","other\u002Fneutral\u002Fidea","chinathrow",[409,371,39,410,411,39],"32039112","commenter\u002Fneutral\u002Fidea","davmar",[413,371,39,410,117,39],"32040488",[415,371,39,410,411,39],"32040896",[417,371,39,406,418,39],"32039619","deckard1",[128,420,40,292,129,39],23,[422,420,39,406,423,39],"32038278","teaearlgraycold",[425,420,39,406,129,39],"32038317",[170,420,47,275,171,39],[428,420,40,304,429,39],"32038663","POiNTx",[431,420,40,292,129,39],"32039566",[],[434,439,444,449,454,459],{"id":435,"name":436,"points":437,"category":438},"32013330","PocketBase",563,"infrastructure",{"id":440,"name":441,"points":442,"category":443},"32081943","Inflation-adjusted stock charts",507,"finance_crypto",{"id":445,"name":446,"points":447,"category":448},"32043229","Ants Sandbox",367,"games",{"id":450,"name":451,"points":452,"category":453},"32034625","Vimified",344,"learning_science",{"id":455,"name":456,"points":457,"category":458},"32080469","Cleanup Photos",319,"creative",{"id":460,"name":461,"points":462,"category":458},"32053816","Colorvote.io",234,false,"v2",{"id":466,"name":5,"line":6,"ai":463,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":467,"top":18,"kw":468,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":469,"url":9,"mix":470,"praise":94,"objection":121,"sub":21},32037740,-0.11,[24,25,26,27,28],"3303035303131115151535011100000000000151",[32,33,34,35],1793991048578]