You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vite-plugin-simple-html

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-simple-html

Vite plugin for HTML processing and minification

1.0.1
latest
Source
npm
Version published
Weekly downloads
11K
18.6%
Maintainers
1
Weekly downloads
 
Created
Source

npm downloads CI

vite-plugin-simple-html

Vite plugin for HTML processing and minification. "Lite" version of vite-plugin-html, supporting a subset of its features.

tl;dr

  • Install by executing npm install vite-plugin-simple-html or yarn add vite-plugin-simple-html.
  • Import by adding import simpleHtmlPlugin from 'vite-plugin-simple-html'.
  • Use it by adding simpleHtmlPlugin() to plugins section of your Vite config.

Usage

Here's an example of basic configuration:

import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';

export default defineConfig({
  plugins: [
    simpleHtmlPlugin({
      inject: {
        data: {
          title: 'My app',
          script: '<script src="index.js"></script>',
        },
        tags: [
          {
            tag: 'meta',
            attrs: {
              name: 'description',
              content: 'My awesome app',
            },
          },
        ],
      },
      minify: true,
    }),
  ],
});

User guide

Minification

Minification is handled by @swc/html.

To minify your HTML files, set minify to true:

import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';

export default defineConfig({
  plugins: [
    simpleHtmlPlugin({
      minify: true,
    }),
  ],
});

The default configuration in this case is:

{
  collapseWhitespaces: 'all',
  minifyCss: true,
  minifyJs: false,
  minifyJson: true,
  quotes: true,
  removeComments: true,
  removeEmptyAttributes: true,
  removeRedundantAttributes: 'all',
  tagOmission: false,
}

You can access that configuration by importing defaultMinifyOptions from the plugin:

import { defaultMinifyOptions } from 'vite-plugin-simple-html';

[!NOTE] The default configuration is designed for compatibility with vite-plugin-html. For more aggressive minification, consider adjusting the settings to better suit your needs.

If you want to customize the minification process, for example to minify JS, you can pass your own configuration object:

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    simpleHtmlPlugin({
      minify: {
        minifyJs: true,
      },
    }),
  ],
});

For a full list of available options, refer to @swc/html documentation.

EJS variables support

You can inject variables into your HTML files using EJS syntax.

import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';

export default defineConfig({
  plugins: [
    simpleHtmlPlugin({
      inject: {
        data: {
          title: 'My app',
        },
      },
    }),
  ],
});
<!doctype html>
<html lang="en">
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>

Tag injection

You can inject tags into your HTML files.

import { defineConfig } from 'vite';
import simpleHtmlPlugin from 'vite-plugin-simple-html';

export default defineConfig({
  plugins: [
    simpleHtmlPlugin({
      inject: {
        tags: [
          {
            tag: 'meta',
            attrs: {
              name: 'description',
              content: 'My awesome app',
            },
          },
        ],
      },
    }),
  ],
});

By default, they are injected at the end of the <head> section of your HTML file. You can change that behavior by setting injectTo:

  • head: Injects tags at the end of the <head> section of your HTML file (default).
  • head-prepend: Injects tags at the beginning of the <head> section of your HTML file.
  • body: Injects tags at the end of the <body> section of your HTML file.
  • body-prepend: Injects tags at the beginning of the <body> section of your HTML file.

Detailed comparison with vite-plugin-html

Featurevite-plugin-simple-htmlvite-plugin-html
EJS support⚠️ Variables only
HTML tags injection
HTML/CSS/JS minification
JSON minification
entry script injection
template customization
multi-page support

Why bother?

  • vite-plugin-simple-html has considerably fewer dependencies. Compare:

  • vite-plugin-simple-html does not suffer from issue that breaks Vite proxy (which was the reason I created this plugin in the first place).

  • vite-plugin-simple-html does not use options deprecated in Vite 5, and thus does not produce deprecation warnings:

     WARN  plugin 'vite:html' uses deprecated 'enforce' option. Use 'order' option instead.
    
     WARN  plugin 'vite:html' uses deprecated 'transform' option. Use 'handler' option instead.
    

License

The MIT License.

Author

Wojciech Maj Wojciech Maj

Keywords

vite

FAQs

Package last updated on 12 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts