Works in any stack
A Wompo component is still a real custom element, so it can be dropped into existing pages and mixed with other frameworks.
Wompo
Build reactive custom elements with a React-like API, native browser primitives, SSR, islands hydration, and styles that stay out of the way.
$
npm i wompoWhat it does
Wompo turns small functions into portable UI primitives.
Define a component once, render it as a real custom element, and reuse it in static HTML, Wompo apps, SSR pages, or alongside React, Vue, Angular, and plain JavaScript.
Developer workflow
Write components as functions. Ship them as HTML elements.
State, events, children, refs, context, CSS modules, lazy components, portals, and SSR all use a compact API designed for productive front-end work.
import { defineWompo, html, useState } from 'wompo';
function LikeButton({ initial = 0 }) {
const [likes, setLikes] = useState(initial);
return html`
<button @click=${() => setLikes(likes + 1)}>
Likes: ${likes}
</button>
`;
}
defineWompo(LikeButton);Rendered element
<like-button initial="12"></like-button>
<!-- Works as a native custom element. -->Why use it
Modern Web Components with fewer moving parts.
Wompo keeps the native element model, but gives developers the ergonomics they expect from component libraries.
Hooks and dynamic DOM
Use familiar hooks such as useState, useEffect, useMemo, and context to keep UI state explicit and local.
CSS modules built in
Class names can be scoped automatically, so components remain predictable without forcing Shadow DOM by default.
Server rendering and islands
Render the same components on the server, then hydrate only the islands that need client-side behavior.
No mandatory bundler
Install from npm, use an import map, load from a CDN, or ship a single component where it is needed.
TypeScript friendly
The core is written with TypeScript and exposes component, props, element, and render helper types.
From install to production
A small workflow for real UI work.
- 01InstallAdd Wompo with npm or map it directly in the browser.
- 02ComposeCreate components with functions, hooks, events, children, and local styles.
- 03ShipRender as Web Components, hydrate on demand, and reuse across projects.
Start with a component, not a framework migration.
The docs include quick examples, API references, SSR guidance, hooks, and practical patterns for building with Wompo.