This example demonstrates how to use uhtml-isomorphic with DOMStack for isomorphic component rendering.

uhtml-isomorphic is a lightweight library that provides the same API for both server and client rendering, making it easy to build components that work in both environments. This approach offers several benefits:

• Write components once, use them everywhere
• Server-side rendering for fast initial page loads
• Client-side hydration for interactivity
• No JSX compilation required
• Efficient DOM updates

• Node.js 22.x or higher

# Install dependencies
npm install

# Build the site
npm run build

# Watch for changes during development
npm run watch

The built site will be in the public directory.

src/
├── isomorphic/           # Isomorphic component example
│   ├── client.js         # Client-side hydration code
│   └── page.js           # Server-side rendering code
├── html-mount/           # HTML mount example
│   ├── client.js         # Client mounting code
│   └── page.html         # Static HTML template
├── layouts/              # Layout templates
│   └── root.layout.js    # Root layout using uhtml-isomorphic
└── README.md             # Main content (becomes index.html)

The isomorphic example shows how to:

• Create components that render the same way on server and client
• Share code between environments
• Add client-side interactivity via hydration

The HTML mount example demonstrates:

• Starting with static HTML content
• Using uhtml-isomorphic to enhance it with dynamic client-side features
• Mounting components to specific DOM elements

The root layout shows how to:

• Build a complete HTML document structure
• Insert dynamic content
• Handle scripts and styles

uhtml-isomorphic uses tagged template literals to define components:

import { html, render } from 'uhtml-isomorphic'

// Create a component
const myComponent = (name) => html`
  <div class="greeting">
    <h1>Hello, ${name}!</h1>
    <p>Welcome to uhtml-isomorphic</p>
  </div>
`

// Server-side rendering
const output = render(String, myComponent('World'))

// Client-side rendering
const container = document.querySelector('.app')
render(container, myComponent('World'))

• uhtml-isomorphic Documentation
• DOMStack Documentation

Check out these other DOMStack examples:

• basic - Core features demonstration
• string-layouts - Simple template string layouts