Registry / devops / vite-plugin-html-variables

vite-plugin-html-variables

library1.0.4jsnpmunverified

A Vite plugin that enables using environment variables and custom variables in HTML files by replacing placeholders like {{VAR}} with actual values at build time. Version 1.0.4 is the current stable release, updated irregularly. Key differentiators include support for custom prefixes/suffixes, the ability to exclude environment variables, and TypeScript definitions. It is minimal and focused on a single task, unlike heavier solutions like @vitejs/plugin-legacy or custom middleware.

devops

npm install vite-plugin-html-variables

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-HTML-V

vite-plugin-html-variables

devopsjavascriptv1.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

htmlVariables

✓ import htmlVariables from 'vite-plugin-html-variables'

✗ const htmlVariables = require('vite-plugin-html-variables')

Default ESM export. CJS require is not supported due to Vite's ESM-only plugin ecosystem.

default export (factory function)

✓ import htmlVariables from 'vite-plugin-html-variables'

✗ import { htmlVariables } from 'vite-plugin-html-variables'

This is a default export, not a named export. Named import will result in undefined.

HtmlVariablesOptions (TypeScript type)

✓ import type { HtmlVariablesOptions } from 'vite-plugin-html-variables'

✗ import { HtmlVariablesOptions } from 'vite-plugin-html-variables'

The type is only available as a TypeScript type export, not a runtime value. Use 'import type' or ignore if not using TS.

Shows basic usage of vite-plugin-html-variables with custom variables and env variable inclusion.

// vite.config.ts or vite.config.js import { defineConfig } from 'vite'; import htmlVariables from 'vite-plugin-html-variables'; export default defineConfig({ plugins: [ htmlVariables({ prefix: '{{', suffix: '}}', variables: { MY_VAR: 'Hello World' }, excludeEnvVariables: false, }), ], }); // .env file (optional, if not using variables object) VITE_APP_TITLE=My App

Debug

Known issues

gotchaEnvironment variables not prefixed with VITE_ must be explicitly passed via the `variables` config option, otherwise they are not exposed to the HTML.

fix

Use VITE_ prefix for env vars or add them to the `variables` object.

affects: <=1.0.4

gotchaThe plugin replaces placeholders in HTML files only during build (vite build) and not in dev server (vite dev). Changes to variables may require a full server restart.

fix

Restart the dev server after modifying .env or variables config.

affects: <=1.0.4

gotchaIf `excludeEnvVariables` is set to true, VITE_ prefixed env variables will not be available in the HTML, even if they are in the environment.

fix

Set excludeEnvVariables: false or use the variables object to include specific vars.

affects: <=1.0.4

breakingPrevious versions (before 1.0.0) used different default prefix/suffix or API. Check changelog for migration.

fix

Upgrade to latest version and update config accordingly (default prefix='{{', suffix='}}').

affects: <1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-html-variables'

Package not installed or incorrect import path.

fix

Install with: npm i -D vite-plugin-html-variables

Uncaught ReferenceError: VITE_APP_TITLE is not defined (in HTML)

Variable not passed via env or variables object, or excludeEnvVariables set to true.

fix

Ensure VITE_ prefix is used in .env or add variable to `variables` config.

TypeError: htmlVariables is not a function

Incorrect import (named instead of default).

fix

Use: import htmlVariables from 'vite-plugin-html-variables'

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/kiran-venugopal/vite-plugin-html-variables ↗

packagehttps://www.npmjs.com/package/vite-plugin-html-variables ↗