or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

browser-apis.mdbrowser-window.mdcss-styling.mdcustom-elements.mddom-core.mdevent-system.mdfetch-http.mdform-file.mdhtml-elements.mdindex.mdmedia-av.md
tile.json

tessl/npm-happy-dom

Happy DOM is a JavaScript implementation of a web browser without its graphical user interface including DOM, HTML, CSS, events, and fetch APIs

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/happy-dom@18.0.x

To install, run

npx @tessl/cli install tessl/npm-happy-dom@18.0.0

index.mddocs/

Happy DOM

Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes comprehensive DOM, HTML, CSS, event, and fetch API implementations that follow WHATWG DOM and HTML standards, making it ideal for server-side rendering, testing environments, and headless web automation.

Package Information

  • Package Name: happy-dom
  • Package Type: npm
  • Language: TypeScript
  • Installation: 
    npm install happy-dom

Core Imports

import { Window, Document, HTMLElement } from "happy-dom";

For CommonJS:

const { Window, Document, HTMLElement } = require("happy-dom");

Basic Usage

import { Window } from "happy-dom";

// Create a new window instance
const window = new Window();
const document = window.document;

// Parse HTML
document.body.innerHTML = '<div id="myDiv">Hello World</div>';

// Query and manipulate DOM
const div = document.getElementById('myDiv');
div.textContent = 'Hello Happy DOM!';

// Add event listeners
div.addEventListener('click', () => {
  console.log('Clicked!');
});

// Trigger events
div.click();

Architecture

Happy DOM is built around several key components:

  • Browser Infrastructure: 
    Browser
    , 
    BrowserWindow
    , and related classes for managing browser contexts
  • DOM Implementation: Complete DOM tree with 
    Document
    , 
    Element
    , 
    Node
    hierarchy
  • HTML Elements: Full set of HTML element implementations matching web standards
  • Event System: Comprehensive event handling with all standard event types
  • CSS Engine: CSS parsing, rule management, and style computation
  • Fetch API: HTTP request handling with 
    Request
    , 
    Response
    , 
    Headers
  • Web APIs: Storage, History, Location, Custom Elements, and other browser APIs

Capabilities

Browser & Window Management

Core browser infrastructure for creating isolated browser contexts and window instances. Essential for testing and server-side rendering.

class Browser {
  constructor(options?: { settings?: IOptionalBrowserSettings; console?: Console });
  readonly settings: IBrowserSettings;
  readonly closed: boolean;
  readonly defaultContext: BrowserContext;
  newContext(): BrowserContext;
  newIncognitoContext(): BrowserContext;
  newPage(): BrowserPage;
  close(): Promise<void>;
  waitUntilComplete(): Promise<void>;
  abort(): Promise<void>;
}

class Window extends EventTarget {
  readonly document: Document;
  readonly location: Location;
  readonly history: History;
  close(): void;
}

Browser & Window Management

DOM Core

Foundation DOM classes including documents, nodes, elements, and collections. Provides the core tree structure and manipulation methods.

class Document extends Node {
  createElement(qualifiedName: string, options?: { is?: string }): HTMLElement;
  getElementById(id: string): Element | null;
  querySelector(selector: string): Element | null;
  querySelectorAll(selector: string): NodeList;
}

class Element extends Node {
  readonly tagName: string;
  innerHTML: string;
  textContent: string;
  getAttribute(name: string): string | null;
  setAttribute(name: string, value: string): void;
}

DOM Core

HTML Elements

Complete implementation of all HTML elements with their specific properties and methods. Covers all standard HTML5 elements.

class HTMLElement extends Element {
  style: CSSStyleDeclaration;
  onclick: ((event: MouseEvent) => void) | null;
  focus(): void;
  blur(): void;
  click(): void;
}

class HTMLInputElement extends HTMLElement {
  value: string;
  type: string;
  checked: boolean;
  readonly files: FileList | null;
}

HTML Elements

Event System

Comprehensive event handling system with all standard event types, event phases, and custom event support.

class EventTarget {
  addEventListener(type: string, listener: TEventListener): void;
  removeEventListener(type: string, listener: TEventListener): void;
  dispatchEvent(event: Event): boolean;
}

class Event {
  readonly type: string;
  readonly target: EventTarget | null;
  readonly currentTarget: EventTarget | null;
  preventDefault(): void;
  stopPropagation(): void;
}

Event System

CSS & Styling

CSS parsing, rule management, and style computation. Includes support for all major CSS rule types and style declarations.

class CSSStyleDeclaration {
  getPropertyValue(property: string): string;
  setProperty(property: string, value: string): void;
  removeProperty(property: string): string;
}

class CSSStyleSheet {
  readonly cssRules: CSSRuleList;
  insertRule(rule: string, index?: number): number;
  deleteRule(index: number): void;
}

CSS & Styling

Fetch & HTTP

Complete Fetch API implementation for HTTP requests and responses, including headers, request/response bodies, and abort signals.

class Request {
  constructor(input: string | Request, init?: RequestInit);
  readonly url: string;
  readonly method: string;
  readonly headers: Headers;
  json(): Promise<any>;
  text(): Promise<string>;
}

class Response {
  constructor(body?: any, init?: ResponseInit);
  readonly status: number;
  readonly headers: Headers;
  json(): Promise<any>;
  text(): Promise<string>;
}

Fetch & HTTP

Form & File Handling

File API, Blob handling, FormData, and file input processing for handling uploads and file operations.

class File extends Blob {
  constructor(bits: any[], name: string, options?: FilePropertyBag);
  readonly name: string;
  readonly lastModified: number;
}

class FormData {
  append(name: string, value: string | Blob): void;
  get(name: string): FormDataEntryValue | null;
  getAll(name: string): FormDataEntryValue[];
}

Form & File Handling

Custom Elements & Web Components

Web Components support including Custom Element registry, Shadow DOM, and slot functionality.

class CustomElementRegistry {
  define(name: string, constructor: CustomElementConstructor): void;
  get(name: string): CustomElementConstructor | undefined;
  whenDefined(name: string): Promise<CustomElementConstructor>;
}

class ShadowRoot extends DocumentFragment {
  readonly mode: ShadowRootMode;
  readonly host: Element;
}

Custom Elements & Web Components

Browser APIs

Standard browser APIs including Storage, History, Location, Permissions, and various observer interfaces.

class Storage {
  readonly length: number;
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
  clear(): void;
}

class History {
  readonly length: number;
  back(): void;
  forward(): void;
  go(delta: number): void;
  pushState(data: any, title: string, url?: string): void;
}

Browser APIs

Media & A/V

Media stream handling, text tracks, and audio/video element support for multimedia applications.

class HTMLMediaElement extends HTMLElement {
  readonly duration: number;
  currentTime: number;
  volume: number;
  play(): Promise<void>;
  pause(): void;
  load(): void;
}

class MediaStream extends EventTarget {
  readonly id: string;
  getTracks(): MediaStreamTrack[];
  addTrack(track: MediaStreamTrack): void;
}

Media & A/V

Common Types

interface IBrowserSettings {
  disableJavaScriptFileLoading?: boolean;
  disableJavaScriptEvaluation?: boolean;
  disableCSSFileLoading?: boolean;
  enableFileSystemHttpRequests?: boolean;
  device?: {
    prefersColorScheme?: 'light' | 'dark';
    mediaType?: string;
  };
}

interface IEventInit {
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
}

type TEventListener = (event: Event) => void | { handleEvent(event: Event): void };