Dev server and hot module replacement in Remix

Introduction

A dev server helps you see your app changes instantly. Hot Module Replacement (HMR) updates parts of your app without a full reload, saving time and keeping your work smooth.

When you want to see your code changes immediately in the browser without manual refresh.

When you are building a Remix app and want faster feedback during development.

When you want to keep your app state while updating UI or logic.

When you want to avoid losing form inputs or scroll position after code changes.

When you want a smoother, faster development experience.

Syntax

Remix

npm run dev

This command starts the Remix development server with HMR enabled by default.

You do not need extra setup for HMR in Remix; it works out of the box.

Examples

Starts the Remix dev server with hot module replacement enabled.

Remix

npm run dev

Alternative command to start the development server if using Remix CLI directly.

Remix

remix dev

Sample Program

This simple counter component shows how HMR keeps the state (count) while updating the UI instantly when you change code.

Remix

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </main>
  );
}

// Run 'npm run dev' to start the dev server with HMR.
// Change the button text or style and save.
// The page updates instantly without losing the count value.

Important Notes

HMR only updates changed modules, so your app stays fast and responsive.

If you see the full page reload, check your Remix version or dev server setup.

Use browser DevTools console to see HMR logs and errors.

Summary

Dev server shows your app live as you code.

Hot Module Replacement updates parts of your app without full reload.

Remix enables HMR automatically for a smooth development experience.