Elemento

A lightweight, opinionated library for building web components with a functional, React-inspired approach, powered by the excellent lit-html templating library and the tiny, fast Preact Signals Core reactivity system.

✨ Modern & Lightweight — Ships as ESM modules, use directly in browsers or bundle as needed
🚀 React-inspired API — Familiar functional component patterns
⚡ Reactive by default — Powered by Preact Signals for automatic updates
🎯 Standards-based — Built on native Web Components and Custom Elements

• Documentation & Examples — complete guide and live demos

Quick start:

npm install @solidx/elemento

import { Elemento, html } from '@solidx/elemento';

function Hello({ name }) {
  return html`<p>Hello ${name.value || 'World'}</p>`;
}

customElements.define(
  'hello-name',
  Elemento(Hello, {
    observedAttributes: ['name'],
  })
);

Notes

• Attributes listed in observedAttributes are exposed to your component as reactive signals with a .value field. Changing the attribute or the signal updates the DOM.
• You can define reactive JS properties via properties: ['propName'] in options; they are exposed as signals too and kept in sync with getters/setters on the element instance.
• If your template includes a base tag you want to access (e.g., a button), you can set baseTag: 'button' in options and read it via el.baseElement within your component.