https://github.com/hideoo/ts-playground-block

GitHub Block to embed a TypeScript Playground in Markdown files or as a custom file renderer in GitHub
https://github.com/hideoo/ts-playground-block

blocks github github-blocks javascript playground typescript

Last synced: about 1 year ago
JSON representation

GitHub Block to embed a TypeScript Playground in Markdown files or as a custom file renderer in GitHub

• Host: GitHub
• URL: https://github.com/hideoo/ts-playground-block
• Owner: HiDeoo
• License: mit
• Created: 2023-02-11T12:38:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-25T12:39:54.000Z (about 3 years ago)
• Last Synced: 2025-02-26T12:22:42.893Z (over 1 year ago)
• Topics: blocks, github, github-blocks, javascript, playground, typescript
• Language: TypeScript
• Homepage:
• Size: 127 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  
ts-playground-block 🔭

  
Embed a TypeScript Playground in GitHub





  

    

  

  

    

  

  




## Features

A [GitHub Block](https://blocks.githubnext.com) to embed a [TypeScript Playground](https://www.typescriptlang.org/play) in Markdown files or as a custom file renderer in GitHub.

- Automatic Type Acquisition

- Configurable TypeScript version saved in [metadata](https://github.com/githubnext/blocks/blob/df66e0457f1d23e883cb6d089ee1e0c80ac5c8d2/docs/Developing%20blocks/2%20Building%20your%20first%20block.md#metadata) (editable by users with write access to the repository)

- Support for [TypeScript Twoslash](https://www.typescriptlang.org/dev/twoslash) annotations

- Link to open the code in the [official TypeScript Playground](https://www.typescriptlang.org/play)

> **Warning**

>

> GitHub Blocks is currently an experimental technical preview and may change at any time.

## Planned Features

GitHub Blocks is still in **early development** and same goes for this GitHub Block. The following features are planned:

- TS Config customization just like the official TypeScript Playground.

- Theme support (the GitHub Blocks UI does not yet support themes).

## Limitations

It is currently not possible to customize the options, e.g. the TypeScript version, of the TypeScript Playground GitHub Block directly from Markdown but some sort of "instance" state allowing this kind of customization is on the roadmap.

## Examples

- [Embedded in a README file.](https://blocks.githubnext.com/HiDeoo/ts-playground-block/blob/main/examples/README.md)

- [As a file renderer for a TypeScript file.](https://blocks.githubnext.com/HiDeoo/ts-playground-block/blob/main/examples/basic.ts)

- [As a file renderer for a TypeScript file with a specific TypeScript version.](https://blocks.githubnext.com/HiDeoo/ts-playground-block/blob/main/examples/version.ts)

![Embedded in a README file.](https://user-images.githubusercontent.com/494699/219106150-2e27a48c-3012-47bb-8260-64918aec6af2.png)

![As a file renderer for a TypeScript file.](https://user-images.githubusercontent.com/494699/219106513-c7d3c4e4-34e3-496d-9a30-3931c48413ac.png)

![As a file renderer for a TypeScript file with a specific TypeScript version.](https://user-images.githubusercontent.com/494699/219106566-7d9682d7-3682-4d56-baf1-6341b8fdb6d6.png)

## License

Licensed under the MIT License, Copyright © HiDeoo.

See [LICENSE](https://github.com/HiDeoo/ts-playground-block/blob/main/LICENSE) for more information.