# Happy DOM — Fast Headless Browser Implementation for Testing

> A lightweight JavaScript DOM implementation that lets you run and test web code server-side without a full browser, optimized for speed with Vitest, Jest, and SSR frameworks.

## Install

Save as a script file and run:

# Happy DOM — Fast Headless Browser Implementation for Testing

## Quick Use
```bash
npm install happy-dom
```
```javascript
import { Window } from "happy-dom";
const window = new Window({ url: "https://localhost" });
const document = window.document;
document.body.innerHTML = "<div>Hello</div>";
console.log(document.querySelector("div").textContent); // "Hello"
```

## Introduction
Happy DOM is a JavaScript implementation of a web browser without its graphical interface. It provides a fast, standards-compliant DOM that runs in Node.js, Bun, or Deno, making it ideal for server-side rendering, testing, and any scenario where you need a DOM without launching a real browser.

## What Happy DOM Does
- Implements the DOM API (Document, Element, Event, Window) in pure JavaScript
- Supports Web Components, Custom Elements, and Shadow DOM
- Provides Fetch API, Mutation Observer, and Tree Walker implementations
- Integrates as a test environment for Vitest, Jest, and Bun test
- Enables server-side rendering for React, Vue, Angular, Svelte, and Lit

## Architecture Overview
Happy DOM implements the WHATWG DOM specification as a set of JavaScript classes that run in any JS runtime. The Window object bootstraps the environment; Document, Element, and Event classes follow the spec closely. Unlike jsdom, Happy DOM is built for performance: it avoids expensive C++ bindings and runs as pure JS, which makes it faster to start and lighter on memory.

## Self-Hosting & Configuration
- Install via npm: `npm install happy-dom`
- For Vitest: set `environment: "happy-dom"` in vitest.config.ts
- For Jest: use `testEnvironment: "@happy-dom/jest-environment"`
- For SSR: create a Window instance and render your framework into it
- Configure via the Window constructor options (url, width, height, settings)

## Key Features
- Significantly faster than jsdom for test suite execution
- Pure JavaScript with no native dependencies or compilation steps
- Declarative Shadow DOM support for modern web component testing
- Fetch API with request interception capabilities
- Active maintenance with support from Sentry and Canonical

## Comparison with Similar Tools
- **jsdom** — the established headless DOM; Happy DOM trades some API coverage for speed
- **Playwright/Puppeteer** — launch real browsers; Happy DOM runs in-process without a browser binary
- **linkedom** — minimal DOM implementation; Happy DOM provides broader API coverage
- **Miniflare (workerd)** — Workers-specific runtime; Happy DOM is a general-purpose DOM
- **Deno DOM** — Deno-native DOM bindings; Happy DOM works across Node, Bun, and Deno

## FAQ
**Q: Is Happy DOM a drop-in replacement for jsdom?**
A: For most test suites, yes. Some jsdom-specific APIs may differ, but standard DOM operations work the same way.

**Q: How much faster is it compared to jsdom?**
A: Benchmarks vary, but test suites commonly see 2-5x faster execution, especially for large component libraries.

**Q: Does it support CSS?**
A: Happy DOM parses stylesheets and supports computed styles. It does not perform visual layout or rendering.

**Q: Can I use it for web scraping?**
A: Yes. Pass HTML into the Window and query the DOM. For sites requiring JavaScript execution, a full browser tool is more appropriate.

## Sources
- https://github.com/capricorn86/happy-dom
- https://github.com/nicedoc/happydom

---
Source: https://tokrepo.com/en/workflows/asset-cca219b2
Author: Script Depot