Playground

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

Playground is a React 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: `<h1>Content</h1>`,
    css: `h1 {color: red}`,
    javascript: `console.log('this')`,
  };
  return (
    <Playground
      initialSnippet={snippet}
      defaultEditorTab="css"
      defaultResultTab="console"
    />
  );
};

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

Soon.

Contributing

Soon.

Credits

Icons made by Freepik from www.flaticon.com