Inline create form that prepends into a list with Turbo Streams

8105
0

My favorite Hotwire demo is the classic “inline create” on an index page. The form sits at the top of the page. When submitted, the create action returns turbo streams that (1) prepend the new item into the list and (2) replace the form with a fresh, empty form. On validation errors, it replaces the form with the error state. This gives a smooth workflow without JS state management. The server is still responsible for validation, formatting, and authorization. The only frontend requirement is stable targets: an element with id='items' and an element with id='item_form'. This pattern is incredibly productive for CRUD apps, especially internal tools.