​

SSR

Domphy uses the same element definition for CSR and SSR — no duplicate templates.

Client Render

new ElementNode(App).render(document.body)

Call render() once at the app root for client-side rendering.

Server-Side Rendering

SSR
<div class="blocks">
<div class="block active" data-tab="0">
import { ElementNode } from "@domphy/core"
import { themeCSS } from "@domphy/theme"
import App from "./app.js"

const node = new ElementNode(App)

const page = `<!DOCTYPE html>
<html>
  <head>
    <style id="domphy-style">${themeCSS()}${node.generateCSS()}</style>
  </head>
  <body>
    <div id="app">${node.generateHTML()}</div>
    
  </body>
</html>`
</div>
<div class="block" data-tab="1">
import { ElementNode } from "@domphy/core"
import App from "./app.js"

const domStyle = document.getElementById("domphy-style") as HTMLStyleElement

new ElementNode(App).mount(document.getElementById("app")!, domStyle)
</div>
</div>

For SSR, render CSS into <style id="domphy-style"> on the server and pass that same style element to mount() on the client.

mount() binds to existing DOM — attaches reactivity and events without re-rendering.