Toypack

1.1.0 verified Sat May 09 auth: no javascript

Toypack is a browser-based sandbox bundler for static sites, enabling live coding playgrounds similar to CodePen or CodeSandbox. Currently at version 1.1.0, it provides an easy-to-use API for bundling JavaScript code entirely in the browser without a server. Key differentiators: it ships TypeScript types, works via npm or CDN, and includes a simple addOrUpdateAsset/run workflow. However, npm usage requires polyfills for Node built-ins (path, fs, process,Buffer). Toypack is lightweight and focused on browser bundling, contrasting with server-side bundlers like Webpack or Rollup.

Common errors

error Cannot find module 'path' ↓

cause Missing polyfill for Node's path module in browser.

fix

Install and configure a path polyfill (e.g., 'path-browserify').

error Uncaught ReferenceError: Toypack is not defined ↓

cause Using CDN but treating it as an ES module, or wrong script load order.

fix

Load CDN script before using Toypack, or ensure you're not using import.

error TypeError: Toypack is not a constructor ↓

cause Importing the module incorrectly (e.g., default vs named).

fix

Use import { Toypack } from 'toypack' or import Toypack from 'toypack'.

Warnings

gotcha When installing via npm, you must polyfill Node built-in modules (path, fs, process, Buffer) for the browser environment. ↓

fix Install browserify's path, browserify-fs, process, and buffer packages, and configure your bundler to use them.

breaking Version 1.0.0 introduced a rewrite with breaking API changes. The previous 0.x API is incompatible. ↓

fix Migrate to new API: instantiate Toypack class, use addOrUpdateAsset and run methods.

gotcha The CDN version exposes Toypack as a global, not as an ES module. Attempting to import will fail. ↓

fix Use script tag without type="module" and access via window.toypack.

deprecated The addOrUpdateAsset method's second parameter (content) may be deprecated in future for a content object. ↓

fix Monitor documentation; currently use simple string content.

Install

npm install toypack

yarn add toypack

pnpm add toypack

Imports

Toypack

wrong

const Toypack = require('toypack')

correct

import { Toypack } from 'toypack'

Toypack is ESM-only; CommonJS require() will fail.

Toypack (default)
wrong
```
import { Toypack } from 'toypack'
```
correct
```
import Toypack from 'toypack'
```
Both named and default exports exist, but the default export is the class itself. Named export is also available.
Toypack (CDN)
wrong
```
import { Toypack } from 'toypack'
```
correct
```
const { Toypack } = window.toypack;
```
When using CDN, Toypack is exposed as a global. Do not use import in that context.
type Imports
```
import type { Toypack } from 'toypack'
```
TypeScript types are bundled; use type-only import for type checking.

Quickstart

Shows basic usage: create Toypack instance, add assets, run bundler, and log bundled output.

import { Toypack } from 'toypack';

const toypack = new Toypack();
toypack.addOrUpdateAsset("/src/index.js", "import { greet } from './greet'; console.log(greet('World'));");
toypack.addOrUpdateAsset("/src/greet.js", "export function greet(name) { return 'Hello, ' + name; }");

const result = await toypack.run();
console.log(result.js.content);