{"id":28404,"library":"toypack","title":"Toypack","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/kylehue/toypack","tags":["javascript","sandbox","bundler","playground","live","browser","typescript"],"install":[{"cmd":"npm install toypack","lang":"bash","label":"npm"},{"cmd":"yarn add toypack","lang":"bash","label":"yarn"},{"cmd":"pnpm add toypack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Polyfill required for path module in browser","package":"path","optional":true},{"reason":"Polyfill required for fs module in browser","package":"fs","optional":true},{"reason":"Polyfill required for process module in browser","package":"process","optional":true},{"reason":"Polyfill required for Buffer module in browser","package":"buffer","optional":true}],"imports":[{"note":"Toypack is ESM-only; CommonJS require() will fail.","wrong":"const Toypack = require('toypack')","symbol":"Toypack","correct":"import { Toypack } from 'toypack'"},{"note":"Both named and default exports exist, but the default export is the class itself. Named export is also available.","wrong":"import { Toypack } from 'toypack'","symbol":"Toypack (default)","correct":"import Toypack from 'toypack'"},{"note":"When using CDN, Toypack is exposed as a global. Do not use import in that context.","wrong":"import { Toypack } from 'toypack'","symbol":"Toypack (CDN)","correct":"const { Toypack } = window.toypack;"},{"note":"TypeScript types are bundled; use type-only import for type checking.","wrong":null,"symbol":"type Imports","correct":"import type { Toypack } from 'toypack'"}],"quickstart":{"code":"import { Toypack } from 'toypack';\n\nconst toypack = new Toypack();\ntoypack.addOrUpdateAsset(\"/src/index.js\", \"import { greet } from './greet'; console.log(greet('World'));\");\ntoypack.addOrUpdateAsset(\"/src/greet.js\", \"export function greet(name) { return 'Hello, ' + name; }\");\n\nconst result = await toypack.run();\nconsole.log(result.js.content);","lang":"typescript","description":"Shows basic usage: create Toypack instance, add assets, run bundler, and log bundled output."},"warnings":[{"fix":"Install browserify's path, browserify-fs, process, and buffer packages, and configure your bundler to use them.","message":"When installing via npm, you must polyfill Node built-in modules (path, fs, process, Buffer) for the browser environment.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to new API: instantiate Toypack class, use addOrUpdateAsset and run methods.","message":"Version 1.0.0 introduced a rewrite with breaking API changes. The previous 0.x API is incompatible.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Use script tag without type=\"module\" and access via window.toypack.","message":"The CDN version exposes Toypack as a global, not as an ES module. Attempting to import will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Monitor documentation; currently use simple string content.","message":"The addOrUpdateAsset method's second parameter (content) may be deprecated in future for a content object.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Install and configure a path polyfill (e.g., 'path-browserify').","cause":"Missing polyfill for Node's path module in browser.","error":"Cannot find module 'path'"},{"fix":"Load CDN script before using Toypack, or ensure you're not using import.","cause":"Using CDN but treating it as an ES module, or wrong script load order.","error":"Uncaught ReferenceError: Toypack is not defined"},{"fix":"Use import { Toypack } from 'toypack' or import Toypack from 'toypack'.","cause":"Importing the module incorrectly (e.g., default vs named).","error":"TypeError: Toypack is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}