{"id":23749426,"url":"https://github.com/data-forge/capture-template","last_synced_at":"2026-03-11T02:30:18.911Z","repository":{"id":32830840,"uuid":"143597530","full_name":"data-forge/capture-template","owner":"data-forge","description":"This library is responsible for expanding a 'data set' to an in memory web page through a user-defined template and capturing the result to a PNG or PDF. This implements Data-Forge Plot's ability to capture static visualizations.","archived":false,"fork":false,"pushed_at":"2023-01-12T09:28:03.000Z","size":679,"stargazers_count":1,"open_issues_count":12,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T08:21:00.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/data-forge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"ashleydavis"}},"created_at":"2018-08-05T08:53:01.000Z","updated_at":"2021-10-02T00:49:44.000Z","dependencies_parsed_at":"2023-01-14T22:22:13.921Z","dependency_job_id":null,"html_url":"https://github.com/data-forge/capture-template","commit_stats":null,"previous_names":["data-forge/capture"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fcapture-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fcapture-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fcapture-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fcapture-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/data-forge","download_url":"https://codeload.github.com/data-forge/capture-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239909024,"owners_count":19716897,"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-12-31T15:18:50.551Z","updated_at":"2025-02-20T20:26:19.221Z","avatar_url":"https://github.com/data-forge.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ashleydavis"],"categories":[],"sub_categories":[],"readme":"# capture-template\n\nThis library is responsible for expanding a template web page and then capturing it to an image or PDF file.\n\nIt provides the 'capture' functionality for [Data-Forge Plot](https://www.npmjs.com/package/data-forge-plot) and\n[Data-Forge Notebook](http://www.data-forge-notebook.com/).\n\n[Click here to support my work](https://www.codecapers.com.au/about#support-my-work)\n\n## Premise\n\nA template web page is any number of web assets (JS files, HTML files, CSS files etc) in a directory. Each asset is a Handlebars template that can be expanded by data.\n\nA template is expanded in memory and exposed via a web server.\n\nThe Nightmare headless browser is then instantiated and used to load the expaneded web page and capture it to an image or PDF.\n\nThis library is used by Data-Forge Plot and Data-Forge Notebook to capture visualizations to images and PDF files.\n\n## Creating a template\n\nA template is a directory that contains template files for web assets that are inflated with data.\n\nBy convention you need an index.html to be the main web page. You can have any number of supporting assets such as JavaScript and CSS files.\n\nThis repository contains an example template under the test-template directory. Please use this to understand the basics of how a template is constructed.\n\nA template can contain a template.json configuration file and a test-data.json. Both files by convention are omitted from the expanded template.\n\ntemplate.json must contain a field 'waitSelector' that specifies the element/tag that must appear in the DOM before the image or PDF file can be captured.\n\nWhen using the 'renderImage' function a 'captureSelector' field can optionally specify the root element to be captured. If tonot specified the the 'waitSelector' field is used instead. 'captureSelector' is ignored for PDF capture, PDF capture automatically captures the entire web page.\n\n## Programmatic Usage\n\n### Installation\n\n    npm install --save capture-template\n\n### Require\n\nJavaScript:\n\n    const { captureImage, capturePDF } = require('capture-template');\n\nTypeScript:\n\n    import { captureImage, capturePDF } from 'capture-template';\n\n### Usage\n\nExpanding a web page and capturing a image:\n\n    const data = { /* ... your data to be expanded into the template ... */ }\n    const templatePath = \"\u003cpath-to-load-your-template-web-page-from\u003e\";\n    const outputPath = \"\u003cimage-file-to-write-the-capture-to\u003e\";\n    await captureImage(templatePath, data, outputPath);\n\nExpanding a web page and capturing a PDF:\n\n    const data = { /* ... your data to be expanded into the template ... */ }\n    const templatePath = \"\u003cpath-to-load-your-template-web-page-from\u003e\";\n    const outputPath = \"\u003cpdf-file-to-write-the-capture-to\u003e\";\n    await capturePDF(templatePath, data, outputPath);\n\n## Command line usage\n\nThis can also be used from the command line to test template web pages.\n\nBefore using from the command line make sure your template contains a 'test-data.json' that is used to fill out the template.\n\nTo use from the command line please install globally like this:\n\n    npm install -g capture-template\n\nYou can also omit the `-g` and just install locally, but then make sure you prefix all the subsequent commands with `npx`.\n\nTo start a server from a template:\n\n    capture-template serve --template=\u003cpath-to-your-web-page-template\u003e --port=3000\n\nNow you can navigate your browser to `localhost:3000` to see how the template renders in the browser.\n\nTo do a test capture of an image:\n\n    capture-template capture-image --template=\u003cpath-to-your-web-page-template\u003e --out=\u003couput-file-name\u003e\n\nTo do a test capture of a PDF:\n\n    capture-template capture-pdf --template=\u003cpath-to-your-web-page-template\u003e --out=\u003couput-file-name\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge%2Fcapture-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdata-forge%2Fcapture-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge%2Fcapture-template/lists"}