6 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!
- 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!
- 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
- 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.
- 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?
- 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.
- rubyist5eva 4y agoPerhaps you could elaborate because I’m not seeing how it’s a “game changer”.
- 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.
- truthwhisperer 4y ago
- 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.
- 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.
- 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.
- gjs278 4y ago
- chinathrow 4y ago> You wouldn't steal a policeman's helmet, etc. Physical vs. digital. It's not stealing, it might be copyright infringement.
- davmar 4y agoTwo absurd claims: 1. Getting sued 2. Getting your work pulled off the internet You say that you or your employer would be sued if you did this. Going through a legal battle over some copied HTML, CSS & JavaScript is expensive, distracting and time consuming. You'd first get a cease and desist letter. Who has the time or energy to sue over this? Getting your work pulled off the internet against your will. How would that happen? Have you heard of the pirate bay? There's no off-switch because you used someones react component. You might not like this tool or feel it facilitates behavior you consider unethical, and I get that, but these claims you made are absurd.
- oliwarner 4y agoC&D is a low effort shot to stop infringement. Suits follow where wilful and especially profitable or profit-damaging activity that can be shown. Eg, you stick it in your product. Saying suits are fanciful is harmful because they do happen. They often settle early, but that's attention your employer won't thank you for. It'll be grounds in many cases. Very familiar with TPB. Their founders did time for their involvement. I've also sent DMCA notices and had content pulled from services, even a domain pulled by its host because the owner ignored the notice. You absolutely can take extraordinary steps to work around it but you know... Maybe just write your own components? I've no opinion on this tool. It's a tool, like a text editor or View Source. I'm posting because of what people are suggesting doing with it.
- dpbriggs 4y agoThis is pretty cool. Are you worried about copyright at all though? Especially if this get used in a commercial context?
- 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> Just like you somehow restrain yourself from photographing someone else's picture and then selling it. But screenshotting and reselling peoples NFTs is one of my favorite hobbies.
- EnKopVand 4y agoI don’t think it’s an issue of the tool or the tool created, as others have pointed out, but how would you ever know someone stole your stuff this way? We still compile our TS to an ES5 target with bootstrap. If you copied a form from our site into the tool, it would be hard for us to tell you took it from us rather than writing it yourself. Maybe if you took some of our more custom card designs, but really, we wouldn’t know that you didn’t just design them yourself similar to how we did because you had the same issues.
- 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