Gallery: Real-World Examples
Live interactive demos showing tina4js in real-world scenarios. Each example is self-contained and uses the CDN build, so no build step is required.
📊 Admin Dashboard
Live stats with reactive counters, computed KPIs, polling effects, and a notification feed.
Open full demo ↗👥 Contact Manager
Full CRUD: create, edit, delete contacts with search filtering and form validation.
Open full demo ↗💬 Live Chat
WebSocket-powered chat with signal-driven message list, auto-scroll, and reconnect status.
Open full demo ↗🔐 Auth Flow
Login / logout with JWT token storage, route guards, protected pages, and 401 redirect.
Open full demo ↗🛒 Shopping Cart
Product listing, add-to-cart, quantity controls, computed totals, and checkout summary.
Open full demo ↗📝 Dynamic Form Builder
Add/remove fields at runtime, reactive validation, conditional sections, and live preview.
Open full demo ↗📱 PWA Notes
Offline-capable notes app with service worker, localStorage persistence, and install prompt.
Open full demo ↗📋 Data Table
Sortable, paginated data table with column filters, row selection, and CSV export.
Open full demo ↗🔍 Live Search
Debounced search with API calls, loading states, highlight matching, and keyboard navigation.
Open full demo ↗💾 Persistent Prefs
Theme, language, and sidebar state survive a refresh via persist(): opt-in localStorage with credential-shape warnings, version migration, and cross-tab sync.
Using the Examples as Starting Points
Each demo is a single self-contained HTML file. Copy any one and start editing:
# View source of any demo
curl https://tina4stack.github.io/tina4-js/examples/gallery/01-dashboard.htmlOr grab the whole gallery from the repo:
git clone https://github.com/tina4stack/tina4-js.git
open tina4-js/examples/gallery/index.htmlAll examples use the CDN build so they work without a build step:
<script type="module">
import { signal, html } from 'https://cdn.jsdelivr.net/npm/tina4js@latest/dist/index.es.js';
</script>