tool · one of 34Pro component file
Component
Can I take this element as a React component?
Copying an element usually gives you markup with class names that mean nothing outside their original stylesheet, or a computed rule several hundred lines long. This writes the element out as a component - markup and styles together, in React, Vue or Svelte.
Reach itPress ⌘+K on any tab and type component.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · this one is Pro
What this actually is
take the selected element out as a react or vue componentWhen you are reproducing an interaction or a layout you have found, and you want the starting point to be code rather than a picture. It gives you a first draft to edit, not something to ship unread.
Asked about this tool
3 of themDoes it get the behaviour too?
No. It takes the rendered shape and its styles. Event handlers, state and data fetching are not in the DOM to be read, and inventing them would produce a component that looks right and does nothing.
What about images and fonts?
References are kept as they are, pointing at the original origin. Copying assets is a decision about somebody else’s bandwidth and licensing, so it is left to you.
Can I get Vue or Svelte instead?
Yes - the emitters are a table, and the target is a menu on the same panel. The clean-up passes are shared, so every target gets the same subtree.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits