Getting started with v0.4.0

vanilla-ssr v0.4.0 adds lazy/conditional hydration helpers and a global configuration API. Render HTML on the server, hydrate interactions in the browser, and build admin dashboards 90% faster with minimal custom CSS.

Installation

Terminal
npm install vanilla-ssr@0.4.0

Quick Start

vanilla-ssr works in two phases: server-side rendering (SSR) and client-side hydration. Start by rendering markup on your server, then hydrate it in the browser.

Step 1: Server-Side Rendering

Use the markup helpers to generate HTML on your server. These work with any backend—Node.js, .NET, PHP, Go, or Python.

Server
import { renderModalMarkup } from 'vanilla-ssr';

const html = renderModalMarkup({
  title: 'Welcome',
  message: 'SSR-first UI components',
  primaryButtonText: 'Confirm'
});

Step 2: Client-Side Hydration

Once the HTML is in the DOM, hydrate it to add interactivity. This enables form validation, change handlers, and other dynamic features.

Client
import { hydrateModal } from 'vanilla-ssr';

const element = document.querySelector('[data-component="modal"]');
hydrateModal(element);

Step 3: Add Styles

Include the CSS file in your HTML head. The styles are designed to work with any design system and include built-in dark mode support.

HTML
<link rel="stylesheet" href="https://unpkg.com/vanilla-ssr@0.4.0/dist/vanilla-ssr.css">

What's New in v0.4.0

Added lazy/conditional hydration (hydrateOnInteraction, hydrateOnIdle) and a global configure()/getConfig() API. See the v0.4.0 changelog for details.

Step 4: Theme System

Built-in light/dark mode with 18+ customizable CSS variables. Apply themes globally or to specific elements with zero setup.

CSS
:root {
  --bg-primary: #ffffff;
  --text-primary: #1e293b;
  --accent: #6366f1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --text-primary: #f8fafc;
    --accent: #8b5cf6;
  }
}

Step 5: Utility Components

Badges, chips, status dots, and table helpers. Eliminate 400+ lines of custom CSS for common UI patterns.

JavaScript
import { renderBadge, renderChip, renderStatusDot } from 'vanilla-ssr';

// Badges
const badge = renderBadge({ label: 'Active', variant: 'success' });

// Chips
const chip = renderChip({ label: 'JavaScript', removable: true });

// Status dots
const status = renderStatusDot({ status: 'online', pulse: true });

Next Steps