vite-plugin-jsonify

Generate content-hashed JSON assets from TypeScript or JavaScript modules while preserving the full Vite transformation pipeline.

Instead of maintaining static .json files, author your data as normal modules, export serializable objects, and import them with ?json. During build, the plugin evaluates the module and emits JSON assets whose URLs are returned to your application.

Features

• ⚡ Full Vite pipeline support (aliases, loaders, transforms, plugins, TypeScript, etc.)
• 📝 Author JSON as TypeScript or JavaScript modules
• 📦 Automatic JSON asset generation during build
• 🔒 Content-hashed output filenames for long-term caching
• 📄 Multiple exports generate multiple JSON files
• 🔥 Hot Module Replacement during development
• 🚀 Zero runtime JSON generation in production
• 🌐 Works with web manifests and other JSON-based assets

Installation

npm install -D vite-plugin-jsonify

Setup

Add the plugin to your Vite configuration:

import { defineConfig } from 'vite';
import { jsonifyPlugin } from 'vite-plugin-jsonify';

export default defineConfig({
	plugins: [jsonifyPlugin()],
});

Basic Usage

Create a module that exports serializable data:

// ./app/assets/manifest.webmanifest.ts

export default {
	name: 'My App',
	short_name: 'App',
	start_url: '/',
	display: 'standalone',
};

Import it with the ?json query:

import manifestUrl from './app/assets/manifest.webmanifest.ts?json';

console.log(manifestUrl);
// /assets/manifest-[checksum].webmanifest

The imported value is a URL string pointing to the generated JSON asset.

Multiple Exports

A module may export multiple serializable values:

// ./app/assets/data.json.ts

export const users = [
	{ id: 1, name: 'John' },
];

export const settings = {
	theme: 'dark',
};

export default {
	version: 1,
};

Import the generated URLs:

import defaultUrl, { users, settings } from './app/assets/data.json.ts?json';

console.log(defaultUrl);
console.log(users);
console.log(settings);

Build output:

/assets/data-[checksum].json
/assets/users.data-[checksum].json
/assets/settings.data-[checksum].json

Each export becomes an independent JSON asset.

Example: Web Manifest

// ./app/assets/manifest.webmanifest.ts

export default {
	name: 'My App',
	short_name: 'App',
	start_url: '/',
	display: 'standalone',
	background_color: '#ffffff',
	theme_color: '#ffffff',
};

import manifestUrl from './app/assets/manifest.webmanifest.ts?json';

<link rel="manifest" href="{manifestUrl}" />

TypeScript Support

TypeScript does not know how to handle ?json imports by default.

Create a declaration file:

// vite-env.d.ts

declare module '*?json' {
	const url: string;
	export default url;
}

Named Exports

TypeScript currently does not provide a way to generically describe arbitrary named exports from a module declaration.

Because each source file can expose different export names, consumers may still see type errors when importing named exports from ?json modules.

For example:

import manifestUrl, { icons } from './app/assets/manifest.webmanifest.ts?json';

The default export can be typed as a string URL, but the icons export cannot be declared generically for all possible modules.

If you use named exports extensively, you may choose to create project-specific module declarations or suppress these warnings.

Development Behavior

During development:

• JSON is served from a virtual endpoint.
• Source modules are evaluated through Vite.
• Changes trigger HMR updates.
• Generated URLs are stable and immediately reflect updated content.

Example:

import webmanifestUrl from './app/assets/manifest.webmanifest?json';

Resolves to:

/@json/app/assets/manifest.webmanifest

Production Behavior

During build:

1. The source module is compiled using Vite.
2. The module is evaluated.
3. Each export is serialized to JSON.
4. JSON assets are emitted.
5. Imports are replaced with the generated asset URLs.

Example:

import webmanifestUrl from './app/assets/manifest.webmanifest?json';

becomes:

const configUrl = '/assets/manifest-[checksum].webmanifest';

License

MIT