Playground Stats

Online playground allows to edit and execute code right from the browser. It makes documentation interactive and builds an engaging onboarding experience. While it won't work for many projects, be sure to explore your options - you may be surprised!

Highcharts React Simple Chart
Project types
UX best practices

Project types

1. Web technologies: render result in the browser

  • Code playground with automated deployment: web frameworks/website engines/libraries. Automate bundling, deployment, hot module reload.
  • UI/widgets/themes: allow to play with render, allow to view for different parameters, generate code
Examples:   Salesforce ,   Webflow ,   Flexbox Playground ,   CSS Playground

2. Code tools: allow to run the code

  • Programming languages ...
  • For transpilers show code editor and compiled code side-to-side
  • ... interpreters, template engines
Examples:   Go ,   Prettier ,   Babel ,   TypeScript

UX best practices

1. Provide an example to start with

  • Don't let user to start with an empty playground. User with limited prior knowledge should find it useful.
  • Playground should start with a loaded example. You can provide a collection of examples to play with.
Examples:   TypeScript

2. Provide a convenient code editing experience

  • Syntax validation/linting
  • Autocompletion
  • Prettifying?
  • Settings, eliminate boilerplate code/automate common features (e.g. importing scripts)
  • Help (e.g. API reference)/self-consistent

Apply this and many other checklists to your project