Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including metalsmith-clean-html with all npm packages installed. Try it out:

require("metalsmith/package.json"); // metalsmith is a peer dependency. var metalsmithCleanHtml = require("metalsmith-clean-html")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

metalsmith-clean-html v1.0.3

A Metalsmith plugin to clean HTML markup


A Metalsmith plugin to clean HTML markup

CircleCI Codecov NPM Latest Master

This plugin clean the markup of the HTML files. This is useful to make up for the various templating engines that do not always output nice, readable, code. It uses prettier under the hood.

Getting started

  1. Install this plugin (see Installing)
  2. Add it to your Metalsmith build file or configuration
  3. (optional) Use the clean property in your source files to opt-out (default is clean: true)
  4. (optional) Use the encoding property in your source files to specificy their encoding (default is encoding: utf-8)

Example source files


title: My Website

Hello, World!

Example layout files


<!DOCTYPE html>
<html><head><title>{{ title }}</title></head><body><header><h1>{{ title }}</h1></header><main><p>{{ contents | safe }}</p></main><footer><hr />Licensed under CC-BY-SA</footer></body></html>

Example output without clean-html


<!DOCTYPE html>
<html><head><title>My Website</title></head><body><header><h1>My Website</h1></header><main><p>Hello, World!</p></main><footer><hr />Licensed under CC-BY-SA</footer></body></html>

Example output with clean-html


<!DOCTYPE html>
      <title>My Website</title>
      <h1>My Website</h1>
      <p>Hello, World!</p>
      <hr />
      Licensed under CC-BY-SA


With npm installed, run

$ npm install metalsmith-clean-html

For static websites, some prefer to specificy --save-dev to npm install as the distributed website does not actually require this plugin as a dependency.


Since Metalsmith follows a Pipeline pattern, the step at which plugins run is important. This plugin should ideally run after the layout step.

There is only one option:

filter**/*.htmlglob pattern that file name should match, otherwise it will be skipped

Example build file with options

// ...
    .use(cleanHtml({ filter: "*.html" }))
    .build(function (err) {
        if (err) throw err;

Example configuration with options

  "source": "src",
  "destination": "build",
  "plugins": [{
    "metalsmith-markdown": {},
    "metalsmith-layouts": {},
    "metalsmith-clean-html": {
      "filter": "*.html"


If you'd like to contribute, please fork the repository and use a feature branch. Issues and pull requests are warmly welcome.

Links and references



This software is free software licensed under the MIT License. See LICENSE.MD


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free