Skip to content
Back to Stack Recommender

Stimulus

Stimulus — modest JavaScript framework for HTML you already have.

FrontendSimple

Stack Components

FrameworkStimulus 3.x

Why

Progressive enhancement, controllers attached via data attributes, no virtual DOM. JavaScript is used by 62% of developers per the Stack Overflow 2024 survey, and React holds 40% framework market share (State of JS 2024).

Vite replaced Webpack as the default bundler, cutting dev server startup from 30s to <1s.

When

Use for server-rendered apps needing light interactivity. Avoid for SPA architectures.

How

1. npm install @hotwired/stimulus 2. Define controller class 3. Connect via data-controller 4. Use targets and values

Example

export default class extends Controller { static targets = ["output"] greet() { this.outputTarget.textContent = "Hello" } }

Common Problems

  • ⚠Controller not connecting — check data-controller naming (kebab-case)
  • ⚠Target not found — ensure data-*Target attribute matches
  • ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical

Best Practices

  • ✓Use Stimulus controllers for DOM-bound behavior only
  • ✓Keep controllers small and composable
  • ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit

FAQ

What is Stimulus and what projects is it for?

Stimulus — modest JavaScript framework for HTML you already have. It pairs layered technologies for end-to-end type safety and out-of-the-box deploys, fitting everything from MVPs to production SaaS.

How do I spin up a working demo with Stimulus in 10 minutes?

Two steps: (1) npm install @hotwired/stimulus; (2) Define controller class. Get the local dev server running, then wire one real data source to verify the end-to-end loop.

What is the most common pitfall with Stimulus and how do I avoid it?

The most common pitfall is: Controller not connecting — check data-controller naming (kebab-case). Avoid it by adding the matching checklist to your PR template and running type-check + lint + unit tests in CI — three gates before merge.

What are the best practices for Stimulus?

Best practices for Stimulus include: Use Stimulus controllers for DOM-bound behavior only; Keep controllers small and composable; Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit. The first one — "Use Stimulus controllers for DOM-bound behavior only" — should be set up at project init to avoid costly rework later.

When should I NOT choose Stimulus?

Pick something else in three cases: (1) the team has zero experience with the core framework and the deadline is tight (learning-curve risk); (2) it's a pure content/marketing site (Astro is lighter); (3) you need very high throughput (>10k RPS) or strict-consistency microservices (Go/Rust). Stimulus shines for mid-to-high complexity full-stack and API work — don't over-engineer simple static pages with it.