{"id":28473290,"url":"https://github.com/yegor-pelykh/dom-node-export","last_synced_at":"2026-05-09T10:01:57.818Z","repository":{"id":65562144,"uuid":"529573598","full_name":"yegor-pelykh/dom-node-export","owner":"yegor-pelykh","description":"Exports individual nodes from your web application or website into a separate XHTML document","archived":false,"fork":false,"pushed_at":"2022-08-27T12:07:32.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-07T12:06:48.761Z","etag":null,"topics":["computed","document","dom","element","export","fonts","html","images","node","snapshot","styles","xhtml"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yegor-pelykh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-27T12:04:30.000Z","updated_at":"2023-02-12T19:06:06.000Z","dependencies_parsed_at":"2023-01-29T17:55:11.339Z","dependency_job_id":null,"html_url":"https://github.com/yegor-pelykh/dom-node-export","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yegor-pelykh/dom-node-export","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yegor-pelykh%2Fdom-node-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yegor-pelykh%2Fdom-node-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yegor-pelykh%2Fdom-node-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yegor-pelykh%2Fdom-node-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yegor-pelykh","download_url":"https://codeload.github.com/yegor-pelykh/dom-node-export/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yegor-pelykh%2Fdom-node-export/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263063851,"owners_count":23407999,"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":["computed","document","dom","element","export","fonts","html","images","node","snapshot","styles","xhtml"],"created_at":"2025-06-07T12:06:48.763Z","updated_at":"2026-05-09T10:01:57.795Z","avatar_url":"https://github.com/yegor-pelykh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧩 dom-node-export\n\n[![npm version](https://img.shields.io/npm/v/dom-node-export.svg?style=flat-square)](https://www.npmjs.com/package/dom-node-export)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)\n\n\u003e **Export any DOM node, including styles, images, and web fonts, into a standalone XHTML document as a data URL.**\n\n---\n\n## 🚀 Overview\n\n**dom-node-export** is a modern TypeScript library that allows you to export any DOM element from your web application or site as a fully self-contained XHTML document. All styles, images, and web fonts are preserved, so the exported node looks exactly as it does on your page.\n\nUnlike popular \"Save as image\" tools that simply capture a static screenshot, **dom-node-export** gives you much more: it exports a live, interactive copy of any part of your web page. The result is not just a picture, but a real, editable mini-page that you can open in the browser, inspect, modify, make your own screenshots, or even study the code structure and styles in detail. This makes sharing, archiving, or analyzing UI fragments far more powerful and flexible.\n\nUse it to:\n\n- Save parts of a page for sharing or archiving\n- Generate printable or distributable documents from UI components\n- Create design snapshots for documentation or QA\n\n---\n\n## ✨ Features\n\n- **Full Style Preservation:** Export with computed styles (snapshot) or original CSS rules.\n- **Font Embedding:** Automatically embeds web fonts and local fonts.\n- **Image Embedding:** All images are inlined as data URLs.\n- **Customizable:** Set document title, favicon, and inject custom styles.\n- **Filtering:** Exclude or include nodes with a filter function.\n- **TypeScript-first:** Full type safety and modern ES module support.\n- **Advanced Options:** Cache busting, image placeholders and fetch customization.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install dom-node-export\n```\n\n---\n\n## 🛠️ Usage\n\n### Basic Example\n\n```typescript\nimport { exportNode } from 'dom-node-export';\n\nconst node = document.getElementById('export-me');\nconst dataUrl = await exportNode(node);\n\nconsole.log(dataUrl); // data:application/xhtml+xml;base64,...\n```\n\n### Download as File\n\n```typescript\nimport { exportNode } from 'dom-node-export';\n\nasync function downloadNodeAsFile(node: HTMLElement) {\n  const dataUrl = await exportNode(node, {\n    docTitle: 'Exported Node',\n    docFaviconUrl: '/favicon.ico',\n    styles: {\n      body: { margin: '2rem', background: '#fafafa' },\n    },\n  });\n\n  const a = document.createElement('a');\n  a.href = dataUrl;\n  a.download = 'exported-node.xhtml';\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n}\n\n// Usage\nconst node = document.querySelector('.exportable');\nif (node) downloadNodeAsFile(node as HTMLElement);\n```\n\n### Advanced: Filtering and Custom Styles\n\n```typescript\nimport { exportNode, StyleMode } from 'dom-node-export';\n\nconst node = document.querySelector('.doc');\n\nconst dataUrl = await exportNode(node, {\n  styleMode: StyleMode.Computed,\n  filter: (el) =\u003e !el.classList.contains('hidden'),\n  styles: {\n    node: { boxShadow: '0 2px 8px rgba(0,0,0,0.1)' },\n    selectors: {\n      html: {\n        fontSize: '18px',\n      },\n      body: {\n        padding: '2rem',\n        background: '#fff',\n      },\n    },\n  },\n  docTitle: 'My Exported Component',\n  docFaviconUrl: 'data:image/png;base64,...',\n});\n```\n\n---\n\n## ⚙️ API\n\n### `exportNode\u003cT extends HTMLElement\u003e(node: T, options?: ExportOptions): Promise\u003cstring\u003e`\n\nExports a DOM node as a standalone XHTML document (data URL).\n\n#### **Parameters**\n\n- `node` - The DOM element to export.\n- `options` - (Optional) Export options:\n\n| Option             | Type                             | Description                                                                             |\n| ------------------ | -------------------------------- | --------------------------------------------------------------------------------------- |\n| `styleMode`        | `StyleMode`                      | `'Computed'` (default) or `'Declared'` for style application                            |\n| `styles`           | `StyleMap`                       | Custom styles for `html`, `body`, or the exported node                                  |\n| `docTitle`         | `string`                         | Document title                                                                          |\n| `docFaviconUrl`    | `string`                         | Favicon URL or data URI                                                                 |\n| `filter`           | `(node: HTMLElement) =\u003e boolean` | Filter function to include/exclude nodes                                                |\n| `cacheBust`        | `boolean`                        | If `true`, appends a cache-busting query param to external resources (default: `false`) |\n| `imagePlaceholder` | `string`                         | Data URI or URL to use as a placeholder for failed image loads                          |\n| `fetchInit`        | `RequestInit`                    | Custom `fetch` options for loading external resources                                   |\n\n#### **Returns**\n\n- `Promise\u003cstring\u003e` - Data URL of the exported XHTML document.\n\n#### **Types**\n\n```typescript\nexport enum StyleMode {\n  Computed = 'computed',\n  Declared = 'declared',\n}\n\nexport interface ExportOptions {\n  docFaviconUrl?: string;\n  docTitle?: string;\n  styleMode?: StyleMode;\n  styles?: StyleMap;\n  filter?: (node: HTMLElement) =\u003e boolean;\n  cacheBust?: boolean;\n  includeQueryParams?: boolean;\n  imagePlaceholder?: string;\n  preferredFontFormat?: string;\n  fetchInit?: RequestInit;\n}\n\nexport interface StyleMap {\n  node?: Partial\u003cCSSStyleDeclaration\u003e;\n  selectors?: Readonly\u003cRecord\u003cstring, Partial\u003cCSSStyleDeclaration\u003e\u003e\u003e;\n}\n```\n\n---\n\n## 🧑‍💻 Best Practices\n\n- **Fonts:** For best results, use web fonts or ensure local fonts are accessible.\n- **Images:** SVG, PNG, JPEG, and GIF are supported. External images are inlined.\n- **Filtering:** Use the `filter` option to exclude hidden or irrelevant nodes.\n- **Performance:** For large DOM trees or many images/fonts, export may take longer.\n\n---\n\n## 📚 Example Use Cases\n\n- Export a chart, table, or widget for sharing in messengers or email\n- Save a styled component as a design artifact\n- Generate printable documents from dynamic UI\n- Archive UI states for QA or documentation\n\n---\n\n## 📝 License\n\nMIT © [Yegor Pelykh](mailto:yegor.dev@gmail.com)\n\n---\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/yegor-pelykh/dom-node-export)\n- [NPM Package](https://www.npmjs.com/package/dom-node-export)\n- [Report Issues](https://github.com/yegor-pelykh/dom-node-export/issues)\n\n---\n\n\u003e _Made with ❤️ and TypeScript._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyegor-pelykh%2Fdom-node-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyegor-pelykh%2Fdom-node-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyegor-pelykh%2Fdom-node-export/lists"}