Playground guide

The playground runs the real Guchho bundler compiled to WebAssembly, entirely in your browser. Nothing you type is uploaded — the engine reads your source from an in-memory filesystem, builds or transforms it, and hands the result back.

How it works

The engine is @guchho/wasm, the same compiler that powers the native CLI, compiled to WebAssembly. The playground loads it inside a Web Worker so the interface stays responsive. A Build writes the file into the engine's virtual filesystem and runs the build command; the Lexer and AST tabs run the engine's own lex and parse service commands over the same worker.

Choosing a language

Use the Language selector to pick HTML, CSS, JavaScript, TypeScript, JSX, TSX or JSON. Changing it loads a starter example for that language; edit it freely. Reset restores the current language's example.

Build

Build: Runs the full build command with the selected options and lists every emitted file. HTML entries compile their inline scripts and styles. The lexer and AST tabs refresh for the current source at the same time.

Options

The Options panel exposes settings the browser engine actually supports: target, format, platform, loader, minify and bundle. Settings that do not apply to the selected language are disabled. A build only runs when you press Build or Ctrl+Enter.

Output and errors

The right panel has four tabs. Output shows the generated file(s), Errors shows the engine's diagnostics, Lexer shows the token stream the engine produced for the current source, and AST shows the parse summary — nodes for HTML, top-level rules for CSS, symbols for JavaScript. Copy copies the visible output to your clipboard.

Not available in the browser

Source maps for builds. The --sourcemap flag crashes the browser engine, so it is shown disabled. The native CLI and API support it.
Serve, watch and dev. The engine has no sockets or threads; those subcommands are native only.

CLI reference — the flags the playground passes to the engine.
Compiler API — programmatic access in Node, including lexer(), parse() and print().
Loaders and Formats — the values behind the options panel.