toypack

library1.1.0jsnpmunverified

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.

web-framework devops

npm install toypack

github ↗package ↗

INSTALL

IMPORT

SIG · TOYPACK

toypack

web-frameworkjavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Toypack

✓ import { Toypack } from 'toypack'

✗ const Toypack = require('toypack')

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

Toypack (default)

✓ import Toypack from 'toypack'

✗ 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)

✓ const { Toypack } = window.toypack;

✗ import { Toypack } from '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.

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);

Debug

Known issues

gotchaWhen 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.

affects: >=1.0.0

breakingVersion 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.

affects: <1.0.0

gotchaThe 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.

affects: >=1.0.0

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

fix

Monitor documentation; currently use simple string content.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'path'

Missing polyfill for Node's path module in browser.

fix

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

Uncaught ReferenceError: Toypack is not defined

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.

TypeError: Toypack is not a constructor

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

fix

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

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

pathoptionalPolyfill required for path module in browser

fsoptionalPolyfill required for fs module in browser

processoptionalPolyfill required for process module in browser

bufferoptionalPolyfill required for Buffer module in browser

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/kylehue/toypack ↗

packagehttps://www.npmjs.com/package/toypack ↗