It is a very silly example of a Counter Web Component.
> bun install counter-wcThe idea of this library is to show how you can use the Brisa Web Component compiler to transform JSX with Signals into two files; one to load the web component on the client, and another to load the web component on the server to make the SSR of the Web Component easy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brisa Web Component Example</title>
<script type="importmap">
{
"imports": {
"brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
}
}
</script>
<script type="module" src="https://unpkg.com/counter-wc@latest"></script>
</head>
<body>
<counter-wc start="15"></counter-wc>
</body>
</html>Note
The importmap is necessary because all the compiled web components are only the rendering function so that they take up little space, but they need the Brisa wrapper to work correctly.
For this, you need Bun.js or Node.js. You can integrate it with any framework without the need to have JSX. What you will need is to have the Brisa library installed to use its renderToString.
> bun install brisa
> bun install counter-wcAnd then you can use the renderToString function to render the web component on the server.
ssr.js
import { renderToString } from 'brisa/server';
import { jsx } from 'brisa/jsx-runtime';
import CustomCounter from 'counter-wc/server';
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brisa Web Component Example</title>
<script type="importmap">
{
"imports": {
"brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"
}
}
</script>
<script type="module" src="https://unpkg.com/counter-wc@latest"></script>
</head>
<body>
${await renderToString(jsx(CustomCounter, { start: 10 }))}
</body>
</html>
`;
console.log(html);Then run bun run ssr.js and you will see the HTML with the rendered web component using the Declarative Shadow DOM.
Brisa uses a special integration file located at web-components/_integrations.(tsx|ts|js|jsx). This file maps Web Component selectors to their respective libraries, ensuring they are correctly loaded when needed.
import type { WebComponentIntegrations } from "brisa";
export default {
"counter-wc": {
client: "counter-wc",
server: "counter-wc/server",
types: "counter-wc/types",
},
} satisfies WebComponentIntegrations;Note
After this integration, you can use the Web Component in your Brisa application directly by typing <counter-wc></counter-wc> in your JSX code (pages, components, web components, elements). SSR and TypeScript support are automatically handled by Brisa.
You just need to clone the repository, install the dependencies with:
> bun installAfter that, you can build the Web Component with:
> bun run buildBelow the build script runs the brisa build -w src/counter-wc.tsx command that does the magic of transforming the JSX with Signals into two files, one for the client and one for the server.
Feel free to use this reference library to create your own Web Components with Brisa and share them with the community.
MIT
