Skip to content
A simple playground for HTML, CSS and JavaScript supporting module imports.
TypeScript JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Create nodejs.yml Nov 18, 2019
.vscode use 3.7 version of typescript Nov 13, 2019
assets Add root readme back Nov 18, 2019
example drag the divider across the board Dec 16, 2019
playground 0.3.2 Dec 21, 2019
.gitignore add some react in editor Nov 11, 2019
.prettierrc add supporting files Nov 11, 2019
LICENSE add supporting files Nov 11, 2019
README.md correct grammar Dec 13, 2019
package.json change repository name Nov 22, 2019
yarn.lock Bump serialize-to-js from 3.0.0 to 3.0.1 Dec 7, 2019

README.md

Playground

A simple playground for HTML, CSS and JavaScript supporting module imports.

code style: prettier

Playground is a HTML, CSS and JS demonstration component that runs entirely in the browser and does not require loading any third party sites.

Usage

Install from npm with npm install @agney/playground or yarn add @agney/playground

import Playground from "@agney/playground";

const App = () => {
  const snippet = {
    markup: `<div id=app />`,
    css: ``,
    javascript: `import { h, Component, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

const app = html\`<div>Hello World from Playground!</div>\`

render(app, document.getElementById('app'));`,
  };
  return (
    <Playground
      id="example"
      initialSnippet={snippet}
      defaultEditorTab="javascript"
      transformJs
    />
  );
};

Demo

https://blog.agney.dev/introducing-playground/

Features

  1. Load preview for predefined code.
  2. Autoreloading preview.
  3. 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.
  4. See console output in the component itself.
  5. Control the tab loaded by default for your use-case.

Applications

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

API

Props description default required
id a unique identifier for the iFrame true
initialSnippet Initial code to be displayed true
defaultEditorTab Initial editor tab to be displyed. Possible values: "markup", "css", "javascript" "markup" false
defaultResultTab Initial tab on result panel to be displayed. Possible values: "console", "result" "result" false
transformJs Transform the JavaScript using Babel. This is required if you want bare module imports false false
presets Array of presets you want Babel to transform. This works only if transformJs is true. Eg. ["react", "es2015"] false
theme Pass in the theme variables to customise the appearance Our Theme false

Format for initial snippet

{
  markup: `<h1>Title</h1>`,
  css: `h1 { color: red }`,
  javascript: `console.log("this")`
}

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.

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.

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

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?

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. You can find the total size and time on Bundle Phobia.

When transforming JavaScript it uses 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 so that the iframes for results are loaded lazily and your pages remain fast.

Contributing

This project makes use of Yarn Workspaces for development.

  1. Run yarn for installing dependencies.

  2. Run yarn start to start development on package.

  3. To start example, run yarn start-example.

Pull Requests are Welcome. Please create an issue to discuss before making a feature or large change. Thank You 😄

Credits

Icons made by Freepik from www.flaticon.com
You can’t perform that action at this time.