@nathan22x3/playground

A simple live codeblock for HTML, CSS and Javascript built with ReactJS.

Usage no npm install needed!

<script type="module">
  import nathan22x3Playground from 'https://cdn.skypack.dev/@nathan22x3/playground';
</script>

README

Playground

A simple live codeblock for HTML, CSS and Javascript built with ReactJS.

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

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 Learn more false

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.