Rails Hotwire Demos

This counter is implemented using Hotwire Stimulus controllers in Rails:

• stimulus_controller.js listens for clicks and updates the counter state.
• Turbostream updates the counter display instantly without page reloads.
• Accessible with live region for screen readers.

Try interacting and see real-time UI changes driven by Rails Hotwire.

The live clock uses a Stimulus controller that updates the time every second:

• JavaScript timer updates the time in HH:MM:SS format.
• Rails Turbo frames keep page lightweight with live updates.
• Accessible with aria-live for screen readers.

This list uses StimulusJS drag and drop controllers combined with Turbo Streams to update ordering:

• Drag events handle moving list items.
• Rails receives order updates via Turbo Streams and persists changes.
• Accessibility includes keyboard focus and aria-grabbed states.

The search filter uses a Stimulus controller to filter list items as you type:

• Input event filters list elements on client side.
• Can be integrated with Turbo for server-side searching if needed.
• Accessible ARIA roles and live updates.

The tabs are built using a Stimulus controller to manage tab selection:

• ARIA roles and attributes enable keyboard navigation.
• Turbo Frames can be used to dynamically load tab content.
• State managed without page reload for smooth UX.

This modal uses Stimulus controllers for toggling visibility and managing focus:

• ARIA roles ensure accessibility.
• Keyboard support for Escape key to close.
• Turbo Streams could inject modal content dynamically.

This paginated list uses Stimulus for client-side paging and can be enhanced with Turbo Streams for server-driven updates:

• Buttons update page state and re-render items.
• Accessibility: buttons disable when at first or last page.
• Easy to extend with Rails pagination gems and Turbo.

This color picker uses a Stimulus controller to update the preview box in real-time:

• Color input's value controls the background and text color for readability.
• Rails Hotwire can persist color selection server-side.
• Accessible with live updates and visible focus states.

The accordion uses ARIA attributes and smooth height transitions controlled by Stimulus.

• Button toggles aria-expanded and content visibility.
• Accessible keyboard and screen reader support.
• Can integrate Turbo Streams for dynamic content loading.

This markdown preview uses marked.js for fast client-side parsing and Stimulus to update the preview:

• Instant live preview without server roundtrips.
• Rails Hotwire can extend for server-side rendering and persistence.
• Accessible with clear label and reading order.