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.
npm install async-html-inlineAs CommonJS:
const { asyncHtmlInline } = require('async-html-inline');As ES Module:
import { asyncHtmlInline } from 'async-html-inline';(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>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.
In this repo do
npm run exampleand see the output.html in the example folder.
Happy Coding.
Copyright (c) 2023–24 Florian Walzel, MIT License