Inline CSS, JavaScript, SVG, and images in the HTML.

Options See on

extensions string[]

The list of extensions this plugin applies to

[ ".html" ]
attribute string

Attribute used to select the elements this plugin applies to

copyAttributes union[]

List of extra attributes to copy if replacing the element

[ /^data-/ ]


This plugin allows you to inline some sources, like CSS, images, or JavaScript, in the HTML automatically. Any HTML tag with the inline attribute will be included in the HTML. For example:

<link rel="stylesheet" href="/css/my-styles.css" inline>

<script src="/js/my-scripts.js" inline></script>

<img src="/img/avatar.png" inline>

<img src="/img/logo.svg" inline>


The source file must be exported to the dest directory; there's no support for external URLs.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import inline from "lume/plugins/inline.ts";

const site = lume();

site.use(inline(/* Options */));

export default site;

SVG inline

Bitmap images (like .png or .jpeg) are inlined as base64 data but SVG images are replaced by the <svg> element. The new <svg> elements will keep the same class and id attributes as the replaced <img>.

For example, this image:

<img src="icon.svg" class="icon" id="icon-1" inline>

Will become:

<svg width="180px" height="180px" xmlns="" class="icon" id="icon-1">

By default, some attributes like id or class are copied from the original img to the new svg element. You can configure the plugin to copy more attributes using an array of strings or regular expressions:

  copyAttributes: ["title", /^data-/], // Copy the "title" and all data-* attributes