diffable-html

library6.0.1jsnpmunverified

Opinionated HTML formatter that normalizes HTML for readable diffs, especially in snapshot testing. Version 6.0.1 is current, with infrequent major releases for breaking default changes. It indents every level with 2 spaces, aligns attributes, places every opening/closing tag on its own line, and trims text nodes. Unlike js-beautifier, it ensures inner content of each tag is on its own line and closing brackets are on their own line, making diffs clearer. Primarily used with Jest snapshot testing for Vue.js components.

testing

npm install diffable-html

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DIFFABLE-HTML

diffable-html

testingjavascriptv6.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

toDiffableHtml

✓ import toDiffableHtml from 'diffable-html'

✗ const toDiffableHtml = require('diffable-html')

Package is ESM-only since v6.0.0; default export only.

default export

✓ import formatHtml from 'diffable-html'

✗ import { formatHtml } from 'diffable-html'

No named export; only default export.

CommonJS require

✓ const toDiffableHtml = await import('diffable-html')

✗ const toDiffableHtml = require('diffable-html')

Dynamic import is required for CJS projects; sync require fails.

Formats an HTML string into a diffable format with indentation and line breaks.

import toDiffableHtml from 'diffable-html'; const html = `<div id="header"> <h1>Hello World!</h1> <ul id="main-list" class="list"><li><a href="#">My HTML</a></li></ul> </div>`; console.log(toDiffableHtml(html)); // Output: // <div id="header"> // <h1> // Hello World! // </h1> // <ul // id="main-list" // class="list" // > // <li> // <a href="#"> // My HTML // </a> // </li> // </ul> // </div>

Debug

Known issues

gotchadiffable-html normalizes whitespace; white-space handling differs from browsers - not suitable for preserving inline whitespace.

fix

Do not rely on this for visual rendering; use for diff readability only.

affects: >=0.0.0

deprecatedSince v6.0.0, the package is ESM-only; CommonJS require() will fail.

fix

Use dynamic import() or update project to ESM.

affects: >=6.0.0

gotchaDefault formatting rules may change in major versions; no configuration options available.

fix

Pin to major version or use alternative if custom formatting needed.

affects: >=0.0.0

gotchaText nodes are trimmed; multiple spaces become single spaces.

fix

Use &nbsp; or preformat if preserving spaces is required.

affects: >=0.0.0

Errors

Common errors & fixes

SyntaxError: Cannot use import statement outside a module

Using ES import in a CommonJS project without transpilation.

fix

Add "type": "module" to package.json or use dynamic import.

Error: Module "diffable-html" does not provide a default export

Using named import or incorrect require in ESM context.

fix

Use import toDiffableHtml from 'diffable-html' (default import).

TypeError: toDiffableHtml is not a function

Requiring the module with require() after v6 which returns a module namespace object.

fix

Use const { default: toDiffableHtml } = require('diffable-html') or dynamic import.

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/rayrutjes/diffable-html ↗

packagediffable-html ↗

homepagehttps://github.com/rayrutjes/diffable-html#readme ↗