{"id":13725460,"url":"https://github.com/GoogleChromeLabs/dom2html","last_synced_at":"2025-05-07T20:32:46.033Z","repository":{"id":38551971,"uuid":"232295054","full_name":"GoogleChromeLabs/dom2html","owner":"GoogleChromeLabs","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-18T12:59:33.000Z","size":1214,"stargazers_count":48,"open_issues_count":11,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-12T14:56:15.493Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-01-07T09:56:37.000Z","updated_at":"2024-04-27T22:21:15.000Z","dependencies_parsed_at":"2024-02-04T13:08:14.467Z","dependency_job_id":"7cd7cd5e-d4c8-447c-a76c-59785e16278e","html_url":"https://github.com/GoogleChromeLabs/dom2html","commit_stats":{"total_commits":45,"total_committers":7,"mean_commits":6.428571428571429,"dds":0.7555555555555555,"last_synced_commit":"660152d4ca8a5e0917febc217664d0bdf7435b78"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fdom2html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fdom2html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fdom2html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fdom2html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/dom2html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645392,"owners_count":17346141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:24.092Z","updated_at":"2024-11-14T15:31:26.178Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# dom2html\nSerializes a dom-like JSON tree into HTML.\nThis is helpful if you end up with a DOM-like JSON object and need to serialize it to HTML.\nAn example use case is using [puppeteer](https://pptr.dev/) to get the DOM tree from a page \nand wanting to recreate the flattened HTML including shadow roots, and by default, the contents of iframes.\n\n## Usage\n\n```javascript\nconst serialize = require('dom2html');\nconst jsonDOM = require('./dom.json');\n\nconsole.log(serialize(jsonDOM, true, 'all'));\n```\n\n## Parameters\nserialize accepts three inputs\n```javascript\nserialize(jsonDOM, includeIframes, domErrorOutput)\n```\n*jsonDom* is the nodelke JSON tree\n*includeIframes* is a boolean flag to define if you want to serialize iframe content, **optional, defaults to true**\n*domErrorOutput* is a string that defines where dom2html outputs errors if it cannot serialzie a node, 'all' outputs to console \u0026 inserts a html comment in the outputted html, 'console' only outputs to console.log(), 'comments' only outputs to html comments and silent outputs to neither. **optional, defaults to all**\n\n## An example\n\nLet's say we have this JSON representation of a webpage:\n\n```json\n{\n\t\"nodeId\": 1,\n\t\"backendNodeId\": 3,\n\t\"nodeType\": 9,\n\t\"nodeName\": \"#document\",\n\t\"localName\": \"\",\n\t\"nodeValue\": \"\",\n\t\"childNodeCount\": 2,\n\t\"children\": [{\n\t\t\"nodeId\": 2,\n\t\t\"parentId\": 1,\n\t\t\"backendNodeId\": 8,\n\t\t\"nodeType\": 10,\n\t\t\"nodeName\": \"html\",\n\t\t\"localName\": \"\",\n\t\t\"nodeValue\": \"\",\n\t\t\"publicId\": \"\",\n\t\t\"systemId\": \"\"\n\t}, {\n\t\t\"nodeId\": 3,\n\t\t\"parentId\": 1,\n\t\t\"backendNodeId\": 9,\n\t\t\"nodeType\": 1,\n\t\t\"nodeName\": \"HTML\",\n\t\t\"localName\": \"html\",\n\t\t\"nodeValue\": \"\",\n\t\t\"childNodeCount\": 2,\n\t\t\"children\": [{\n\t\t\t\"nodeId\": 4,\n\t\t\t\"parentId\": 3,\n\t\t\t\"backendNodeId\": 10,\n\t\t\t\"nodeType\": 1,\n\t\t\t\"nodeName\": \"HEAD\",\n\t\t\t\"localName\": \"head\",\n\t\t\t\"nodeValue\": \"\",\n\t\t\t\"childNodeCount\": 1,\n\t\t\t\"children\": [{\n\t\t\t\t\"nodeId\": 5,\n\t\t\t\t\"parentId\": 4,\n\t\t\t\t\"backendNodeId\": 11,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"STYLE\",\n\t\t\t\t\"localName\": \"style\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 6,\n\t\t\t\t\t\"parentId\": 5,\n\t\t\t\t\t\"backendNodeId\": 12,\n\t\t\t\t\t\"nodeType\": 3,\n\t\t\t\t\t\"nodeName\": \"#text\",\n\t\t\t\t\t\"localName\": \"\",\n\t\t\t\t\t\"nodeValue\": \"\\n      h1 { color: red; }\\n    \"\n\t\t\t\t}],\n\t\t\t\t\"attributes\": []\n\t\t\t}],\n\t\t\t\"attributes\": []\n\t\t}, {\n\t\t\t\"nodeId\": 7,\n\t\t\t\"parentId\": 3,\n\t\t\t\"backendNodeId\": 13,\n\t\t\t\"nodeType\": 1,\n\t\t\t\"nodeName\": \"BODY\",\n\t\t\t\"localName\": \"body\",\n\t\t\t\"nodeValue\": \"\",\n\t\t\t\"childNodeCount\": 5,\n\t\t\t\"children\": [{\n\t\t\t\t\"nodeId\": 8,\n\t\t\t\t\"parentId\": 7,\n\t\t\t\t\"backendNodeId\": 4,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"H1\",\n\t\t\t\t\"localName\": \"h1\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 9,\n\t\t\t\t\t\"parentId\": 8,\n\t\t\t\t\t\"backendNodeId\": 14,\n\t\t\t\t\t\"nodeType\": 3,\n\t\t\t\t\t\"nodeName\": \"#text\",\n\t\t\t\t\t\"localName\": \"\",\n\t\t\t\t\t\"nodeValue\": \"Hello World!\"\n\t\t\t\t}],\n\t\t\t\t\"attributes\": []\n\t\t\t}, {\n\t\t\t\t\"nodeId\": 10,\n\t\t\t\t\"parentId\": 7,\n\t\t\t\t\"backendNodeId\": 5,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"P\",\n\t\t\t\t\"localName\": \"p\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 11,\n\t\t\t\t\t\"parentId\": 10,\n\t\t\t\t\t\"backendNodeId\": 15,\n\t\t\t\t\t\"nodeType\": 3,\n\t\t\t\t\t\"nodeName\": \"#text\",\n\t\t\t\t\t\"localName\": \"\",\n\t\t\t\t\t\"nodeValue\": \"This is some content.\"\n\t\t\t\t}],\n\t\t\t\t\"attributes\": []\n\t\t\t}, {\n\t\t\t\t\"nodeId\": 12,\n\t\t\t\t\"parentId\": 7,\n\t\t\t\t\"backendNodeId\": 16,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"P\",\n\t\t\t\t\"localName\": \"p\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 13,\n\t\t\t\t\t\"parentId\": 12,\n\t\t\t\t\t\"backendNodeId\": 6,\n\t\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\t\"nodeName\": \"IMG\",\n\t\t\t\t\t\"localName\": \"img\",\n\t\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\t\"childNodeCount\": 0,\n\t\t\t\t\t\"children\": [],\n\t\t\t\t\t\"attributes\": [\"src\", \"http://placekitten.com/200/300\", \"alt\", \"Some image\"]\n\t\t\t\t}],\n\t\t\t\t\"attributes\": []\n\t\t\t}, {\n\t\t\t\t\"nodeId\": 14,\n\t\t\t\t\"parentId\": 7,\n\t\t\t\t\"backendNodeId\": 7,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"P\",\n\t\t\t\t\"localName\": \"p\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 15,\n\t\t\t\t\t\"parentId\": 14,\n\t\t\t\t\t\"backendNodeId\": 17,\n\t\t\t\t\t\"nodeType\": 3,\n\t\t\t\t\t\"nodeName\": \"#text\",\n\t\t\t\t\t\"localName\": \"\",\n\t\t\t\t\t\"nodeValue\": \"Data-Attributes!\"\n\t\t\t\t}],\n\t\t\t\t\"attributes\": [\"data-test\", \"works\"]\n\t\t\t}, {\n\t\t\t\t\"nodeId\": 16,\n\t\t\t\t\"parentId\": 7,\n\t\t\t\t\"backendNodeId\": 18,\n\t\t\t\t\"nodeType\": 1,\n\t\t\t\t\"nodeName\": \"SCRIPT\",\n\t\t\t\t\"localName\": \"script\",\n\t\t\t\t\"nodeValue\": \"\",\n\t\t\t\t\"childNodeCount\": 1,\n\t\t\t\t\"children\": [{\n\t\t\t\t\t\"nodeId\": 17,\n\t\t\t\t\t\"parentId\": 16,\n\t\t\t\t\t\"backendNodeId\": 19,\n\t\t\t\t\t\"nodeType\": 3,\n\t\t\t\t\t\"nodeName\": \"#text\",\n\t\t\t\t\t\"localName\": \"\",\n\t\t\t\t\t\"nodeValue\": \" window.title = 'Hello world!' \"\n\t\t\t\t}],\n\t\t\t\t\"attributes\": []\n\t\t\t}],\n\t\t\t\"attributes\": []\n\t\t}],\n\t\t\"attributes\": [\"lang\", \"en\"],\n\t\t\"frameId\": \"D46CBAE99B5CABE7F1FF6DDEE269E6A6\"\n\t}],\n\t\"documentURL\": \"http://test.local/test-simple.html\",\n\t\"baseURL\": \"http://test.local/test-simple.html\",\n\t\"xmlVersion\": \"\"\n}\n```\n\nand we want to get the HTML representation:\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cstyle\u003e\n    h1 { color: red; }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eHello World!\u003c/h1\u003e\n    \u003cp\u003eThis is some content.\u003c/p\u003e\n    \u003cp\u003e\u003cimg src=\"http://placekitten.com/200/300\" alt=\"Some image\"\u003e\u003c/p\u003e\n    \u003cp data-test=\"works\"\u003eData-Attributes!\u003c/p\u003e\n    \u003cscript\u003ewindow.title = 'Hello world!'; \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nFor this we can use the following code:\n\n```javascript\nconst serialize = require('dom2html');\nconst jsonDOM = require('./dom.json');\n\nconsole.log(serialize(jsonDOM));\n```\n\n## Prevent \u003ciframe\u003e content from being serialized\n\nIf your DOM-like tree contains iframe nodes, and you don't want to serialize the contents of these and have them included in the outputted html, add FALSE as a flag:\n```javascript\nconst serialize = require('dom2html');\nconst jsonDOM = require('./dom.json');\n\nconsole.log(serialize(jsonDOM, FALSE));\n```\n\n## Suppress errors\n\nIf you wanted to suppress any notifications of errors of unsupported node types, you could add the 'silent' value\n```javascript\nconst serialize = require('dom2html');\nconst jsonDOM = require('./dom.json');\n\nconsole.log(serialize(jsonDOM, TRUE, 'silent'));\n```\n\n## Current state\n\nThis is the first release and this thing has been built in a day, basically.\nExpect bugs, missing features, dragons...but any help is much appreciated!\n\n## Contributing\n\nContributions are super welcome!\nPlease create an issue with your idea and feel free to submit pull requests :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fdom2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGoogleChromeLabs%2Fdom2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fdom2html/lists"}