or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

client-api.mdconfiguration.mddom-events.mdindex.mdplugin-development.md
tile.json

tessl/npm-livereload-js

LiveReload JavaScript client that enables automatic browser refreshing and live CSS reloading during development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/livereload-js@4.0.x

To install, run

npx @tessl/cli install tessl/npm-livereload-js@4.0.0

index.mddocs/

LiveReload.js

LiveReload.js is a JavaScript client library that implements the LiveReload protocol for browser-based development tools. It enables automatic browser refreshing and live CSS reloading without page refresh when files are modified during development. The library connects to LiveReload servers via WebSocket connections and provides intelligent reloading strategies for different file types.

Package Information

  • Package Name: livereload-js
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install livereload-js

Core Imports

For browser usage (typical):

<script src="http://localhost:35729/livereload.js"></script>

For Browserify usage:

window.LiveReloadOptions = { host: 'localhost' };
require('livereload-js');

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <title>Development Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello LiveReload</h1>
    
    <!-- LiveReload script - automatically connects to server -->
    <script src="http://localhost:35729/livereload.js"></script>
    
    <!-- Alternative: dynamic host detection -->
    <script>
        document.write('<script src="http://'
            + (location.host || 'localhost').split(':')[0]
            + ':35729/livereload.js?snipver=1"></'
            + 'script>');
    </script>
</body>
</html>

Architecture

LiveReload.js is built around several key components:

  • LiveReload Client: Main client class that coordinates all operations and exposes the public API
  • WebSocket Connector: Manages connection, reconnection, and protocol communication with LiveReload servers
  • File Reloaders: Specialized handlers for different file types (CSS, images, JavaScript)
  • Plugin System: Extensible architecture for handling custom file types and processing
  • Event System: DOM events and callbacks for integration with other tools
  • Options Management: Configuration system supporting both global options and URL parameters

Capabilities

Client API

Core LiveReload client functionality including connection management, event handling, and plugin registration.

// Global LiveReload instance
const LiveReload = window.LiveReload;

// Event handling
LiveReload.on(eventName, handler);
LiveReload.shutDown();

// Plugin management  
LiveReload.addPlugin(PluginClass);
LiveReload.hasPlugin(identifier);

// Analysis and logging
LiveReload.analyze();
LiveReload.log(message);

Client API

Configuration Options

Configuration system for customizing LiveReload behavior, connection settings, and reloading strategies.

// Global configuration object
window.LiveReloadOptions = {
  host: string,
  port: number | string,
  https: boolean,
  mindelay: number,
  maxdelay: number,
  pluginOrder: string[]
};

Configuration

DOM Events

DOM event system for communicating with LiveReload and integrating with other development tools.

// Listen for connection events
document.addEventListener('LiveReloadConnect', handler);
document.addEventListener('LiveReloadDisconnect', handler);

// Trigger shutdown
const event = document.createEvent('HTMLEvents');
event.initEvent('LiveReloadShutDown', true, true); 
document.dispatchEvent(event);

DOM Events

Plugin Development

Plugin system for extending LiveReload to handle custom file types and processing workflows.

class CustomPlugin {
  static identifier = 'custom';
  static version = '1.0';
  
  constructor(window, host) {}
  reload(path, options) {}
  analyze() {}
}

Plugin Development

Types

interface LiveReloadOptions {
  host?: string;
  port?: number | string;
  https?: boolean;
  path?: string;
  mindelay?: number;
  maxdelay?: number;
  handshake_timeout?: number;
  isChromeExtension?: boolean;
  reloadMissingCSS?: boolean;
  pluginOrder?: string[];
  ext?: string;
  extver?: string;
  snipver?: string;
}

interface ReloadOptions {
  liveCSS?: boolean;
  liveImg?: boolean;
  reloadMissingCSS?: boolean;
  originalPath?: string;
  overrideURL?: string;
  serverURL?: string;
  pluginOrder?: string[];
  isChromeExtension?: boolean;
}

interface PluginHost {
  console: {
    log(message: string): void;
    error(message: string): void;
  };
  Timer: typeof Timer;
  generateCacheBustUrl(url: string): string;
  _livereload: LiveReload;
  _reloader: any;
  _connector: any;
}