Build a reusable Stimulus controller that catches Turbo Frame failures and shows elegant error states with retry - inspired by React's Error Boundaries.
Synchronize browser history with Turbo Stream responses using a custom push_state action, a Stimulus controller, and the popstate event.
Build dependent dropdown menus that update dynamically using Turbo Frames and a small Stimulus controller.
Add loading feedback to form submissions inside Turbo Frames using busy attributes and data-turbo-submits-with.
Display a loading spinner while a Turbo Frame is `busy` fetching content asynchronously
Use "preflight" requests to validate a form before submitting it
Create list animations using Turbo Streams and the View Transitions API
Create an autoplaying swiper using view transitions and Turbo Frames
Harness the power of Stimulus and Turbo Frames to drive a simple but powerful faceted search solution
Use the View Transitions API to drive powerful native-like animations
Store ephemeral user state like video playback progress in localStorage
Typeahead previews of markdown by simple Turbo Frame rerendering
Create client-side previews of files using URL.createObjectURL
Intercept form submission responses to render flash messages that are outside the originating Turbo Frame
Render deterministic optimistic UI elements using client-side ULIDs
Use Stimulus value callbacks to interact with a wavesurfer element and remove markers.
Use Stimulus value callbacks to interact with a wavesurfer element and add markers.
Smartly use image lazy loading to improve core web vitals such as LCP and CLS
Use an IntersectionObserver to trigger a Picture in Picture overlay
Handle modal dialogs with Turbo Frames and minimal additional JavaScript
Use Stimulus target callbacks to dynamically update parts of your UI
Improve Largest Contentful Paint using image blurhashes and Stimulus
Create a "scrolling lyrics" animation using Turbo Frames and View Transitions
Provide Optimistic UI updates using inline Turbo Stream Actions, and reconcile using Turbo 8 Morphs
Update combobox options using Websockets and Stimulus outlets
Conditionally opt out of Turbo Drive InstantClick using the Strategy pattern
Store ephemeral state changes locally using localStorage and custom Turbo Stream Actions.
Use declaratively specified action parameters in the DOM to move elements between parents.
Signal data changes across controller boundaries using the Stimulus Outlets API.
Use a MutationObserver to sort websocket messages that arrived out of order.
Manage inter-browser communication using Stimulus and the Broadcast Channel API 📡.
Update filter results using eager loading Turbo Frames.
Use Stimulus' built in KeyboardEvent functionality to handle basic hotkeys.
Managing a video playlist using custom Turbo Stream Actions.
Manage view state with Turbo Frames and Stimulus.
Preserve and restore scroll position from sessionStorage.
Reactively update a chart.js graph using Stimulus values.
Use custom Turbo Stream actions to orchestrate complex UI animations.
Provide optimistic UI updates using inline Turbo Stream tags.
Update the progress bar according to some background process' progress.
Use the Turbo Frame lifecycle to manage fetch requests and the browser history.
Provide user feedback for slow running form submits.
Tweak Turbo Drive's cache lifecycle to improve user experience when navigating.
Spice up Turbo Drive transitions using rendering interception.
