Gallery: Real-World Examples
Live interactive demos showing tina4js in real-world scenarios. Each demo is one self-contained HTML file, so there's no build step. Click "Open full demo" to run it in a new tab.
📊 Admin Dashboard
Live stats with reactive counters, computed KPIs, polling effects, and a notification feed.
signal computed effect component
👥 Contact Manager
Full CRUD: create, edit, delete contacts with search filtering and form validation.
signal api html routing
💬 Live Chat
WebSocket-powered chat with signal-driven message list, auto-scroll, and reconnect status.
websocket signal component
🔐 Auth Flow
Login / logout with JWT token storage, route guards, protected pages, and 401 redirect.
api routing signal
🛒 Shopping Cart
Product listing, add-to-cart, quantity controls, computed totals, and checkout summary.
signal computed batch
📝 Dynamic Form Builder
Add/remove fields at runtime, reactive validation, conditional sections, and live preview.
signal html effect
📱 PWA Notes
Offline-capable notes app with service worker, localStorage persistence, and install prompt.
pwa signal component
📋 Data Table
Sortable, paginated data table with column filters, row selection, and CSV export.
signal computed html
🔍 Live Search
Debounced search with API calls, loading states, highlight matching, and keyboard navigation.
signal api effect
💾 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.
signal persist storage
🌍 Localization (i18n)
Switch between six languages and watch every translated string plus Intl number, currency, and date formatting update in place. Arabic flips the layout to right-to-left. The active locale is a signal.
i18n signal intl rtl
📡 Live Streaming (SSE)
Server-Sent Events and NDJSON streaming wired to signals: an AI-style token stream and a live server-event feed, each piped into state behind a reactive status badge.
sse signal pipe
🏝️ Islands (Web Components)
A static, server-rendered product page with three self-hydrating Tina4Element islands - star rating, add-to-cart, and a live viewer count - each shadow-DOM encapsulated with its own scoped styles.
component shadow-dom signal
🔗 GraphQL Client
Typed queries and mutations through api.graphql(): search with variables, restock with a mutation, and a live wire console showing the exact request and response.
graphql api signal
📤 File Upload
Drag-and-drop or browse, a real FileReader preview, and multipart api.upload() with a live per-file progress bar.
api upload signal
Using the Examples as Starting Points
Each demo is a single self-contained HTML file. Copy any one and start editing:
# View the source of any live demo
curl https://tina4.com/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>