Live Reload

Enable automatic page reloading during development with Hammer's live reload feature to see your changes instantly.

Introduction

Hammer's live reload feature automatically refreshes your browser when you save changes to your files. This eliminates the need to manually refresh your browser during development, making your workflow faster and more efficient.

Note: If you're using a modern IDE that already supports live reload (such as Cursor, VS Code with Live Server extension, or similar tools), you may not need the @reload directive. These IDEs often provide their own live reload functionality that works automatically.

Live reload helps you:

  • See changes instantly without manual refresh
  • Save time during development
  • Focus on coding instead of browser management
  • Work more efficiently with instant feedback

Basic Usage

To enable live reload, add the @reload directive anywhere in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
    <!-- @reload -->
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Once you add this directive, Hammer will automatically reload the page in your browser whenever you save changes to any file in your project.

Tip: You only need to add the reload directive once per page. It works for all file changes in your project.

How It Works

When you add the @reload directive to your HTML file:

  1. Hammer detects file changes: When you save any file in your project, Hammer's file watcher detects the change
  2. Project rebuilds: Hammer automatically rebuilds your project with the latest changes
  3. Browser refreshes: Your browser automatically reloads to show the updated content
  4. No manual refresh needed: You can focus on coding while seeing changes instantly

The reload functionality works seamlessly with all Hammer features, including includes, variables, path resolution, and asset management.

Examples

Basic Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Development Page</title>
    <!-- @reload -->
    <!-- @stylesheet style -->
</head>
<body>
    <h1>Testing Live Reload</h1>
</body>
</html>

With Includes and Variables

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- @var pageTitle = "My Site" -->
    <!-- @reload -->
    <title><!-- @pageTitle --></title>
    <!-- @stylesheet style -->
</head>
<body>
    <!-- @include _header -->
    <main>
        <h1>Content</h1>
    </main>
    <!-- @include _footer -->
</body>
</html>

Best Practices

When to Use

  • Add the reload directive during active development
  • Use it for local development and testing
  • Remove it before deploying to production (optional but recommended)
  • Keep it in development templates for convenience

Development Workflow

  • Add the directive at the start of your development session
  • Keep your browser open while coding
  • Save files frequently to see changes instantly
  • Use it with any file type - HTML, CSS, JavaScript, includes, etc.

Performance

  • Live reload only activates during development
  • It has no impact on your final built site
  • No additional files are included in production builds
  • Works efficiently even with large projects

Next Steps

Now that you understand live reload, learn about: