https://github.com/ambar/vscode-live-code

Interactive code playground: https://marketplace.visualstudio.com/items?itemName=ambar.live-code
https://github.com/ambar/vscode-live-code

editor live-code repl vscode vscode-extension

Last synced: 9 months ago
JSON representation

Interactive code playground: https://marketplace.visualstudio.com/items?itemName=ambar.live-code

• Host: GitHub
• URL: https://github.com/ambar/vscode-live-code
• Owner: ambar
• License: mit
• Created: 2021-11-18T12:38:45.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-27T02:00:22.000Z (almost 2 years ago)
• Last Synced: 2025-04-23T05:46:33.832Z (9 months ago)
• Topics: editor, live-code, repl, vscode, vscode-extension
• Language: TypeScript
• Homepage:
• Size: 1.36 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Live Code

[![test workflow](https://github.com/ambar/vscode-live-code/actions/workflows/test.yml/badge.svg)](https://github.com/ambar/vscode-live-code/actions/workflows/test.yml)

Interactive code playground.

![screenshot-1](./example/screenshot-1.png)

## 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](https://www.typescriptlang.org/tsconfig/#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](https://nodejs.org/) v12+

## Extension Settings

```json

{

  "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"

  }

}

```