Package Compatibility Demos

These pages keep meaningful HTML in SSR output for SEO/GEO, then apply package enhancements on the client without hydration.

progressive

trigger: visible

Swiper

SSR cards become a carousel on visibility.

idle -> active, swiper/js/css/cleanup all become ok/ready.

Open demo

progressive

trigger: visible

Chart.js

SSR table remains visible if chart JS fails.

SSR table always visible, enhancement status reaches ready.

Open demo

progressive

trigger: visible

ECharts

SSR summary list is visible first, then ECharts enhances canvas.

status reaches ready and chart renders on client.

Open demo

progressive

trigger: idle

Animation (GSAP)

SSR cards stay readable while GSAP adds motion.

idle trigger runs and cards animate without SSR replacement.

Open demo

progressive

trigger: idle

Animation (Anime.js)

SSR-first cards with lightweight anime.js enhancement.

idle trigger runs and cards animate client-side only.

Open demo

progressive

trigger: visible

Video Player

Native video is SSR fallback, package may enhance controls.

native video SSR exists and enhancement status reaches ready.

Open demo

ssr

trigger: idle

Markdown

Article content is fully SSR, enhancement is optional.

SSR article/code visible before JS, status reaches ready.

Open demo

progressive

trigger: visible

Code Highlight

SSR code block is visible first, then highlight.js styles tokens.

SSR code stays readable and enhancement status reaches ready.

Open demo

ssr

trigger: n/a

Utility (date-fns)

SSR-safe named imports with date formatting.

server-rendered formatted date appears in HTML.

Open demo

ssr

trigger: n/a

Utility (lodash-es)

SSR-safe data shaping with lodash-es.

SSR list content renders from lodash transforms.

Open demo

progressive

trigger: visible

CSS Package

Package CSS is loaded only where needed.

Status reaches ready and CSS is applied only on this page.

Open demo

clientOnly

trigger: visible

Client-Only Map Widget

Server renders a textual fallback while browser widget initializes later.

fallback is SSR-visible and client widget status reaches ready.

Open demo

diagnostics

trigger: interaction

Missing Package

Friendly runtime error without breaking SSR content.

Click to trigger; shows friendly error instead of silent pending.

Open demo

trigger

trigger: immediate

Immediate Trigger

Runs right after DOM scan without user input.

Status changes to ready automatically as soon as runtime starts.

Open demo

trigger

trigger: page-load

Page-Load Trigger

Runs after the full window load event.

Status changes to ready after page load even when scan already happened.

Open demo

trigger

trigger: manual

Manual Trigger

Runs only when useClientEnhancement().activate() is called.

Stays idle until button click, then becomes ready.

Open demo

User-Friendly Usage Examples

Prefer <ClientEnhance /> over raw data attributes. It keeps resumability behavior but gives a cleaner API for app developers.

Progressive content (visible trigger)

<ClientEnhance
  name="swiper-carousel"
  trigger="visible"
  demo="swiper"
  :options="{ navigation: true, pagination: true, navigationIcons: 'empty-only' }"
>
  <!-- SSR HTML content stays visible first -->
</ClientEnhance>

Run on first interaction

<ClientEnhance name="missing-package-demo" trigger="interaction" demo="missing-package">
  <!-- Click/pointer/focus starts enhancement -->
</ClientEnhance>

Run when browser is idle

<ClientEnhance name="animation-demo" trigger="idle" demo="animation">
  <!-- Useful for non-critical polish -->
</ClientEnhance>

Run immediately after scan

<ClientEnhance name="immediate-demo" trigger="immediate" demo="immediate">
  <!-- Runs right after runtime scan -->
</ClientEnhance>

Run after full page load

<ClientEnhance name="page-load-demo" trigger="page-load" demo="page-load">
  <!-- Runs after window load event -->
</ClientEnhance>

Manual trigger from code

const controller = await useClientEnhancement("manual-demo", {
  target: "#manual-enhancement-target",
  trigger: "manual"
});
await controller.activate();

SSR-safe static package import

import { format } from "date-fns";
const publishedAt = format(new Date("2026-05-26"), "PPP");

Dynamic module import in enhancement

const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
  useClientPackage("swiper"),
  useClientPackage("swiper/modules", { preferDefault: false })
]);