How to elegantly update other UI when a Turbo Frame is updated

"When a request comes from a Turbo Frame, detect the Turbo-Frame header or the Accept header for 'text/vnd.turbo-stream.html' and return a turbo-stream response that emits one or more <turbo-stream> actions. Emit a replace or update for the frame's id and additional turbo-stream actions targeting menu, counter, or sidebar elements so external UI updates occur alongside the frame update. For full page navigations, render the complete HTML with the same updated fragments so behavior remains consistent."

"A small backend helper centralizes the format decision, renders the appropriate partials, and packages them either as a single HTML fragment for the frame or as multiple <turbo-stream> elements for broader DOM updates. Use stable element ids and explicit turbo-stream actions (replace, update, append, remove). This avoids writing ad-hoc JavaScript, keeps controllers and views testable, preserves progressive enhancement, and makes UI updates predictable and maintainable without client-side event wiring."

"In frameworks like Rails, use request format checks (respond_to or request.format.turbo_stream?) and turbo_stream templates or helpers to build responses. Example: turbo_stream.replace('frame-id') { render partial: 'frame' } and turbo_stream.replace('menu') { render partial: 'menu' }, returning Content-Type 'text/vnd.turbo-stream.html' so Turbo processes the streams. This pattern keeps server-side logic explicit, reduces client-side complexity, and simplifies maintenance while ensuring both frame-only and full-page flows remain consistent."

Detect whether a request originates from a Turbo Frame by inspecting headers or request format. When a frame request is detected, return turbo-stream responses that include actions to replace or update the frame plus additional turbo-stream actions targeting outside UI elements (menus, counters, sidebar highlights). For full-page loads, render the complete HTML with the same updated fragments so behavior is identical. Centralize the logic in a small backend helper that chooses format, renders partials, and emits the proper turbo-streams. Use stable element ids and explicit turbo-stream actions to avoid client-side JavaScript and preserve progressive enhancement.

Read at Rubyflow