vibe-coding-bundler
A powerful browser-based JavaScript bundler using esbuild-wasm. Compile React, TypeScript, and JSX at runtime with zero server required.
npm install vibe-coding-bundler
Live Examples
See vibe-coding-bundler in action. Each example compiles and runs entirely in your browser.
Laud CRM
Full-featured CRM with React Router and Zustand state management.
View Demo →React Flow
Interactive node-based diagrams and flowcharts.
View Demo →Tremor Dashboard
Analytics dashboard with charts and data visualization.
View Demo →Excalidraw
Virtual whiteboard for sketching hand-drawn diagrams.
View Demo →Novel Editor
Notion-style WYSIWYG editor with slash commands.
View Demo →shadcn/ui
Beautiful, accessible UI components with Radix and Tailwind.
View Demo →Why vibe-coding-bundler?
Built for AI-powered development environments, live coding playgrounds, and anywhere you need to compile code in the browser.
Lightning Fast
Powered by esbuild-wasm for near-instant compilation. Bundle entire applications in milliseconds, right in the browser.
Virtual File System
Load entire projects into memory with multi-file support. Handle complex imports, relative paths, and module resolution.
CDN Import Maps
Resolve npm packages from CDNs like esm.sh with zero configuration. No server, no build step, just code.
TypeScript & JSX
First-class support for TypeScript, JSX, and TSX. Automatic JSX runtime detection and transpilation.
Plugin System
Extensible plugin architecture with onResolve/onLoad hooks. Built-in helpers for virtual modules, aliases, and externals.
Zero Server Required
Everything runs in the browser. Perfect for static sites, client-side apps, and serverless environments.
Simple to Use
Get started with just a few lines of code
import { createBundler, initialize } from 'vibe-coding-bundler';
// Initialize esbuild-wasm (only needed once)
await initialize();
// Create a bundler instance
const bundler = createBundler({
fetcher: async (url) => {
const res = await fetch(url);
return { contents: await res.text() };
}
});
// Bundle your code
const result = await bundler.bundle(
'/src/index.tsx',
{
'/src/index.tsx': `
import React from 'react';
export const App = () => <h1>Hello World!</h1>;
`
},
{
imports: {
'react': 'https://esm.sh/react@18'
}
}
);
// result.outputFiles contains your bundled code!
console.log(result.outputFiles);Perfect For
AI Code Generation
Let AI generate complete React applications that compile and run instantly in the browser. No build step required.
Interactive Playgrounds
Build code playgrounds, documentation sites with live examples, or educational platforms with real-time compilation.
No-Code/Low-Code Tools
Power visual builders and component editors that need to compile user-created components on the fly.
Prototyping & Demos
Quickly prototype ideas or create shareable demos without setting up a development environment.
Ready to Get Started?
vibe-coding-bundler is open source and free to use. Star us on GitHub or install from npm today.