Skip to content

Stimulus — Complete Guide

In this tutorial, you'll learn about Stimulus. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Stimulus is a modest JavaScript framework that works with server-rendered HTML. It enhances static HTML with behavior through controllers, targets, and actions, making it ideal for projects using Hotwire or traditional server-side frameworks.

In This Section

  • Getting Started — Controllers, targets, actions, and basic setup
  • Lifecycle & State — Controller lifecycle callbacks and state management
  • Cross-Controller Communication — Events, outlets, and shared state
  • Real-World Patterns — Forms, modals, Infinite Scroll, and Lazy Loading

Published Topics

Stimulus Controllers Explained — Step-by-Step Beginner's Guide

Learn Stimulus controllers, targets, and actions from scratch. Master the Hotwire JavaScript framework with examples, analogies, and a runnable sandbox.

✓ Live

Stimulus Lifecycle & State Management Explained — Complete Guide

Master Stimulus controller lifecycle: initialize, connect, disconnect callbacks. Learn state management with values, classes API, and private fields.

✓ Live

Stimulus Cross-Controller Communication — Events, Outlets, and Patterns

Communicate between Stimulus controllers using custom events, outlets, event bus patterns, and shared state. Practical guide with runnable examples.

✓ Live

Stimulus Real-World Patterns — Forms, Modals, Autocomplete, and More

Production-ready Stimulus patterns: form validation, modals with focus trapping, autocomplete with debounce, infinite scroll, and Turbo integration.

✓ Live

Stimulus Controllers — Complete Guide with Examples

Master Stimulus controllers: create, register, and nest controllers, use multiple controllers per element, and structure your application for maintainability.

✓ Live

Stimulus Targets — Complete Guide with Examples

Master Stimulus targets: declare named DOM references, use singular and plural targets, change callbacks, and scope queries for clean controller code.

✓ Live

Stimulus Actions — Complete Guide with Examples

Master Stimulus actions: connect DOM events to controller methods, use event options, keyboard events, global events, and action descriptors for clean interactivity.

✓ Live

Stimulus Values — Complete Guide with Examples

Master Stimulus values: pass typed configuration from HTML to controllers, use change callbacks, and build reusable components with data-driven settings.

✓ Live

Stimulus Classes — Complete Guide with Examples

Master Stimulus CSS Classes API: map CSS classes from HTML to controllers, toggle states dynamically, and build theme-aware components.

✓ Live

Stimulus Outlets — Complete Guide with Examples

Master Stimulus outlets: reference other controllers, use outlet callbacks, scope queries, and build cross-controller communication in Stimulus applications.

✓ Live

Stimulus Lazy Loading — Turbo Integration & Dynamic Content Guide

Learn Stimulus lazy loading: dynamic controller registration, Turbo integration, stimulus-use helpers, and patterns for content that appears after page load.

✓ Live

Stimulus TypeScript — Typed Controllers & Complete Guide

Learn Stimulus with TypeScript: type controllers, targets, values, classes, outlets, and lifecycle methods for type-safe, maintainable Stimulus applications.

✓ Live

Stimulus Testing — Complete Guide with Examples

Learn Stimulus testing with Jest: controller unit tests, DOM integration tests, lifecycle simulation, and testing targets, values, actions, and outlets.

✓ Live

Stimulus Project — Build a Complete Application

Build a complete Stimulus application: task manager with CRUD operations, search, filters, pagination, and Turbo integration from scratch.

✓ Live

All 14 topics in Stimulus — Complete Guide are published.