Kite Toolkit Banner

Interactive Examples Gallery

Explore cleanly organized examples demonstrating Kite reactivity, declarative components, universal styling, and backend integrations.

🔰 1. Core & Basics (examples/basics/)

⚡ Counter
Zero-build, proxy-driven single-state counter in 15 lines of pure HTML.
kite-scope • kite-on-click
✅ Todo App
Interactive task list with filters, dynamic array mutations, and counters.
kite-for • Array Proxies
🧮 Calculator
Safe arithmetic calculator with numeric buttons, operators, and display.
Expressions • State
🛡️ Form Validation
Live two-way model bindings, regex validation, and dynamic error feedback.
kite-model • Validation
🚀 Full Mini-App
Multi-tab navigation, nested objects, conditional views, and event dispatch.
Tabs • Nested State
👥 Full CRUD App
Complete Create, Read, Update, Delete with modal dialog, search filtering, and reactive state.
Full CRUD • Modal

🏛️ 2. Architecture & Reusability (examples/architecture/)

🧩 Declarative Components
Reusable templates with props, isolated scopes, and slot projection.
<kite-component> • <slot>
🧭 Declarative Routing
Zero-JS hash routing with parameterized views and active outlets.
<kite-route> • <kite-outlet>
🏛️ Complete MVCR Mini-App
Self-contained 4-layer MVCR component carrying markup, state, actions, and routing.
Level 3 MVCR Bundle
📦 Reusable Form Field
Validated input component with labeling, hints, and error states.
Level 1 Component
📊 Reusable Data Table
Dynamic data table encapsulated with live search filtering and columns.
Level 2 Component

🎨 3. Universal Styling (examples/styling/)

🌊 Tailwind CSS
Tailwind utility classes working seamlessly with Kite reactivity.
Utility Classes
🅱️ Bootstrap 5
Bootstrap cards, buttons, badges, and alerts with zero conflicts.
Bootstrap 5
🍦 Pure Vanilla CSS
CSS custom properties, kite-class:*, and kite-style:* bindings.
Dynamic Classes
🎭 Mixed & Shadow DOM
Global stylesheet interop alongside encapsulated Shadow DOM elements.
kite-shadow • Interop

🔌 4. APIs & Extensibility (examples/advanced/)

🌐 Remote API Fetch
Declarative REST API client with async request state handling.
<kite-api> • <kite-model>
🎨 Design System Plugin
Modular plugins packaging helpers and custom ripple directives.
Kite.plugin • Helpers
🔌 Custom Directives
Extending Kite with custom DOM manipulation directives.
Kite.directive

🔴 5. Laravel Ecosystem (examples/laravel/)

🛡️ Laravel CSRF
Blade CSRF token pass-through with Kite API clients.
Blade • CSRF
🔐 Sanctum SPA Auth
Session cookies with credentials="include" in Blade templates.
Sanctum • Auth
⚡ Livewire Coexistence
Server-driven Livewire components alongside client-side Kite state.
Livewire • Coexistence
💬 Session Flash
Dismissible client notifications initialized from Laravel sessions.
Sessions • Flash