Convert any website into a React component
Hey HN, we built a Chrome Extension (https://www.magicpatterns.com/extension) that converts a snippet of any website to an isolated React component. Demo video: https://youtu.be/hutUYDkyE_A How it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors / inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX It was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out…
In plain words
This Chrome extension converts selected website snippets into isolated React components. Users select an element on any webpage, and the tool analyzes the DOM tree, extracts CSS styles using computed values, and generates minimal JSX code that reproduces the visual appearance. It's designed for developers and web designers who want to quickly reuse website components in React projects without manually recreating the HTML and styling.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
Hey HN, we built a Chrome Extension (https://www.magicpatterns.com/extension) that converts a snippet of any website to an isolated React component. Demo video: https://youtu.be/hutUYDkyE_A How it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors / inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX It was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out global styles, removing inherited styles, pulling out SVGs, deleting styles with no effect, and condensing styles into their shorthand properties. We dive into each of those optimizations here for fun: https://www.magicpatterns.com/blog/any-website-to-react-comp... One of the main reasons we cared so much about condensing down the styles was not only to make it more human-readable, but also to reduce context length for an LLM, so that you can iterate on it with AI. Our extension has a “convert” option that lets you convert the output to Tailwind, Shadcn, or Chakra UI using an LLM. You can also export to Figma. We're frontend engineers and we built the extension because our core product (https://www.magicpatterns.com/) helps software teams prototype their product ideas. And a huge pain point for users is getting their existing designs into our product, so that they can reference them to generate UIs with their existing aesthetic. The extension allows you to get existing design context from any website, even localhost. Since launch, the extension has more than 3,000 users and interestingly is most popular in Japan. Here's some real examples if you're curious what the final output looks like: A) Hacker News Navbar - https://www.magicpatterns.com/ac9f38e4-5ef0-49e5-8b80-dbc429... B) ChatGPT Welcome Screen - https://www.magicpatterns.com/7cb3ad12-cb12-4a5b-b32b-eda04d... C) Cal.com Calendar Component — https://www.magicpatterns.com/a43bac78-134d-458d-8107-811ac7... D) Stripe.com logo section - https://www.magicpatterns.com/deff1793-7a05-42fe-97f7-945976... If you have an opinion about the extension, we’re all ears! You can try it for free at: https://www.magicpatterns.com/extension
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, November 2024
the whole month →
- IB
I wasn't quite sure if this qualified as "Show HN" given you can't really download it and try it out. However, dang said[0]: > If it's hardware or something that's not so easy to try out over the internet, find a different way to show how it actually works—a video, for example, or a detailed post with photos. Hopefully I did that? Additionally, I've put code and a detailed guide for the netboot computer management setup on GitHub: https://github.com/kentonv/lanparty Anyway, if this shouldn't have been Show HN, I apologize! [0]…
Dev tools · 2024 · lanparty.house
