Phoenix LiveView has one massive DX feature. Just, almost no one knows about it. If you’ve worked with Vue or React, you are used to state-preserving hot reloads. You change a component, save the… | Jakub Skałecki

Phoenix LiveView has one massive DX feature. Just, almost no one knows about it. If you’ve worked with Vue or React, you are used to state-preserving hot reloads. You change a component, save the file, and the UI instantly updates. You never lose your form data or modal state. Phoenix LiveView defaults to a hard browser reload - every time you hit save, your state is wiped. You have to click back through your modals and fill out dummy data again just to test a single CSS class. It completely slows you down. But it turns out, state-preserving hot-reload actually exists in LiveView. It’s just heavily under-documented. Here is a 3-line dev.exs configuration change to enable it: Phoenix puts your LiveView and component paths under live_reload: [ patterns: ... ]. This triggers the full page refresh. To fix it, move those paths under notify: [ live_view: ... ] instead (screenshot below). For controllers, you want to keep previous config. The result: • Instant hot-reloads • Preserved state across saves • No more clicking through menus to reset your UI I've posted this on X two years ago and is my highest-liked tweet to date. This change is also the very first thing I'm doing in every new project. Together with my library live_vue, I have a stateful hot-reload across the entire stack (server + client!) If you are building with Phoenix, try it out and comment if it's working as expected.