Wrapper around https://github.com/Prettyhtml/prettyhtml

Usage no npm install needed!

<script type="module">
  import sidouglasPrettyhtml from 'https://cdn.skypack.dev/@sidouglas/prettyhtml';


Prettyhtml Banner

Opinionated general formatter for your Angular, Vue, Svelte or pure HTML5 templates. Try it on the playground.


  • Indentation based primary on node-level + tag length, not content.
  • Can parse Angular, Vue or HTML5 templates.
  • Formats embedded content with prettier with respect to your local settings.
  • Doesn't change the behaviour of your attributes and tags.
  • Remove all superfluous white-space. There are two additional rules:
    • Collapses multiple blank lines into a single blank line.
    • Empty lines at the start and end of blocks are removed. (Files always end with a single newline, though.)
  • Enforce consistent output of your HTML.

Framework specific features

Feature Framework
HTML5 all
Self-closing custom elements vue
Self-closing none void elements vue
Case-sensitive attributes angular
Case-sensitive elements angular


const parent = require('@sidouglas/prettyhtml');
const formatter = Object.create(parent);

formatter.cleanRoutine = async function () {
    // put your clean routines in here...

  baseDirectory: ['./src/scripts/vue/components/**/*.js', './src/scripts/vue/apps/**/*.js'],
  dialog: {
    message: 'What components/apps to tidy?',
    name: 'list',
    type: 'checkbox',
  framework: {
    utilClasses: ['a-', 'l-', 'o-', 't', 'u-'],
    colOffset() {
      return this.config.isComponent(this.filePath) ? 4 : 2;
  isComponent(filePath) {
    return filePath.indexOf('components') > 0;
  prettyHtml: {
    printWidth: 200,
    sortAttributes: true,
    wrapAttributes: true,
  regex: {
    find(contents) {
      return contents.match(/(?:template.+`)([^`]*)(?:`)/)[1];
    replace(content) {
      const offset = this.config.isComponent(this.filePath) ? '  ' : '';

      return `\n${content}${offset}`;
  ...(process.argv.slice(2)[0] ? singleFileInit : {}),