11 ms·
Show HN: Copy React code from any site
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!
- gCoaster 4y agoTried 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.
- AdriaanvRossum 4y agoReminds me of CSS scan [1]. It was also on Hacker News [2] a while back. [1] https://cssscan.pro/ https://cssscan.pro/ [2] https://news.ycombinator.com/item?id=17609252 https://news.ycombinator.com/item?id=17609252
- matthberg 4y agoWow, $20/month 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 free near-equivalent baked into every browser that's a tough sell.
- bencollier49 4y agoA cynic might be tempted to make facetious comparisons to Copilot.
- manzu 4y ago
- SirHound 4y agoIf you’re wondering why this comment is getting downvoted it’s because it’s insanely patronising.
- deleted 4y ago[deleted]
- boomskats 4y agoThis 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/component dev persona much better than Pagedraw did, for example. What's your monetisation strategy?
- tscepo 4y agoThanks! 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 actually.
- lowwave 4y agogreat work, although I would expect some lash back from the React/SPA front end dev guys ;-)
- Kaze404 4y agoNah, this is great.
- MarcelOlsz 4y agoIf anyone "stole" one of my components the only thing I can do is pray for them. I'm not worried ;)
- iorek_dev 4y agoNo 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 inline style are not good enough right now.
- rubyist5eva 4y agoHow 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 exists of course, and I think we’ve all copy pasted something from a source view out of convenience but something about copying entire components with styles and everything just feels wrong, and possibly legally grey depending on who you might piss off if you get caught, to me
- deleted 4y ago[deleted]
- teaearlgraycold 4y agoMaybe one day people will permissive license their front ends. At least for smaller projects. Maybe hosted at /license?
- rubyist5eva 4y agothat would be a good start
- rvz 4y agoYour 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.
- POiNTx 4y agoSvelte could be awesome but quite hard I think since it's compiled and you don't get to view the source in production.
- rubyist5eva 4y agoPerhaps you could elaborate because I’m not seeing how it’s a “game changer”.
- truthwhisperer 4y ago
- PeterWhittaker 4y agoQ for you: does this work if the code has been transpired, e.g., with Babel?
- tscepo 4y agoShould work as long as the final output is html, instead of say something rendered within a canvas element.
- kirse 4y agoThis is how 13yo me learned to make websites, except it was View Source and Copy to Notepad. Maybe an opportunity to develop a coding course around it?
- oliwarner 4y agoRemember: 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 derivatives. If you do this professionally, you'll get yourself or your employer sued, and/or your work pulled off the internet against your will. You wouldn't steal a policeman's helmet, etc.
- OtomotO 4y agoDepends on the country you live in. Not the whole globe is dominated by western laws :)
- chunkyks 4y agoThe whole globe? No. But the berne convention does have 179 signatory countries. It's not just "western". https://en.m.wikipedia.org/wiki/Berne_Convention https://en.m.wikipedia.org/wiki/Berne_Convention
- croes 4y ago"A copyright cannot cover ideas, procedures, or methods of operation. You can copyright your website’s design, but you can’t copyright the way you created the design." If you use the components to create a new design then there is no copyright.
- chunkyks 4y agoThe code they created, to implement that component, is an original creative work. Thus protected under copyright.
- aleksandrh 4y ago> If you use the components to create a new design then there is no copyright. This is false. You can't copy a site's code and just change the design and poof, no copyright infringement.
- deleted 4y ago
- nemothekid 4y agoThis reminds me of the "olden" days where you view source and copy/paste into Dreamweaver. Is this limited to React sites, or any HTML page?
- tscepo 4y agoAny page that renders html should work!
- dpbriggs 4y agoThis is pretty cool. Are you worried about copyright at all though? Especially if this get used in a commercial context?
- spinny 4y agoif 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 available, very likely you will not have permission to use it. Don't see a legal usage of this kind of tool in a commercial context. Pretty useful as a learning too though
- cuddlecake 4y agoI feel like "availability to copy" or "inspectable" is not a reason to abandon Copyright protection. After all, it is currently the nature of web software that the source code must be available (for browsers to interpret)
- maxboone 4y agoI don't think that's entirely valid, you can point a camera to a playing movie but that doesn't waive any copyright.
- gjs278 4y ago
- ugjka 4y agoJust don't say you copied anything
- metadat 4y agoIt's up to users of the tool to ensure they comply with the law. Just like you somehow restrain yourself from photographing someone else's picture and then selling it.
- sibit 4y ago
- thih9 4y agoNice 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 useful to extract just a portion of that code. But in other scenarios it might be cleaner to just use that component library.
- tscepo 4y agoThanks! It'll work so long as what's rendered is html, instead of say a canvas element.
- deleted 4y ago[deleted]
- news_92 4y agoNice work! Love how simple the landing page is. Does it copy adaptive styles as well?
- tscepo 4y agoThanks! And no, it only samples the current state. For sure makes sense as a next feature.
- iorek_dev 4y agoI 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/CSS. Maybe rephrase it in "templating" ?
- thecassandrist 4y agoComponents are only JS, aren’t they?
- onion2k 4y agoThey usually are but don't have to be. If you only copy the JS you'll miss any HTML content in the page that the React component uses for hydration, any CSS that's linked rather than defined in the component, any code that sits outside of the React structure, anything that comes down over an API or a socket, etc. Itd be possible to build a React app that has very little React code in it, but it'd also be weird.
- cush 4y agoHTML and CSS does not a Component make
- mosfets 4y agoReminds of Huula[1] which snapshots the whole web page. [1]: https://huu.la https://huu.la
- darepublic 4y agoTook a look, seems to me like the title is a bit misleading. Maybe I'm mistaken but from watching the video I don't get the sense that this copies 'React code', from any site, it just takes a section of the dom from any site and copies over the relevant css and js. I think something like this is going to take off though, as frontend devs we keep reinventing the wheel needlessly. You should be able to point to a site, any site, and basically clone it. Generate a suitable backend while you're at it. Do a style transfer. So say I want to have an ecommerce shop in a certain niche, point to an existing online store, do a style transfer, and boom you have the same functionality just with original content and style. Addendum: Figured I should give it a try because I think the idea has promise. But I tried this on three sites, a regular js site, a next.js site and a CRA site. Each time tried to do a 'Copy React' op on a button, and each time I just got back html.
- tscepo 4y agoThe react export option exports inline jsx for now. You should be able to directly paste that into a react file, as opposed to the html export. I purposely don't wrap the jsx in a named component since I can see all kinds of use cases where a person wants to inject jsx into a part of an existing component.
- darepublic 4y agoYou are right, it is not plain html, it is jsx.
- deleted 4y ago[deleted]
- tomhallett 4y agoI 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 copying the html/css of a website and then exporting it to an autogenerated react component(s). 2) It would be great if the demo video showed the React component generated. Is all of the html thrown into 1 component? Is the resulting html clean? Or is it cluttered with html attributes that aren't actually needed?
- tscepo 4y agoAt 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, which shows an earlier version of the feature. Will update video.
- pg_1234 4y agoSome logic to rename variables and perhaps wrap on-screen text with an instruction to rephrase, coupled with watermarking images so they have to be replaced, might effectively render copyright objections void/unenforceable ... it's not like you can copyright the general techniques. This would make it a far more viable commercial tool. If this could be combined with tooling to facilitate the use of generated code to more easily produce React Native compliant versions, giving you a quicker path to iOS and Android equivalents, you would be halfway to auto-generating what 90% of non-technical people want when they say "just build me something like X site/app".
- gpderetta 4y agoRephrasing and renaming won't get you around copyrights.
- pg_1234 4y agoIn literature no, but in code, where once you take those parts out what's left is often industry standards on function structure, used so often that you would struggle to identify which example your copy is based on (a good defense in itself) ... there you should be ok. It's really just a specialized Copilot at that point.
- frays 4y agoThis is fantastic. Looking forward to watching this project grow, I can see this becoming very useful for many small-mid sized companies.
- zeroonetwothree 4y agoMost 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 with that and indeed will make it harder since it's probably generating some cluttered HTML. Or what if you want a consistent set of styles for multiple components? You probably have to recreate everything from scratch at that point. It seems fine for simple mocks/POC type stuff.
- pleb_nz 4y agoBe better if it were only chrome.
- egfx 4y agoThis is like SnappySnippet, https://chrome.google.com/webstore/detail/snappysnippet/mdmgnnmlhdfofojkdoajglgmhaicejkk?hl=en-US https://chrome.google.com/webstore/detail/snappysnippet/mdmg... And it’s open source. This file does all the parsing magic to get clean html. https://github.com/kdzwinel/SnappySnippet/blob/master/js/tools/Snapshooter.js https://github.com/kdzwinel/SnappySnippet/blob/master/js/too...
- Proven 4y ago
- epberry 4y agoThere’s a hidden part of Aspect that is very functional, with some rough edges: https://sites.aspect.app https://sites.aspect.app I host 2 sites there: - https://everettberry.com https://everettberry.com - https://prcvlabs.org https://prcvlabs.org I’ve found it quite nice for maintaining static sites which I update once a month or so.
- b0ner_t0ner 4y ago> Aspect that is very functional, with some rough edges Coming from Asia, these are some of the slowest sites I've seen this morning. Aspect seems to be running on Express hosted on DO. Not sure why they don't cache properly and/or go JAMstack and/or have a proper CDN.
- gardenhedge 4y agoHow does it work?