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>