More from Henry Kim

RSS

Autosave drafts with Stimulus + Turbo (lightweight)

10726 views

0 comments

                  <div id="draft_status" class="text-sm text-gray-500"></div>

<%= form_with model: @draft,
              url: draft_path(@draft),
              method: :patch,
              data: { controller: 'autosave', turbo_stream: true } do |f| %>
  <%= f.text_area :body, rows: 12, data: { action: 'input->autosave#queue' }, class: 'w-full rounded border p-2' %>
<% end %>

                  import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.timer = null
  }

  queue() {
    clearTimeout(this.timer)
    this.timer = setTimeout(() => this.element.requestSubmit(), 600)
  }
}

For long text entry, autosave is a huge quality-of-life improvement. I implement it with a Stimulus controller that debounces input and submits the form to a drafts endpoint in the background. The response is a turbo stream that updates a “Saved at …” indicator. This is intentionally lightweight: I don’t try to sync every keystroke or build conflict resolution. The draft record is the source of truth and can be resumed later. Turbo makes the submission easy; you still get CSRF handling and standard Rails routing. I keep autosave optional and resilient: if the request fails, it doesn’t block typing, and the UI can show “Offline” or “Not saved”. This approach gives 80% of the benefit with 20% complexity.

Henry Kim

More from Henry Kim

Autosave drafts with Stimulus + Turbo (lightweight)

0 Comments

More from Henry Kim