async-html-inline
Asynchronously inline javascript, stylesheets, and images to an html page.
Can inline resources served from local environment and from external URLs. Uses streams for efficient data handling, supports typescript.
Install
npm install async-html-inlineImport
As CommonJS:
const { asyncHtmlInline } = require('async-html-inline');As ES Module:
import { asyncHtmlInline } from 'async-html-inline';Usage
(async function() {
await asyncHtmlInline('input.html', 'output.html');
})();The input.html like this
<html>
<head>
<title>Example inlined</title>
<link rel="stylesheet" href="styles.css" />
<script src="hello.js"></script>
<body>
<img src="https://avatars.githubusercontent.com/u/2675925?v=4">
</body>
</html>renders to the output.html
<html>
<head>
<title>Example inlined</title>
<style>.red {
color: red;
}</style>
<script>console.log('hello world');</script>
<body>
<img src="data:image/jpeg;base64,/9j/2wCEAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBk.../UUAf/2Q==" />
</body>
</html>Exclusions
You can ignore specific resources from being inlined by passing a third argument. Use an array with resources to be excluded as it’s elements.
const ignore = ['stylesheets', 'scripts'];
await asyncHtmlInline('input.html', 'output.html', ignore);The elements of the ignore array can be stylesheets, scripts, images.
Example
In this repo do
npm run exampleand see the output.html in the example folder.
Happy Coding.
License
Copyright (c) 2023–24 Florian Walzel, MIT License