Alternatives
Products that do what A better way of writing HTML via JavaScript? does
Although I've been using React for at least 5 years now, I don't quite like frameworks. For personal projects I sometimes use web component but they can be over kill depending on what you are trying to achieve. I do like JSX though. I think it's quite neat to be able to write HTML inside of JavaScript code. With that in mind, I've been trying to come up with a way to better create HTML dynamically. Something along the lines of: const req = await fetch('api.com/posts') const data = await req.json() for (const d of data) createPost(d) For that, I end up writing this piece of code const…
- 1
- 2UG
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
- 3
- 4CA
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…
2024 · chromewebstore.google.com
- 5CR
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
- 6IM
Hi! I made a React compatibility library for a Virtual DOM library (https://github.com/aidenybai/million). The idea is to have much faster rendering (a compiler optimizes virtual DOM beforehand) while ensuring the same developer experience React provides. This is very, VERY early stage, so be prepared for weird bugs / plugin incompatibility / etc. If you have any suggestions, I'd be more than happy if you replied in a comment with it! You can spin up the demo here >> https://stackblitz.com/github/aidenybai/million-react-compat
2022
- 7AV
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
- 8
- 9
- 10
- 11AJ
I've been building a web UI library for a side project of mine. I thought it might be useful to others, so I'm releasing it as open source. To put it simply, I realized that most of my pain points with React come from its declarative model ui=f(state). So I'm trying something that I'm calling "imperative JSX." Instead of treating JSX as the source of truth for your UI, it essentially becomes a query interface for DOM manipulation. I first had the idea for it a few months ago, and only began writing it in earnest last week, so it's extremely early and nowhere near production-ready. Still, I'd…
2024 · npmjs.com
- 12MJ
Hey HN, I'd like to share a fun project I've been working on: mizu.js. It's a js library that add functional attributes support into your html, designed to be a simple and flexible alternative to fully-fledged web frameworks (such as Vue, React, and Angular), while offering more capabilities than other lightweight options (like Alpine.js and htmx). As it's written using modern ES features and due to its isomorphic nature, it can be run in both browsers and runtimes (Node, Deno, Bun) without any changes. This makes it ideal for client-side and server-side rendering, as well as static site…
2024 · mizu.sh
- 13SJ
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
- 14HS
Author here. This is an attempt to simplify frontend development: 1. Standards first: User interfaces should be assembled with HTML, styled with CSS, and enhanced with JavaScript. 2. Less abstractions: UI composition should be easy and require as few idioms and abstractions as possible, both on client and server. 3. Design Systems: Design should be a separate subsystem, easily accessible for developers who care about and understand design. 4. Scalability: Complex UIs should retain simplicity as the application grows. Eager to hear your thoughts!
2025 · nuejs.org
- 15IB
Hey everyone! Some time ago I was analyzing why React apps are so hard to optimize, and came to a conclusion that the lack of atomic updates is the culprit. I made an experimental library which basically updates everything in place directly in HTML. At some point I became aware that Solidjs exists, which is a very similar idea, but at the end of the day I realized my approach to API is quite different and warrants the existence of my library (my state primitive allows selector subscriptions, array iterators return a state primitive with the element, allowing to never re-render the whole…
2024 · github.com
- 16PR
2022 · smarketman.com
- 17LR
2016 · educative.io
- 18R0
2014 · gist.github.com
- 19CO
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
- 20TJ
Hi everyone, the other day I was here cause I thought I came up with a neat way of creating HTML via JavaScript [1] - After some iterations, I'm quite content with the code I wrote. Since I intend to use this in my personal projects, I thought others might as well. 1 - https://news.ycombinator.com/item?id=41451559
2024 · github.com
- 21NJ
Hey, I'm absolutely thrilled to introduce my meticulously crafted Next.js Boilerplate, a project I've maintained for over 2 years. Recently, this project has achieved a huge milestone, over 4500+ stars on GitHub! Initially, I've build the boilerplate for my own use case. A template that allows me to kickstart a new React project with all the necessary tooling. The idea is to setup once and then reuse the template for all my future web projects, eliminating the need to start from scratch each time. This approach tremendously saves time, sparing me from repeatedly configuring and integrating…
2023
- 22RW
source: https://codesandbox.io/s/dikoh?file=/index.html Static Template import { ChakraProvider, Box, Text } from "https://cdn.skypack.dev/@chakra-ui/react"; import React, { useRef } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const MyText = ({ color, ...props }) => { return ; }; function Foo() { return ( Foo ); } function App() { return ( Hello Skypack ); } ReactDOM.render( , document.getElementById("main") );
2021
- 23A4
Hi everyone! We’re Avishay, Or, and Michal, co-founders of Anima (www.animaapp.com). Anima converts design (Figma/Sketch/XD) into code automatically. Up until today, we only produced HTML/JS/CSS. With our latest release, we can now also generate developer-friendly React code. We’re here to replace image-based handoff, which involves a lot of grunt work for the engineers who have to translate all those images into code that does the same thing. For designers, the pain we solve is the ping-pong, and their vision getting lost in translation. The bottom line is that teams can…
2020
- 24OO
Hey all, I'm a big fan of the HTML-first + Progressive Enhancement approach to UI development! For a background: 1. I like to be able to write HTML by default and progressively add JavaScript (and, in the same way, progressively involve tooling) instead of go ahead of the problem by going the other way around! 2. Also turns out that UIs are more resilient when built on the same principles: - given how browsers process web pages: HTML initially, then JavaScript eventually; with the bulk of the page being best done at the initial phase - and given how, on a more general note, performance is a…
2024 · github.com
Ranked by how close each launch is in meaning, then by votes. Refine with a description →