Alternatives
Products that do what Convert any website into a React component does
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…
- 1
- 2CR
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!
2022 · sample-code.aspect.app
- 3
- 4
- 5
- 6AV
I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head, and then jump between the browser and IDE to test. I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Hope it’s useful!
2022 · dev.aspect.app
- 7
- 8
- 9
- 10PR
2022 · smarketman.com
- 11
- 12CA
Hey everyone, I built a simple React/Python app that takes screenshots of websites and converts them to clean HTML/Tailwind code. It uses GPT-4 Vision to generate the code, and DALL-E 3 to create placeholder images. To run it, all you need is an OpenAI key with GPT vision access. I’m quite pleased with how well it works most of the time. Sometimes, the image generations can be hilariously off. See here for a replica of Taylor Swift’s Instagram page: https://streamable.com/70gow1 I initially had a hard time getting it to work on full page screenshots. GPT4 would code…
2023 · github.com
- 13
- 14
- 15R0
2014 · gist.github.com
- 16
- 17
- 18
- 19
- 20UG
Hi all, I'm currently working on my hobby project, and one of the fun constraints I put in was to build using as less dependencies as possible. I chose Go as it has a really good standard library, and all went well for building backend. But for frontend, I was wondering whether I should break the constraint and go for React. I tried options like Web Components, but I really didn't like the ergonomics and I didn't want to use jQuery either. Out of curiosity, I was exploring Go's html/template package to see if I can write UIs in a React-like manner. I found most of the online docs using…
2024
- 21SJ
Hi HN! I created this lib in the need of a simple and tiny framework to easily do AJAX-style navigation / replacement of fragments in the page, in a web application. For people who don't want to use client-side-rendering and complex frameworks à la React, there are nowadays a few "HTML-over-the-wire" libraries, like HTMX, Unpoly or this super-tiny one Swap.js :) One other key thing is that no external tool is needed: no bundler, no webpack, no TypeScript compiler, no minification needed. Just write HTML, JS (+ your preferred server-side language: PHP, Python, etc.) and it works. The…
2023 · github.com
- 22
- 23MW
2019 · subdued-health.surge.sh
- 24CO
Hi all! Here is my open-source side-project. It is a browser extension that lets you click on a component on your localhost to get to its code in your editor. It works with React, Svelte, SolidJS, Preact, and Vue components and with VSCode, Webstorm, or any other editor that supports URL protocol links. It can be used also as JavaScript library (instead of installing browser extension) It speeds up my web development so much that I can't work without that anymore :D Let me know if you like it or if you would like to improve it somehow. Contributions are welcomed…
2022 · locatorjs.com
Ranked by how close each launch is in meaning, then by votes. Refine with a description →