@valtown/playground

This repository provides a React component that you can use to embed an interactive coding playground on a website that uses Val Town to execute code.

This component provides:

• TypeScript autocompletion, linting, and hover
• Auto-acquisition of types from NPM, for packages that provide types
• Ability to run code on Val Town

Example

See an interactive example on StackBlitz.

import { Playground } from "@valtown/playground";

export function MyPage() {
  return <div>
    <Playground 
      env={{ YOUR_API_KEY: 'something' }}
      code="console.log(1);" workerPath="/public/worker.ts" />
  </div>;
}

The input to env will be stubbed-in as the values of process.env variables. We assume that most applications will have their own central UI for configuring these variables.

Usage

Install this as an NPM package:

npm install @valtown/playground

Or with your package manager of choice.

Copy the webworker

This module relies on a WebWorker, to offload the CPU-intensive work of running TypeScript, and there is no commonly-adopted way to distribute and consume NPM modules which package WebWorkers.

So, copy the file in node_modules/@valtown/playground/dist/assets/ from your node_modules directory to a public directory in your application where it can be loaded.

Use the component

As with the example above, import the component and provide it with code prop and a workerPath prop that points to the worker file.

Styling

This is an unstyled library but exposes classes that you can style.