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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Happy DOM

Name: tessl/npm-happy-dom
Author: tessl

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 };

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/happy-dom@18.0.x
Publish Source: CLI
Badge