Introducing Playground - A Frontend Demonstration Component
Tags: react, javascript, opensource, contributorswanted
Published: 2019-11-22 16:57:51

[Playground](https://github.com/agneym/playground) is a React Component that can be used for demonstrating HTML, CSS and JavaScript code.

![Screenshot for Playground](https://thepracticaldev.s3.amazonaws.com/i/qq73y5u2hwi4e4lhi1gl.png)

<figcaption>Screenshot of Component. Link to demo at the bottom</figcaption>

It does not load from, or maintain code on any third party sites, there are no restrictions for number, and you don't have to shy away from making a small demo.

[Github](https://github.com/agneym/playground)

## Features

1. Allows bare ES package imports. This means you can add imports for any library that supports ES Module resolution and playground will automatically load it into your code.
1. Load preview for predefined code.
1. Autoreloading preview.
1. See console output in the component itself.
1. Control tab loaded by default for your use-case.

# Applications

1. Add to static blogs to present your HTML, CSS or JavaScript code.
1. Allow users to change the code and see the output in real time. This could be big in educational articles and so.

### How does module imports work?

If an NPM package exposes an endpoint for "module", then you can direcly import this package by it's name.

```js
import { format } from 'date-fns';

format(new Date(2014, 1, 11), 'yyyy-MM-dd');
```

Unfortunately, not all packages currently support this feature. You can search through an entire list of packages through [pika.dev](https://pika.dev).

You can use community created packages to replicate the functionality. For eg. React would be:

```js
import React, { createElement } from '@pika/react';
import ReactDOM from '@pika/react-dom';

ReactDOM.render(
  createElement('div', {}, 'Hello World'),
  document.getElementById('app')
);
```

### How do I demo React code with JSX?

```jsx
import Playground from "@agney/playground";

const App = () => {
  const snippet = {
    markup: `<div id=app />`,
    css: ``,
    javascript: `import React, { createElement } from "@pika/react";
import ReactDOM from "@pika/react-dom";

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById("app")
);`,
  };
  return (
    <Playground
      initialSnippet={snippet}
      defaultEditorTab="javascript"
      transformJs
      presets={["react"]}
    />
  );
};
```

## What about the bundle size?

The component is fairly small at about ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@agney/playground). You can find the total size and time on [Bundle Phobia](https://bundlephobia.com/result?p=@agney/playground).

When transforming JavaScript it uses [Babel Standalone](https://babeljs.io/docs/en/babel-standalone) which adds a considerable size. Playground loads Babel from a CDN so that it can be loaded from browser cache on change.

It uses [Chrome's Native Lazy Loading](https://web.dev/native-lazy-loading/) so that the iframes for results are loaded lazily and your pages remain fast.

[Live Demo](https://blog.agney.dev/introducing-playground/)

[See Complete Documentation](https://github.com/agneym/playground)