Introducing: vite-plugin-fakery

I'm excited to announce the release of vite-plugin-fakery, a Vite plugin that helps you spin up mock API endpoints filled with realistic Faker data — no backend setup required.

It’s designed for frontend engineers who want to develop and prototype quickly without waiting on a real API or relying on fixed third-party endpoints.

• Homepage
• GitHub

Why Vite Plugin Fakery?

Like a lot of frontend engineers, I’ve spent plenty of time building against slow or unstable backend services. Sometimes those services don’t exist yet at all.

I wanted a solution that let me define quick, local API routes — but with flexible, randomized, yet structured data. I tried using third-party mock APIs, but they often had rigid schemas or lacked the control I needed.

So I built vite-plugin-fakery to bring the power of Faker into the dev server — right where I’m already working.

How It Works

Install the plugin via npm:

# with pnpm
pnpm i -D vite-plugin-fakery

# OR with npm
npm i -D vite-plugin-fakery

Next, add the plugin to your Vite config and define some routes.

import { defineConfig } from 'vite'
import vitePluginFakery from 'vite-plugin-fakery'

export default defineConfig({
  // … other Vite options
  plugins: [
    vitePluginFakery({
      endpoints: [
        {
          url: '/api/users',
          responseProps: {
            first_name: 'person.firstName',
            last_name: 'person.lastName',
          },
        },
      ],
    }),
  ],
})

See the results by opening http://localhost:<vite-port>/api/users in your browser. The output should look something like this (example truncated for brevity):

{
  "data": [
    {
      "id": 1,
      "first_name": "Noble",
      "last_name": "Auer"
    },
    {
      "id": 2,
      "first_name": "Wilfredo",
      "last_name": "Thompson"
    }
    // 8 more results here…
  ],
  "page": 1,
  "per_page": 10,
  "total": 10,
  "total_pages": 1
}

That’s it — now you can fetch('/api/users') from your frontend and get a fresh, realistic-looking user object each time.

Why It's Useful

This plugin really shines when you’re working on the frontend and either:

• don’t have a backend yet,
• don’t want to stand one up locally,
• or just want faster, cleaner data while you build.

Use it to:

• Prototype quickly — spin up endpoints with random but realistic data in seconds
• Demo features — create a local environment that feels real without relying on staging servers
• Build in isolation — test components in Storybook or play around with edge cases
• Onboard new teammates — give them something to hit without needing to replicate a full backend stack

Because you’re defining the endpoints yourself using faker, you stay in control of the structure and the values — but still get the benefits of randomized, varied data. It’s like having a programmable mock server baked into your dev environment.

Extra Features

Extra Features Out of the box, vite-plugin-fakery includes:

• 🔄 Hot module replacement (change your route config, and it updates immediately)

• 💡 Full TypeScript support with solid typings

• 🔧 Static or dynamic routes — you can define both easily

• 🌐 Built-in CORS support (so fetch requests just work)

• 🎲 Faker seeding — so your data can be stable or fully random depending on what you need

If you’re using Vite already, it drops in with basically no friction.

What's Next?

There’s more I’d like to explore with this plugin:

• Simulating latency and error responses

• Better control over response headers and status codes

• Route config validation and dev-time feedback

• Maybe even a UI for browsing and testing fake endpoints

If you have suggestions, feedback, or run into bugs, feel free to open an issue or submit a PR. I’d love for this to become a useful little utility for other frontend devs in the Vite ecosystem.

Related Links

• Homepage
• GitHub