javascript-playgrounds

Overview

This project provides a quick, visual way to experiment with JavaScript code. It's designed to be loaded as an iframe for easy inclusion in any webpage.

There are a variety of configuration options, including a [React preset][react] and a [React Native preset][react native].

I use this sandbox in my free educational guides:

• JavaScript Express
• TypeScript Express
• React Express
• React Native Express

Usage

The sandbox may be included on your site in one of two ways:

• as a React component
• directly as an iframe

For legacy React Native-specific docs, see the v1 branch

As a React Component

If you're using React:

npm install --save javascript-playgrounds

# or

yarn add javascript-playgrounds

Then:

import Playground from 'javascript-playgrounds'

export default function App() {
  return <Playground style={{ width: 800, height: 500 }} />
}

This component is a wrapper around the iframe that handles encoding parameters for you. While it passes most props along to the iframe, it has a few extra props:

Title	Description	Default
style	The style of the div which wraps the iframe (the iframe has 100% width and height).	undefined
className	The className of the div which wraps the iframe	undefined
baseURL	Optionally, specify a custom url to load the player from. This url should not include a hash.	unpkg.com (see unpkg)

As an iframe

If you're not using React, include the sandbox in an iframe.

<iframe
  width="880"
  height="425"
  frameborder="0"
  src="//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html"
></iframe>

Configuration parameters should be passed as part of the hash string, after #data=. They should be JSON-encoded and then URI-encoded:

const parameters = { code: `console.log('Hello, world!')` }
const hashString = '#data=' + encodeURIComponent(JSON.stringify(parameters))

When used as an iframe, the easiest way to set the code parameter is to edit the code in the sandbox and copy and paste the url when you're done (the url updates automatically as you type).

For convenience, you may optionally pass the preset parameter in the url string directly, e.g. #preset=react&data=....

Parameters

The sandbox accepts the following props/parameters.

Title	Description	Default
preset	This sets reasonable defaults for other parameters. Options are javascript, react, and react-native. Experimental options are html and python (make sure to lock down your javascript-playgrounds library version when using experimental presets).	'javascript'
title	An optional title for the editor pane.	''
code	The code to show/run in the player.	The sample app
files	A map of { [filename]: code }. This will take precedence over code if given.	undefined
entry	The filename of the file that runs first. This is only relevant when showing multiple files with the files parameter. Defaults to index.js, or index.tsx if TypeScript is enabled.	'index.js' or 'index.tsx'
initialTab	The filename of the tab to show by default. This is only relevant when showing multiple files with the files parameter. Defaults to the value of entry.	entry
modules	An array of external modules to make available to the sandbox. Each object in the array should be an object containing a name and url. As a shorthand, pass a string name to load a module from unpkg (https://unpkg.com/${name}). More detail below.	[]
registerBundledModules	Should the player share its bundled React, React DOM, and React Native implementations with the running app? Disable this if you plan to pass a react, react-dom or react-native module url.	true
css	An optional CSS string to apply within the workspace .