← Back to Examples

CRM Dashboard

Customer relationship management powered by html★ + Vanilla Breeze

CRM Dashboard Demo

A full CRM with contacts, deal pipeline, activity feed, and persistent settings — built entirely with html★ attributes and Vanilla Breeze components. Zero JavaScript framework.

Launch Demo →

What's Included

This CRM demonstrates how html★ + Vanilla Breeze can replace a React SPA for real business applications.

CRM Features

  • Tabbed Navigation — Overview, Contacts, Deals, and Settings with URL sync
  • Data Table — Live search with debouncing and filter dropdowns
  • Deal Pipeline — Kanban-style columns for deal stages
  • Activity Feed — Auto-refreshing with 30-second polling
  • Persistent Settings — Form values survive page refresh via data-persist
  • SWR Caching — Stale-while-revalidate for instant navigation
  • 32 Themes — Vanilla Breeze theme switcher works out of the box

html★ Patterns Used

Caching & Prefetch

  • data-cache="swr:5m" — Serve stale content instantly, revalidate in background
  • data-prefetch="hover" — Preload pages on hover for instant navigation

Search & Filtering

  • data-trigger="input debounce:300" — Debounced search input
  • data-trigger="change" — Filter dropdown triggers refetch
  • data-loading-class="loading-dim" — Visual loading feedback

Persistence & State

  • data-persist="crm-settings" — Form state persists across sessions
  • data-push — URL updates with browser history
  • data-confirm — Confirmation dialogs for destructive actions

Why This Matters

A CRM dashboard is one of the canonical "you need React for this" applications. This demo proves otherwise: four tabbed views, live search, filter dropdowns, modal forms, toast notifications, and persistent settings — all with zero client-side routing, zero state management, and under 40 lines of inline JavaScript.