Href Https
frontend · 3 signals · 1 source
Evidence
Show HN: Domphy – plain-object UI for tool apps, AI-correctable output — I built a UI framework named Domphy because I could not learn React although I tried many times. I mean I could not understand React code which is hidden behind multiple layers, especially when some of them use React ecosystem libs. Maybe I am an architect turned developer, so I had no foundation of programming, or I expected something clear and clean.<p>I just think that UI should be simple — HTML and JS are enough and just need some way to make it stateful instead of making it more complicated. My idea: just using JS objects to reflect HTML, and using functions for state. When I need to reuse a component I had one more concept — just make a partial (I call it a Patch) to add props to the main object (but native props still win). With a component-based approach you get deep nesting and exploding props, but with patches you don't. The example below:<p><pre><code> import { ElementNode, toState } from "@domphy/core"; import { tooltip } from "@domphy/ui"; const count = toState(0); const App = { div: [ { h3: (listener) => `Count: ${count.get(listener)}` }, { button: "Increment", onClick: () => count.set(count.get() + 1), $: [tooltip({ content: "Add one to the count" })], }, ], style: { display: "flex", gap: "8px", alignItems: "center" }, }; const root = new ElementNode(App); root.render(document.getElementById("app")!); </code></pre> Right now I am the only one using Domphy, for around a year, for creating SketchUp and Revit plugins in the AEC (Architecture, Engineering, Construction) industry. I created Domphy before AI code generation took off, to make code humans can read and understand clearly, but now AI can build UIs with React well, so sometimes I feel my work is meaningless. But I still use Domphy for my apps, because I feel more confident when I need to read and edit UI code when the AI gets stuck.
Show HN: Open Components – UI Components standard for people, devs and AI agents — Hello awesome people,<p>I've been thinking a lot lately about how I can make my knowledge and craft more valuable in the times we live in. I've been building UI libraries for the past 10 years, and I've been on a quest to perfect the components that I build. I want to share my knowledge with you. Like most of you, probably, I've been using a lot of AI in my craft, and I feel most of the time the code is just good enough, but never at the level of quality that I strive for or that I would reach if I wrote it by hand. That needs to change, and I want it to change for everyone else, too. That's how the Open Components initiative was born.<p>Each component gets a single page that walks through four directions: User Interface, User Experience, Developer Experience, and Agentic Experience, and ends with a checklist. Every rule in it has an ID like `button/keep-focus`, a level and a way to check it, so you or your agents can cite it in a code review. Every page is also published as markdown, and provides the contract as a YAML file, containing every rule in about an eighth of the page’s length.<p>It’s still early. Right now there are only the Button and Input components and a page on how to name your design tokens. Each component comes with a reference implementation that meets every rule, along with its tests. Reference implementation is in Vue for now, since that’s my daily driver, but the documentation comes with code examples from multiple UI frameworks. More components will follow, with the same structure.<p>It isn’t a component library, so there’s nothing to install. It’s a set of rules you can hold your own components to, whichever library or framework you use.<p>I’d love your feedback and contribution. Tell me what you think of the rules, what I’ve missed, and which component you’d like to see next.<p>Thanks for reading!<p>Site: <a href="https://opencomponents.dev" rel="nofollow">https://opencomponents.dev</a> Button: <a href="https://opencomponents.dev/docs/components/button" rel="nofollow">https://opencomponents.dev/docs/components/button</a> GitHub: <a href="https://github.com/uxfront-com/open-components" rel="nofollow">https://github.com/uxfront-com/open-components</a>
Show HN: Video uploader for React/RN – drop in or headless UI, any back end — Universal Video Uploader is an open source React/React Native component library for adding video upload flows to your app. It handles the UX and background mechanics for single or multi-video upload flows: upload state, file queue, concurrency, per-file progress, abort/retry, validation, and backend communication for async processing.<p>It comes with a composable and customizable UI, or you can go headless and use the core hooks to build your own. You can connect it to any backend via the adapter interface, and it ships with a prebuilt adapter for Hyperserve (a video backend API I built).<p>I've had to build this kind of thing a few times and it's more complex than it seems, I wanted to try making something drop in that is still flexible and comprehensive. I'm currently using it as the dashboard uploader for Hyperserve and so far it's working great.<p>Try it at <a href="https://videouploader.fyi" rel="nofollow">https://videouploader.fyi</a>. There's full docs with live demos for every component, plus working Next.js and Expo examples you can run. I'd appreciate any feedback on it if you have any!