Build reactive interfaces, one lesson at a time.
Each lesson adds one concept to a browser file. Start from zero and end with a real e-commerce interface — no Node.js, no bundler, no framework runtime required.
Foundations
Core concepts every DevinimJS developer must know. Start here and write your first component in under 5 minutes.
Hello World
Load from CDN, drop a component into HTML, and listen to its events. Running in 5 minutes.
Component Lifecycle
The six hooks every component uses — from initialState() to disconnected().
HTML Templates
The html tagged template: interpolation, auto-escaping, conditionals, lists, and unsafe().
Reactivity
Proxy-backed this.state, direct mutation, batched rendering, and requestUpdate().
Events & Actions
data-on:* directives, keyboard events, this.emit(), and this.listen().
Attributes & Data
Pass configuration from HTML with str(), num(), bool(), and json().
Outlet & Composition
Preserve PHP/static content inside reactive components with this.outlet.
Authoring
Build real components from scratch. Understand inter-component communication and performance patterns.
Building a Counter
Write dv-counter from scratch: step, min, max, state, template, and events.
Building Tabs
WAI-ARIA tabs pattern, keyboard navigation, and selected panel state management.
Building a Modal
Escape-to-close, focus trap, dv:open/dv:close events in a Light DOM dialog.
Component Communication
Parent-child event bubbling, cross-component dv:* events, external listeners.
DOM Morphing
How morph() patches the DOM, keyed lists with data-key, and focus preservation.
State Management
Shared stores, async data, forms, and routing — the application runtime primitives.
Shared Store
createStore(), subscribe(), this.useStore(), and cross-component state.
Async State
Stale-safe createAsyncState(): idle→loading→success→error lifecycle.
Form Management
createForm() with values, errors, dirty tracking, validation, and submission.
Hash Router
Serverless routing with createHashRouter(), :param segments, and subscribe().
Real-World Application
Build a mini e-commerce interface: product listings, cart, notifications, forms, and PHP integration.
Product Listing
Data table + search + pagination with async data and live sorting.
Shopping Cart
Shared cart store, add-to-cart event chain, and multi-component state flow.
Toast & Confirm
Notification queues and two-step confirmation controls for destructive actions.
Form Validation
Field components, custom validators, server-side error display, and autocomplete.
PHP Integration
Laravel, CodeIgniter, WordPress: passing data-* from backend to components.
Advanced & Ecosystem
Custom stores, production optimization, accessibility, theming, and testing.
Custom Stores
Design domain stores with createReactive(), subscription patterns, and immutable updates.
Production Optimization
Using dist/ bundles, keyed morph with data-key, and safeUrl().
Accessibility (WCAG AA)
Keyboard support, ARIA roles, loading/empty/error states, and axe-core testing.
CKCSS Theming
Design tokens, theme variables, and building a consistent visual system.
Testing Components
Unit tests with happy-dom, E2E with Playwright, and component contract verification.
Ready to start?
Phase 1 is live. Seven lessons that take you from zero to building composable reactive components — all in the browser.
Start Lesson 1 →