Live Code

Interactive code playground.

Features

• Automatically evaluate all top-level expressions
• Support multiple environments (browser/Node.js, can be configured in settings, or switch by clicking the Change Platform button in the title bar)
• Support TypeScript/JSX
• Support URL imports
• Support custom paths in tsconfig or jsconfig
• Support top-level await (browser only)
• Render JSX elements (browser only)

Usage

Open Command Palette, choose Live Code: Open Preview to the Side, or simply click the preview button in the title, or use the shortcut cmd + k l.

Requirements

• Node.js v12+

Extension Settings

{
  "liveCode.renderJSX": {
    "type": "boolean",
    "default": true,
    "description": "Wether to render JSX elements in the preview panel (browser platform only)"
  },
  "liveCode.showLineNumbers": {
    "type": "boolean",
    "default": true,
    "description": "Wether to show line numbers in the preview panel"
  }
}