{"id":40822,"library":"diffable-html","title":"diffable-html","description":"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.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/rayrutjes/diffable-html","tags":["javascript","html","formatter","diff","diffable","jest","snapshot","serializer","snapshotSerializer"],"install":[{"cmd":"npm install diffable-html","lang":"bash","label":"npm"},{"cmd":"yarn add diffable-html","lang":"bash","label":"yarn"},{"cmd":"pnpm add diffable-html","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only since v6.0.0; default export only.","wrong":"const toDiffableHtml = require('diffable-html')","symbol":"toDiffableHtml","correct":"import toDiffableHtml from 'diffable-html'"},{"note":"No named export; only default export.","wrong":"import { formatHtml } from 'diffable-html'","symbol":"default export","correct":"import formatHtml from 'diffable-html'"},{"note":"Dynamic import is required for CJS projects; sync require fails.","wrong":"const toDiffableHtml = require('diffable-html')","symbol":"CommonJS require","correct":"const toDiffableHtml = await import('diffable-html')"}],"quickstart":{"code":"import toDiffableHtml from 'diffable-html';\n\nconst html = `<div id=\"header\">\n  <h1>Hello World!</h1>\n  <ul id=\"main-list\" class=\"list\"><li><a href=\"#\">My HTML</a></li></ul>\n</div>`;\n\nconsole.log(toDiffableHtml(html));\n// Output:\n// <div id=\"header\">\n//   <h1>\n//     Hello World!\n//   </h1>\n//   <ul\n//     id=\"main-list\"\n//     class=\"list\"\n//   >\n//     <li>\n//       <a href=\"#\">\n//         My HTML\n//       </a>\n//     </li>\n//   </ul>\n// </div>","lang":"javascript","description":"Formats an HTML string into a diffable format with indentation and line breaks."},"warnings":[{"fix":"Do not rely on this for visual rendering; use for diff readability only.","message":"diffable-html normalizes whitespace; white-space handling differs from browsers - not suitable for preserving inline whitespace.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use dynamic import() or update project to ESM.","message":"Since v6.0.0, the package is ESM-only; CommonJS require() will fail.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Pin to major version or use alternative if custom formatting needed.","message":"Default formatting rules may change in major versions; no configuration options available.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use &nbsp; or preformat if preserving spaces is required.","message":"Text nodes are trimmed; multiple spaces become single spaces.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'2':34 '6.0.1':18 'align':36 'attribut':37 'beautifi':53 'bracket':68 'break':26 'chang':28 'clearer':76 'close':67 'compon':85 'content':57 'current':20 'default':27 'diff':12,75,89 'diffabl':2,90 'diffable-html':1 'ensur':55 'especi':13 'everi':31,39 'formatt':6,88 'html':3,5,9,87 'indent':30 'infrequ':22 'inner':56 'javascript':86 'jest':80,91 'js':52 'js-beautifi':51 'level':32 'line':45,65,73 'major':23 'make':74 'node':49 'normal':8 'opening/closing':40 'opinion':4 'place':38 'primarili':77 'readabl':11 'releas':24 'serial':93 'snapshot':15,81,92 'snapshotseri':94 'space':35 'tag':41,60 'test':16,82 'text':48 'trim':47 'unlik':50 'use':78 'version':17 'vue.js':84","created_at":"2026-06-04T18:49:26.049706+00:00","updated_at":"2026-06-04T18:49:26.049706+00:00","problems":[{"fix":"Add \"type\": \"module\" to package.json or use dynamic import.","cause":"Using ES import in a CommonJS project without transpilation.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Use import toDiffableHtml from 'diffable-html' (default import).","cause":"Using named import or incorrect require in ESM context.","error":"Error: Module \"diffable-html\" does not provide a default export"},{"fix":"Use const { default: toDiffableHtml } = require('diffable-html') or dynamic import.","cause":"Requiring the module with require() after v6 which returns a module namespace object.","error":"TypeError: toDiffableHtml is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/rayrutjes/diffable-html#readme","github":"https://github.com/rayrutjes/diffable-html","docs":null,"changelog":null,"pypi":null,"npm":"diffable-html","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}