create-typescript-playground-plugin

create-typescript-playground-plugin

A template for creating new plugins for the TypeScript playground.

Quick Tutorial

You need about 5 minutes, Node.js, yarn and Firefox/Edge or Chrome.

Step 1: Use the template to bootstrap: yarn create typescript-playground-plugin playground-my-plugin

Step 2: Run yarn start in the new repo, to start up the local dev server

Step 3: Open the playground in your browser, click "Options" and enable "Connect to localhost:5000"

Step 4: Refresh, and see the new tab. That's your plugin up and running

 

That's all the pieces working in tandem, now you can make changes to the template and build out your plugin. The plugin in dev mode will always become forefront when connected, so you can re-load without a lot off clicks. To understand the template's technology, read the CONTRIBUTING.md

Alternatives

There are community-run templates for Playground plugins which bootstrap your plugin with well-known view libraries:

• gojutin/typescript-playground-plugin-react
• gojutin/typescript-playground-plugin-svelte

They have their own up-to-date documentation in their READMEs.