Playground

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

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

Soon

Features

1. Autoreloading preview for change
2. Can load preview for predefined code.
3. Allows for ES module imports. This means you can add imports for any library that supports ES Module resolution and playground will automatically load it into your code.

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

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");

Unfortuantely, 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")
);

What about the bundle size?

This component uses Babel Standalone and it adds a considerable amount to the total bundle size. You can find the total size and time on Bundle Phobia

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