{"id":42053,"library":"syn-bundler","title":"syn-bundler","description":"syn-bundler is an in-browser JavaScript/TypeScript bundler that operates entirely on a virtual file system, using esbuild-wasm under the hood. Version 0.0.1 is a pre-release with no established release cadence. It differentiates by running fully client-side without a server, making it suitable for browser-based IDEs, playgrounds, and code sandboxes. Includes built-in support for JSX, CSS, SVG, and PNG assets via plugins.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","esbuild","esbuild-wasm","bundler","browser-bundler","typescript"],"install":[{"cmd":"npm install syn-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add syn-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add syn-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundling engine; provides the wasm binary for browser-side compilation.","package":"esbuild-wasm","optional":false}],"imports":[{"note":"ESM-only; no CommonJS support. TypeScript types are included.","wrong":"const bundle = require('syn-bundler')","symbol":"bundle","correct":"import { bundle } from 'syn-bundler'"},{"note":"Only exported with named import. Not exported as default.","wrong":"","symbol":"Compiler","correct":"import { Compiler } from 'syn-bundler'"},{"note":"Used internally by the bundler; exported for advanced customization.","wrong":"","symbol":"Resolver","correct":"import { Resolver } from 'syn-bundler'"}],"quickstart":{"code":"import { bundle } from 'syn-bundler';\n\nconst files = new Map<string, string | Uint8Array>();\nfiles.set(\"/index.tsx\", `\n  import React from 'react';\n  import { createRoot } from 'react-dom/client';\n  import './styles.css';\n  import logo from './logo.svg';\n\n  const App = () => (\n    <div>\n      <h1>Hello from syn-bundler!</h1>\n      <img src={logo} alt=\"Logo\" />\n    </div>\n  );\n\n  const root = createRoot(document.getElementById('root')!);\n  root.render(<App />);\n`);\nfiles.set(\"/styles.css\", `body { margin: 0; font-family: sans-serif; }`);\nfiles.set(\"/logo.svg\", new TextEncoder().encode(`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\"/></svg>`));\n\nconst importMap: Record<string, string> = {\n  \"react\": \"https://esm.sh/react@18.2.0\",\n  \"react-dom\": \"https://esm.sh/react-dom@18.2.0\"\n};\n\nconst output = await bundle(\"/index.tsx\", files, {}, importMap);\nconsole.log(output);","lang":"typescript","description":"Demonstrates creating a virtual file system with TSX, CSS, and SVG, then bundling with external React and ReactDOM via import map."},"warnings":[{"fix":"Use absolute paths starting with '/' for all files in the Map.","message":"All file paths in the Map must be absolute (e.g., starting with '/'). Relative paths like './foo.ts' will not resolve correctly.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Provide an importMap with 'react' and 'react-dom' mapped to CDN URLs (e.g., https://esm.sh/).","message":"The importMap is required when JSX is used without bundled React; otherwise the bundle will fail with unresolved modules.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"The bundled output is always ESM. Use a module-capable environment (e.g., <script type=\"module\">) to run it.","message":"The default bundling always sets 'format: 'esm'' and 'target: 'esnext''. There is no option to change these via the config parameter.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Ensure all imported file types are supported or provide a custom plugin.","message":"Files with extensions not handled by built-in plugins (e.g., .json, .woff) will be silently ignored or cause build errors.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"search_vec":"'0.0.1':30 'asset':75 'base':58 'browser':11,57,85 'browser-bas':56 'browser-bundl':84 'built':66 'built-in':65 'bundler':3,6,13,83,86 'cadenc':40 'client':47 'client-sid':46 'code':62 'css':71 'differenti':42 'entir':16 'esbuild':24,79,81 'esbuild-wasm':23,80 'establish':38 'file':20 'fulli':45 'hood':28 'ide':59 'in-brows':9 'includ':64 'javascript':78 'javascript/typescript':12 'jsx':70 'make':52 'oper':15 'playground':60 'plugin':77 'png':74 'pre':34 'pre-releas':33 'releas':35,39 'run':44 'sandbox':63 'server':51 'side':48 'suitabl':54 'support':68 'svg':72 'syn':2,5 'syn-bundl':1,4 'system':21 'typescript':87 'use':22 'version':29 'via':76 'virtual':19 'wasm':25,82 'without':49","created_at":"2026-06-04T18:55:23.503611+00:00","updated_at":"2026-06-04T18:55:23.503611+00:00","problems":[{"fix":"Add an importMap with entries for 'react' and 'react-dom' (and any other external packages).","cause":"ImportMap is missing or incomplete for React dependencies.","error":"Error: Could not resolve 'react' from '/index.tsx'"},{"fix":"Ensure all keys in the files Map start with a forward slash '/'.","cause":"A file path in the Map is not starting with '/' (relative path used).","error":"TypeError: Cannot read properties of undefined (reading 'charAt')"},{"fix":"Add the CSS file to the files Map with the correct absolute path matching the import.","cause":"The index file imports './styles.css' but the file is not in the VFS.","error":"Error: Build failed with 1 error: error: Could not resolve './styles.css' from '/index.tsx'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"syn-bundler","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}