The latest articles on DEV Community by Wael (@wael). https://dev.to/wael https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F359107%2Fdac98777-c7c2-4f44-a045-ada2d3617e42.png https://dev.to/wael en Wael Wed, 22 Apr 2026 20:39:14 +0000 https://dev.to/wael/announcing-elementskit-a-toolkit-of-reactive-primitives-for-building-the-web-ui-2gbd https://dev.to/wael/announcing-elementskit-a-toolkit-of-reactive-primitives-for-building-the-web-ui-2gbd <p>I'm happy to announce <a href="https://github.com/waelbettayeb/elements-kit" rel="noopener noreferrer">ElementsKit</a>: a toolkit of reactive primitives for building the web UI. Signals, JSX, custom elements, and utilities. Use them standalone, compose them, or use them inside <strong>React</strong>, <strong>Svelte</strong> ...</p> <p>› <strong>Compose, don't configure</strong>. <code>signal</code>, <code>computed</code>, <code>on</code>, <code>fromEvent</code>, <code>async</code>. Combine primitives instead of maintaining an overloaded interface. Overloaded interfaces accumulate breaking changes and deprecation every consumer has to track.</p> <p>› <strong>Close to the platform</strong>. JSX compiles to <code>document.createElement</code>. <code>promise</code> extends <code>Promise</code>. <code>async</code> is awaitable. A custom element is an <code>HTMLElement</code>. No virtual DOM, no proxies, no build steps.</p> <p>› <strong>Predictable and explicit (no magic)</strong>. <code>signal</code>/<code>compose</code> are reactive; nothing else is. No heuristic dependency tracking, no hidden subscriptions.</p> <p>› <strong>Designed for the AI age</strong>. Code is cheap; maintenance still isn’t. Primitives compose into higher-level blocks. Swap one block at a time instead of maintaining long lines of code.</p> <p>› <strong>Bundler-friendly</strong>. Every primitive is its own subpath — <code>elements-kit/signals</code>, <code>elements-kit/utilities/media-query</code>, <code>elements-kit/integrations/react</code>. Import only what you need. </p> <p>Source code: <a href="https://github.com/waelbettayeb/elements-kit" rel="noopener noreferrer">https://github.com/waelbettayeb/elements-kit</a><br> Docs: <a href="https://elements-kit.quba.co" rel="noopener noreferrer">https://elements-kit.quba.co</a><br> Why?: <a href="https://elements-kit.quba.co/getting-started/philosophy" rel="noopener noreferrer">https://elements-kit.quba.co/getting-started/philosophy</a></p> webdev ai javascript ui