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!
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".
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.
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.
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.
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?
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.
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
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.
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.
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.
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?
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.
> 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.
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.
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.
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.
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.
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.
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.
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.
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
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
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).
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.
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.
"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.
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
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?