vite-plugin-json5 weekly downloads statistics

Vite JSON5 (and JSONC) plugin

A Vite plugin that wraps json5 to allow .json5 and .jsonc files to be loaded.

Installation

1. Install the package

2. Add it to your Vite config

3. Done

.json5 and .jsonc files can now be imported directly. They are parsed by the json5 package and transformed into standard JavaScript modules.

Options

This plugin accepts the same options as the default JSON parser, plus a dts option for automatic TypeScript type generation:

TypeScript types

[!NOTE] In Vite's dev server, type declarations are generated lazily — the file is written the first time a JSON5/JSONC module is actually requested. Open the page once and the file persists on disk across server restarts. Running vite build always generates types upfront.

Enable the dts option to have the plugin automatically generate TypeScript declarations for every JSON5/JSONC file you import. No more any — you get full type safety and autocompletion, inferred directly from the file's contents.

There are two modes:

Aggregated mode (default) — all declarations are collected into a single file at node_modules/@types/vite-plugin-json5/index.d.ts.

For auto-generated types to work, add "vite-plugin-json5" to your tsconfig.json "types" array:

If you already have a "types" array (e.g. "types": ["vite/client"]), append "vite-plugin-json5" to it.

Sidecar mode — writes a .d.ts file next to each source file (e.g. config.json5.d.ts beside config.json5). TypeScript picks these up automatically via module resolution — no tsconfig.json changes needed.

Example:

Enable it with sidecar: true and add the generated files to your .gitignore:

Add the signature of the generated files to the git ignore to prevent them from being pushed to your repository:

Literal types — by default, values are widened to their primitive type (string, number, boolean). Pass literals: true to use exact literal types instead:

Custom output path (aggregated mode only) — change where the aggregated file is written using outFile, relative to the Vite root:

Contributing

A guide for setting up the development environment to allow for easy contributions.

This repo uses proto for toolchain management and moon as the task runner.

1. Install proto by following the proto install guide. Then install the required tools (Node.js, pnpm, and moon) from the repo root:

1. Install dependencies:

1. Make changes 1. If the change is user-facing, add a changeset:

Commit the generated file under .changeset/ with your PR. 1. Run tests

1. Build when successful

1. Run the playground to test the build

Releases are automated with changesets. Development lands on dev; merging dev → main (or committing directly to main) runs the release workflow, which opens a Version Packages PR — merge that to publish. See .changeset/README.md.

Description from the npm listing.