Getting Started: CSR
CSR mode is the smallest setup. The browser loads a module, the module registers your custom elements, and the HTML page places those elements directly in the document.
Installation
bash
pnpm add @dathra/core @dathra/components @dathra/runtime @dathra/plugin1. vite.config.ts
ts
import { dathraVitePlugin } from "@dathra/plugin";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [dathraVitePlugin({ mode: "csr" })],
});2. tsconfig.json
json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@dathra/core"
}
}3. src/Counter.tsx
tsx
import { defineComponent, css } from "@dathra/components";
import { signal, computed } from "@dathra/core";
const Counter = defineComponent(
"my-counter",
({ props }) => {
const count = signal(props.initial.value);
const doubled = computed(() => count.value * 2);
return (
<div>
<p>Count: {count.value}</p>
<p>Doubled: {doubled.value}</p>
<button onClick={() => count.set(count.value + 1)}>+1</button>
</div>
);
},
{
props: {
initial: { type: Number, default: 0 },
},
styles: [css`
:host { display: block; padding: 16px; }
button { border-radius: 8px; }
`],
},
);
export { Counter };Count: {count.value}
Doubled: {doubled.value}
4. src/AppRoot.tsx
tsx
import { defineComponent } from "@dathra/components";
import "./Counter";
const AppRoot = defineComponent(
"app-root",
() => {
return (
<main>
<h1>Dathra CSR App</h1>
<my-counter initial="5"></my-counter>
</main>
);
},
);
export { AppRoot };Dathra CSR App
5. index.html
html
<div id="app">
<app-root></app-root>
</div>6. src/main.ts
ts
import "./AppRoot";
// Importing the module registers <app-root> and its nested components.7. Run the App
bash
pnpm vite --host 0.0.0.0This pattern keeps the app rooted in a single Web Component. Nested custom elements like <my-counter>are rendered inside<app-root>just like they
would be in a larger app.
Common Mistakes
- Use
jsx: "preserve". The Dathra plugin needs to see the JSX before TypeScript lowers it. - Import component modules for their registration side effects before using their custom element tags in HTML.
- Use
class, notclassName, in Dathra JSX.