@nathan22x3/playground v1.0.1

This repo is mostly clone from agney/playground repo. The difference is that it is not written in TypeScript but JavaScript.

You guys can learn more in his repo I've mentioned above.

Install

# via npm
npm install @nathan22x3/playground

# via yarn
yarn add @nathan22x3/playground

Usage

import Playground from "@nathan22x3/playground";
/* Why is there a tabs import? https://github.com/agneym/playground#why-is-there-a-reacttabs-import*/
import "@reach/tabs/styles.css";

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
    />
  );
};

API

Format for initialSnippet prop

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

Features

1. Load preview for predefined code.
2. Auto reloading 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.