Show HN: Copy React code from any site(sample-code.aspect.app)
sample-code.aspect.app
Show HN: Copy React code from any site
https://sample-code.aspect.app
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!
82 comments
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 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?
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?
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, which shows an earlier version of the feature. Will update video.
Some 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".
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".
Rephrasing and renaming won't get you around copyrights.
In 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.
It's really just a specialized Copilot at that point.
This is like SnappySnippet, 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/too...
And it’s open source. This file does all the parsing magic to get clean html.
https://github.com/kdzwinel/SnappySnippet/blob/master/js/too...
Reminds me of CSS scan [1]. It was also on Hacker News [2] a while back.
[1] https://cssscan.pro/
[2] https://news.ycombinator.com/item?id=17609252
Wow, $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.
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/CSS.
Maybe rephrase it in "templating" ?
But it is a bit misleading to say it will copy a component. Components are more than HTML/CSS.
Maybe rephrase it in "templating" ?
Components are only JS, aren’t they?
They 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.
Itd be possible to build a React app that has very little React code in it, but it'd also be weird.
This 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?
This is pretty cool. Are you worried about copyright at all though? Especially if this get used in a commercial context?
I 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.
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.
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 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
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
I don't think that's entirely valid, you can point a camera to a playing movie but that doesn't waive any copyright.
I 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)
After all, it is currently the nature of web software that the source code must be available (for browsers to interpret)
Just don't say you copied anything
It'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.
Just like you somehow restrain yourself from photographing someone else's picture and then selling it.
> 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.
But screenshotting and reselling peoples NFTs is one of my favorite hobbies.
This 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?
Is this limited to React sites, or any HTML page?
Any page that renders html should work!
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 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.
It seems fine for simple mocks/POC type stuff.
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.
A cynic might be tempted to make facetious comparisons to Copilot.
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 useful to extract just a portion of that code. But in other scenarios it might be cleaner to just use that component library.
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.
Thanks! It'll work so long as what's rendered is html, instead of say a canvas element.
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/component dev persona much better than Pagedraw did, for example. What's your monetisation strategy?
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?
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 actually.
HTML and CSS does not a Component make
There’s a hidden part of Aspect that is very functional, with some rough edges: https://sites.aspect.app
I host 2 sites there:
- https://everettberry.com
- https://prcvlabs.org
I’ve found it quite nice for maintaining static sites which I update once a month or so.
I host 2 sites there:
- https://everettberry.com
- https://prcvlabs.org
I’ve found it quite nice for maintaining static sites which I update once a month or so.
> 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.
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.
Reminds of Huula[1] which snapshots the whole web page.
[1]: https://huu.la
[1]: https://huu.la
This is fantastic. Looking forward to watching this project grow, I can see this becoming very useful for many small-mid sized companies.
[deleted]
Q for you: does this work if the code has been transpired, e.g., with Babel?
Should work as long as the final output is html, instead of say something rendered within a canvas element.
great work, although I would expect some lash back from the React/SPA front end dev guys ;-)
If anyone "stole" one of my components the only thing I can do is pray for them. I'm not worried ;)
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 inline style are not good enough right now.
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.
Nah, this is great.
Be better if it were only chrome.
How does it work?
[deleted]
Took 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.
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.
The 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.
You are right, it is not plain html, it is jsx.
[deleted]
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 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.
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.
Two 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.
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.
C&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.
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.
I don't disagree - write your own components in most cases.
Your original comment stated, as fact, "you'll get yourself or your employer sued, and/or your work pulled off the internet against your will."
You're right that suits do happen, and while there is a grain of truth in what you said, stating it the way you did is just too bold in my opinion. I highly doubt the individual developer would be sued. How would a company seeking damages know who made the git commit so they could target the developer?
The clarification in your reply about copying being willful, profitable and profit-damaging is where things start to make sense. And if you had said something along the lines of that, I wouldn't have replied and would have found myself in agreement.
Your original comment stated, as fact, "you'll get yourself or your employer sued, and/or your work pulled off the internet against your will."
You're right that suits do happen, and while there is a grain of truth in what you said, stating it the way you did is just too bold in my opinion. I highly doubt the individual developer would be sued. How would a company seeking damages know who made the git commit so they could target the developer?
The clarification in your reply about copying being willful, profitable and profit-damaging is where things start to make sense. And if you had said something along the lines of that, I wouldn't have replied and would have found myself in agreement.
> Remember: others' work is theirs unless they license it to you.
But Google scraping the web is somehow allowed? I'm not against it but these laws seem arbitrary.
But Google scraping the web is somehow allowed? I'm not against it but these laws seem arbitrary.
Google respects robots.txt. Allowing Google scraping is optional. In fact many websites serve more content to google bot than to you before you log in, google bots clip through paywalls
Those two are so different I don't see how you can conflate them.
One is ripping out a technical inner working from a website and using that to create your own.
The other is just making a directory of where to find things that are intentionally publicly available
One is ripping out a technical inner working from a website and using that to create your own.
The other is just making a directory of where to find things that are intentionally publicly available
All laws are arbitrary. But the story of how we got them is meaningful.
Copyright exists to encourage more copyable stuff to be made (pg has a good essay on this topic, where he observes history shows the opposite of a copyright regime isn't openness... It's guilds and secrecy cults). What Google does (interpreting the data that scans to help you find references to searches) is considered either transformative work, or recitation of fact. Copyright does not prevent somebody from doing those things because those things make works discoverable, which encourages people to make more stuff.
Copyright exists to encourage more copyable stuff to be made (pg has a good essay on this topic, where he observes history shows the opposite of a copyright regime isn't openness... It's guilds and secrecy cults). What Google does (interpreting the data that scans to help you find references to searches) is considered either transformative work, or recitation of fact. Copyright does not prevent somebody from doing those things because those things make works discoverable, which encourages people to make more stuff.
> Copyright exists to encourage more copyable stuff to be made
This is a backward legitimization attempt. Copyright was made because editors, authors and composers lobbied to get a monopoly on their creations and derivative work. As a matter of fact, copyright was continuously expanded on requests from rent-seeking copyright holders (which, in the overwhelming majority of case, aren't creators of any kind).
This is a backward legitimization attempt. Copyright was made because editors, authors and composers lobbied to get a monopoly on their creations and derivative work. As a matter of fact, copyright was continuously expanded on requests from rent-seeking copyright holders (which, in the overwhelming majority of case, aren't creators of any kind).
> This is a backward legitimization attempt.
Not if you believe Jefferson's thoughts on the topic.
"It has been pretended by some, (and in England especially,) that inventors have a natural and exclusive right to their inventions, and not merely for their own lives, but inheritable to their heirs. But while it is a moot question whether the origin of any kind of property is derived from nature at all, it would be singular to admit a natural and even an hereditary right to inventors. It is agreed by those who have seriously considered the subject, that no individual has, of natural right, a separate property in an acre of land, for instance. By an universal law, indeed, whatever, whether fixed or movable, belongs to all men equally and in common, is the property for the moment of him who occupies it, but when he relinquishes the occupation, the property goes with it. Stable ownership is the gift of social law, and is given late in the progress of society... Society may give an exclusive right to the profits arising from [ideas], as an encouragement to men to pursue ideas which may produce utility, but this may or may not be done, according to the will and convenience of the society, without claim or complaint from anybody. Accordingly, it is a fact, as far as I am informed, that England was, until we copied her, the only country on earth which ever, by a general law, gave a legal right to the exclusive use of an idea. In some other countries it is sometimes done, in a great case, and by a special and personal act, but, generally speaking, other nations have thought that these monopolies produce more embarrassment than advantage to society; and it may be observed that the nations which refuse monopolies of invention, are as fruitful as England in new and useful devices." ~Thomas Jefferson, letter to Isaac McPherson, 13 Aug. 1813
The goal was to encourage innovation. I don't disagree at all that the goal was regulatory-captured in a significant way by rentiers, but its purpose is, counterintuitively, to incentivize pushing ideas out into the light.
Not if you believe Jefferson's thoughts on the topic.
"It has been pretended by some, (and in England especially,) that inventors have a natural and exclusive right to their inventions, and not merely for their own lives, but inheritable to their heirs. But while it is a moot question whether the origin of any kind of property is derived from nature at all, it would be singular to admit a natural and even an hereditary right to inventors. It is agreed by those who have seriously considered the subject, that no individual has, of natural right, a separate property in an acre of land, for instance. By an universal law, indeed, whatever, whether fixed or movable, belongs to all men equally and in common, is the property for the moment of him who occupies it, but when he relinquishes the occupation, the property goes with it. Stable ownership is the gift of social law, and is given late in the progress of society... Society may give an exclusive right to the profits arising from [ideas], as an encouragement to men to pursue ideas which may produce utility, but this may or may not be done, according to the will and convenience of the society, without claim or complaint from anybody. Accordingly, it is a fact, as far as I am informed, that England was, until we copied her, the only country on earth which ever, by a general law, gave a legal right to the exclusive use of an idea. In some other countries it is sometimes done, in a great case, and by a special and personal act, but, generally speaking, other nations have thought that these monopolies produce more embarrassment than advantage to society; and it may be observed that the nations which refuse monopolies of invention, are as fruitful as England in new and useful devices." ~Thomas Jefferson, letter to Isaac McPherson, 13 Aug. 1813
The goal was to encourage innovation. I don't disagree at all that the goal was regulatory-captured in a significant way by rentiers, but its purpose is, counterintuitively, to incentivize pushing ideas out into the light.
> 13 Aug. 1813
This is a good illustration of what I call a “backward legitimization attempt”: you quote a letter that comes from ONE CENTURY after copyright was introduced.
And by the way, the Statute of Anne, was actually introduced as a way to end publisher's monopoly and create the public domain after a short period (14 years), how ironic.
This is a good illustration of what I call a “backward legitimization attempt”: you quote a letter that comes from ONE CENTURY after copyright was introduced.
And by the way, the Statute of Anne, was actually introduced as a way to end publisher's monopoly and create the public domain after a short period (14 years), how ironic.
we're a bit past this point by now. Most people npm install some package, use webpack/minify to bundle it up, and poof no copyright or attribution. Even though both MIT and BSD (the most common licenses) require this. Even if you do the magical incantation to retain comments in your bundle, many packages don't include copyright in the comments. They include it in a LICENSE or README file.
Once upon a time devs cared about this sort of thing. Living through the '90s and then now... where devs just pick the default license (MIT?) that github puts on a repo is crazy. There is this cultural assumption today that everything is just a public domain free-for-all.
Once upon a time devs cared about this sort of thing. Living through the '90s and then now... where devs just pick the default license (MIT?) that github puts on a repo is crazy. There is this cultural assumption today that everything is just a public domain free-for-all.
[deleted]
> You wouldn't steal a policeman's helmet, etc.
Physical vs. digital. It's not stealing, it might be copyright infringement.
Physical vs. digital. It's not stealing, it might be copyright infringement.
Depends on the country you live in.
Not the whole globe is dominated by western laws :)
The 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
"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.
The code they created, to implement that component, is an original creative work. Thus protected under copyright.
> 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.
This is false. You can't copy a site's code and just change the design and poof, no copyright infringement.
manzu(1)
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 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
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
Maybe one day people will permissive license their front ends. At least for smaller projects. Maybe hosted at /license?
that would be a good start
[deleted]
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.
I predict that they will create this for Angular, Vue, Svelte, etc.
Perhaps you could elaborate because I’m not seeing how it’s a “game changer”.
Svelte could be awesome but quite hard I think since it's compiled and you don't get to view the source in production.