[HN Gopher] Show HN: Copy React code from any site
___________________________________________________________________
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!
Author : tscepo
Score : 215 points
Date : 2022-07-09 18:06 UTC (4 hours ago)
(HTM) web link (sample-code.aspect.app)
(TXT) w3m dump (sample-code.aspect.app)
| boomskats wrote:
| 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?
| tscepo wrote:
| 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.
| lowwave wrote:
| great work, although I would expect some lash back from the
| React/SPA front end dev guys ;-)
| Kaze404 wrote:
| Nah, this is great.
| MarcelOlsz wrote:
| If anyone "stole" one of my components the only thing I can do
| is pray for them. I'm not worried ;)
| iorek_dev wrote:
| 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.
| bencollier49 wrote:
| A cynic might be tempted to make facetious comparisons to
| Copilot.
| manzu wrote:
| SirHound wrote:
| If you're wondering why this comment is getting downvoted it's
| because it's insanely patronising.
| PeterWhittaker wrote:
| Q for you: does this work if the code has been transpired, e.g.,
| with Babel?
| tscepo wrote:
| Should work as long as the final output is html, instead of say
| something rendered within a canvas element.
| kirse wrote:
| 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?
| news_92 wrote:
| Nice work! Love how simple the landing page is. Does it copy
| adaptive styles as well?
| oliwarner wrote:
| 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.
| OtomotO wrote:
| Depends on the country you live in. Not the whole globe is
| dominated by western laws :)
| chunkyks wrote:
| 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
| croes wrote:
| "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 wrote:
| The code they created, to implement that component, is an
| original creative work. Thus protected under copyright.
| aleksandrh wrote:
| > 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.
| gjs278 wrote:
| chinathrow wrote:
| > You wouldn't steal a policeman's helmet, etc.
|
| Physical vs. digital. It's not stealing, it might be copyright
| infringement.
| deckard1 wrote:
| 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.
| davmar wrote:
| 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.
| [deleted]
| amelius wrote:
| > 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.
| spinny wrote:
| 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
| shadowgovt wrote:
| 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.
| littlestymaar wrote:
| > 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).
| rubyist5eva wrote:
| 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
| [deleted]
| teaearlgraycold wrote:
| Maybe one day people will permissive license their front ends.
| At least for smaller projects. Maybe hosted at /license?
| rubyist5eva wrote:
| that would be a good start
| rvz wrote:
| 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.
| POiNTx wrote:
| Svelte could be awesome but quite hard I think since it's
| compiled and you don't get to view the source in production.
| rubyist5eva wrote:
| Perhaps you could elaborate because I'm not seeing how it's a
| "game changer".
| nemothekid wrote:
| 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?
| tscepo wrote:
| Any page that renders html should work!
| frays wrote:
| This is fantastic. Looking forward to watching this project grow,
| I can see this becoming very useful for many small-mid sized
| companies.
| cush wrote:
| HTML and CSS does not a Component make
| pleb_nz wrote:
| Be better if it were only chrome.
| AdriaanvRossum wrote:
| 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
| [deleted]
| thih9 wrote:
| 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.
| tscepo wrote:
| Thanks! It'll work so long as what's rendered is html, instead
| of say a canvas element.
| [deleted]
| truthwhisperer wrote:
| mosfets wrote:
| Reminds of Huula[1] which snapshots the whole web page.
|
| [1]: https://huu.la
| darepublic wrote:
| 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.
| tscepo wrote:
| 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.
| darepublic wrote:
| You are right, it is not plain html, it is jsx.
| zeroonetwothree wrote:
| 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.
| gCoaster wrote:
| 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.
| dpbriggs wrote:
| This is pretty cool. Are you worried about copyright at all
| though? Especially if this get used in a commercial context?
| spinny wrote:
| 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
| cuddlecake wrote:
| 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)
| maxboone wrote:
| I don't think that's entirely valid, you can point a camera
| to a playing movie but that doesn't waive any copyright.
| gjs278 wrote:
| metadat wrote:
| 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.
| EnKopVand wrote:
| 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.
| ugjka wrote:
| Just don't say you copied anything
| tomhallett wrote:
| 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?
| tscepo wrote:
| 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.
| iorek_dev wrote:
| 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" ?
| thecassandrist wrote:
| Components are only JS, aren't they?
| onion2k wrote:
| 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.
___________________________________________________________________
(page generated 2022-07-09 23:00 UTC)