### Fast, React-like, Web-Components.
[](https://www.npmjs.com/package/wompo)
### Documentation
Check the full documentation for Wompo at [wompo.dev](https://wompo.dev).
[](https://ko-fi.com/wompo)
### Quick Example: Counter
Creating a custom Counter component is very easy with Wompo, and works exactly like React!
```js
import { defineWompo, html } from 'wompo';
export default function CounterComponent({ styles: s }) {
const [count, setCount] = useState(0);
const inc = () => setCount(count + 1);
return html``;
}
CounterComponent.css = `
.button {
border-radius: 10px;
background-color: #573ef6;
color: #fff;
padding: 10px 20px;
border: none;
}
`
defineWompo(CounterComponent);
```
Then, you can simply render it in you HTML:
```html
```
## Server-Side Rendering
Wompo ships a string-based SSR engine and a client-side hydration runtime. The same `defineWompo`
components render on the server, hydrate selectively on the client (islands-first), and stream
suspended content out of order.
### Render to string
```js
import { renderToString } from 'wompo/ssr';
import Counter from './counter.js';
const { html, headTags, css, islands } = await renderToString(Counter, { start: 5 });
// html: `…`
// headTags: inline `
