Registry / devops / vite-plugin-insert-html

vite-plugin-insert-html

library1.0.3jsnpmunverified

A lightweight Vite plugin (v1.0.3) for injecting arbitrary HTML tags into the head or body of all HTML entry points. Supports both static tag arrays and dynamic functions that receive Vite's transform context for multi-page apps. No dependencies beyond Vite (>=4.0.0 <7). Ships with a hyperscript-like helper `h` for constructing tag descriptors. Alternative to heavier plugins like vite-plugin-html or manual HTML manipulation.

devops

npm install vite-plugin-insert-html

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-INSERT

vite-plugin-insert-html

devopsjavascriptv1.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

insertHtml

✓ import { insertHtml } from 'vite-plugin-insert-html'

✗ import insertHtml from 'vite-plugin-insert-html'

Named export, not default

✓ import { h } from 'vite-plugin-insert-html'

✗ const { h } = require('vite-plugin-insert-html')

ESM-only; CJS require is not supported

HtmlTagDescriptor

✓ import type { HtmlTagDescriptor } from 'vite'

✗ import { HtmlTagDescriptor } from 'vite-plugin-insert-html'

Type is from Vite core, not this plugin

Configures Vite to inject multiple HTML tags into head and body with prepend options.

// vite.config.js import { defineConfig } from 'vite'; import { insertHtml, h } from 'vite-plugin-insert-html'; export default defineConfig({ plugins: [ insertHtml({ head: [ h('meta', { charset: 'utf-8' }), h('link', { rel: 'icon', href: '/favicon.ico' }), h('title', {}, 'My App'), ], body: [ h('script', { src: 'https://analytics.example.com/script.js', async: true }), ], headPrepend: [ h('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }), ], bodyPrepend: [ h('noscript', {}, 'JavaScript is required.'), ], }), ], });

Debug

Known issues

gotchaTags are appended by default; use headPrepend/bodyPrepend to prepend

fix

Use 'headPrepend' or 'bodyPrepend' properties instead of 'head' or 'body' if you need tags before existing content.

affects: >=1.0.0

breakingRemoved CJS support; plugin is ESM-only

fix

Use ESM imports (import { insertHtml } from 'vite-plugin-insert-html') and ensure your project is configured for ESM (e.g., type: 'module' in package.json).

affects: >=1.0.0

deprecatedThe 'h' function signature changed from (tag, attrs, children) to (tag, attrs, ...children) in v1.0.0

fix

Migrate to spread syntax: h('div', {class: 'foo'}, h('span'))

affects: <1.0.0

gotchaAttribute value 'true' is serialized as the attribute name without a value (HTML boolean attribute)

fix

Use true for boolean attributes like disabled, hidden. Use string 'true' if you need the literal string.

affects: >=1.0.0

gotchaChildren can be an HTML string, but it will be inserted as raw HTML without escaping

fix

Ensure any user-provided strings are sanitized to prevent XSS.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0 , vite_plugin_insert_html.insertHtml) is not a function

Using a default import instead of named import

fix

Replace 'import insertHtml from ...' with 'import { insertHtml } from ...'

require() of ES Module ... not supported

Using CommonJS require() to import an ESM-only package

fix

Use import syntax, or configure your project for ESM (type: 'module' in package.json)

The plugin 'vite-plugin-insert-html' requires Vite version >=4.0.0

Using an older version of Vite (<4.0.0)

fix

Update Vite to >=4.0.0, or use an older version of the plugin if you cannot upgrade Vite.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin requires Vite 4+

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/NotWoods/vite-plugin-insert-html ↗

packagevite-plugin-insert-html ↗

homepagehttps://github.com/NotWoods/vite-plugin-insert-html#readme ↗