Get the top HN stories in your inbox every day.
tomhallett
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
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.
pg_1234
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".
gpderetta
Rephrasing and renaming won't get you around copyrights.
egfx
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...
AdriaanvRossum
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
matthberg
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.
iorek_dev
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
Components are only JS, aren’t they?
onion2k
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.
kirse
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?
dpbriggs
This is pretty cool. Are you worried about copyright at all though? Especially if this get used in a commercial context?
EnKopVand
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.
spinny
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
maxboone
I don't think that's entirely valid, you can point a camera to a playing movie but that doesn't waive any copyright.
cuddlecake
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)
ugjka
Just don't say you copied anything
metadat
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.
sibit
> 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.
nemothekid
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
Any page that renders html should work!
zeroonetwothree
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
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.
bencollier49
A cynic might be tempted to make facetious comparisons to Copilot.
thih9
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
Thanks! It'll work so long as what's rendered is html, instead of say a canvas element.
boomskats
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
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.
Get the top HN stories in your inbox every day.
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!