🇬🇧 English | 🇪🇸 Español | 🇷🇺 Русский | 🇨🇳 中文
Vite plugin for injecting HTML, JS, and CSS code snippets into index.html
.
Often, when developing front-end applications, it is necessary to integrate various libraries into the index.html
file - for example, you might want to include code for Google Analytics, PWA service workers, Open Graph and Twitter Card meta data, Splash screens, Customer support widgets, and much more.
As a result, index.html
becomes bloated and hard to manage.
This plugin allows you to store code snippets in separate files, keeping index.html
clean and pristine, and inject them at build time. There is no need for special placeholder tags in the index.html
as well.
The plugin also supports Vite dev server HMR
, which means you can edit code snippets and see the results immediately in the browser.
Additionally, the plugin allows for different configurations in development and production modes. By specifying the buildModes
property, you can enable or disable specific code snippets depending on the environment, simplifying development and reducing unnecessary code in Dev mode.
There are three types
of code snippets - raw
, js
, and css
. raw
snippets are injected as-is, while js
and css
snippets are wrapped in <script>
and <style>
tags respectively. The default type
value is raw
.
There are four places where you can inject a code snippet into the index.html
:
- The beginning of the
<head>
tag (head-prepend
) - The end of the
<head>
tag (head
) - The beginning of the
<body>
tag (body-prepend
) - The end of the
<body>
tag (body
)
Corresponding injectTo
values are: head-prepend
, head
, body-prepend
, and body
.
pnpm add vite-plugin-html-injection -D
yarn add vite-plugin-html-injection -D
npm i vite-plugin-html-injection -D
- Add
vite-plugin-html-injection
to your Vite plugins with required configuration:
// vite.config.js
import { defineConfig } from "vite";
import { htmlInjectionPlugin } from "vite-plugin-html-injection";
export default defineConfig({
plugins: [
htmlInjectionPlugin({
// transformation order - set to "pre" to use env variable replacement in html files
// See https://vite.dev/guide/api-plugin.html#transformindexhtml
order: "pre",
// example injections
injections: [
{
// (optional) injection name
name: "Open Graph",
// path to the code snippet file relative to Vite project root
path: "./src/injections/open-graph.html",
// (optional) code snippet type: raw | js | css
type: "raw",
// where to inject: head | body | head-prepend | body-prepend
injectTo: "head",
// (optional) which modes apply to: dev | prod | both
buildModes: "both",
},
{
name: "Google analytics",
path: "./src/injections/ga.html",
type: "raw",
injectTo: "body",
buildModes: "prod",
},
],
}),
],
});
You can place config object in a separate json file and import it in the vite.config.js
- Create corresponding code snippets:
<!-- ./src/injections/open-graph.html -->
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.acme.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Acme website" />
<meta property="og:description" content="Welcome to my Acme website" />
<meta property="og:image" content="https://www.acme.com/logo.png" />
<!-- ./src/injections/ga.html -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8W4X32XXXX" />
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-8W4X32XXXX");
</script>
That's it. After running npm serve
or npm build
command the code snippets will be injected.
The plugin is strongly typed. Here is the signature of its configuration:
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
order?: "pre" | "post";
}
export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // default is 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // default is 'both'
}
Thank you!
You are welcome to make suggestions through GitHub Issues or extend functionality by forking, modifying, and making a PR to this Vite plugin.
MIT License © 2023-2025