Bundle configuration

Configure how PlayCode builds your project for production using playcode.config.json.

Overview

PlayCode uses esbuild under the hood to bundle your code. You can customize the build process by creating a playcode.config.json file in your project root.

How to add configuration

1. Create a new file named playcode.config.json in your project root.
2. Add your configuration options (see examples below).
3. Click your name (top left) → Preferences → Clear cache.
4. Reload the page.
5. Publish your changes.

Important: Configuration changes only apply after clearing the cache.

Available options

You can configure the following esbuild production build options:

keepNames

By default, esbuild renames symbols to reduce code size. This can break frameworks that rely on the name property for registration. Set keepNames: true to preserve original names even in minified code.

{
  "esbuildProduction": {
    "keepNames": true
  }
}

minify

Enable or disable code minification. Default is true.

{
  "esbuildProduction": {
    "minify": false
  }
}

treeShaking

Enable or disable tree shaking (removing unused code). Default is true.

{
  "esbuildProduction": {
    "treeShaking": false
  }
}

Complete example

Here's a complete configuration file with all options:

{
  "esbuildProduction": {
    "keepNames": false,
    "minify": true,
    "treeShaking": true
  }
}

When to use these options

• keepNames: Use when your framework relies on function/class names (e.g., Angular, some React patterns)
• minify: false: Use when debugging production builds
• treeShaking: false: Use when tree shaking causes issues with your code