\n\n\n### Documentation\n\nCheck the full documentation for Wompo at [wompo.dev](https://wompo.dev).\n\n[](https://ko-fi.com/wompo)\n\n### Quick Example: Counter\n\nCreating a custom Counter component is very easy with Wompo, and works exactly like React!\n\n```js\nimport { defineWompo, html } from 'wompo';\n\nexport default function CounterComponent({ styles: s }) {\n const [count, setCount] = useState(0);\n const inc = () => setCount(count + 1);\n return html``;\n}\n\nCounterComponent.css = `\n .button {\n border-radius: 10px;\n background-color: #573ef6;\n color: #fff;\n padding: 10px 20px;\n border: none;\n }\n`\n\ndefineWompo(CounterComponent);\n```\n\nThen, you can simply render it in you HTML:\n\n```html\n\n\n```\n\n## Server-Side Rendering\n\nWompo ships a string-based SSR engine and a client-side hydration runtime. The same `defineWompo`\ncomponents render on the server, hydrate selectively on the client (islands-first), and stream\nsuspended content out of order.\n\n### Render to string\n\n```js\nimport { renderToString } from 'wompo/ssr';\nimport Counter from './counter.js';\n\nconst { html, headTags, css, islands } = await renderToString(Counter, { start: 5 });\n// html: `…`\n// headTags: inline `
![\"Wompo\"](\"./assets/logo-dark.svg\"){kind=logo}
\n