agneym / playground

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

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

Demo

https://www.agney.dev/blog/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.

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")`
}

Why is there a @reach/tabs import?

Playground uses @reach/tabs as a dependency. We could bundle the stylesheet or inject it inline on runtime. But both those options add unnecessary code if you are already using it.

This might cause breaking changes if you have a different version of @reach/tabs but then I'm just expecting it to be stable along the road.

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 Skypack.

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

import React, { createElement } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/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 "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/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 . 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

playground's Issues

Invalid cert - security

Site https://blog.agney.dev/introducing-playground/ is blocked by AV due to invalid cert.

Kind regards

Global CSS cannot be imported from within node_modules

Hello,

First of all, thanks for the awesome project. I just installed this playground as per the instructions and when I run on a Next.js Project, I got the following error. Since the error is coming from your plugin, not sure if I can fix this on my side.

./node_modules/@reach/tabs/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules\@agney\playground\dist\editor.module.js

You can see the error on this sandbox as well: https://codesandbox.io/s/affectionate-sanne-5dj0l

doesn't work for html tags onclick event; only JS functionality works fine. When we declare the onclick event inside the html tag doesn't work, it will show some undefined error message in the browser console section.

hello

//js section
function hello(){
console.log("hi");
}

When I clicked that hello content, it would show some error message likeit does not define.

Make borders draggable

For smaller screens, the output might just be too small.

If we can drag the seperation, it could result in more area

Not able to install it in my project

Hi! I'm having some problems to install it. I'm sending you the error log so you can know what could be. It seems that React 18 might be a problem??

npm install @agney/playground
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from @agney/[email protected]
npm ERR! node_modules/@agney/playground
npm ERR!   @agney/playground@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Thanks a lot!

Adding `// @ts-nocheck` to add files referencing `theme`. This is pretty poor as a solution but one that is forced.

Adding // @ts-nocheck to add files referencing theme. This is pretty poor as a solution but one that is forced.

This is assumed to be developit/microbundle#807

Everything works fine on dev but on build, it throws Property 'theme' does not exist on type 'IProps & { children?: ReactNode; } & DefaultTheme' error

Originally posted by @agneym in #16 (comment)

Uncaught ReferenceError: key_input is not defined

After update 7.0 I get this error when typing into the playground.

I deleted Repo and cloned down the latest version just to make sure and I still get this error.

Validate the structure of initial snippet being passed in

Do this only on DEV environments.

[Feature request] Result interface support allows interaction

Problem
The Result interface does not support interaction. When I have an input box, I cannot do input testing.

Solution
Add a parameter interactive, set to true or false to support whether to allow interaction of the result interface

React demo can't resolve dependencies

Hi there!

Thanks so much for this awesome project :)

I'm running into some trouble trying to render React. I followed the instructions in the README, and it appears to successfully load the @pika/react module, but then try and fail to load react. Here's a screenshot of my network tab:

Walking through the "initiator" sequence, it looks like this:

• @pika/react-dom@latest redirects to @pika/[email protected]
• @pika/[email protected] redirects to @pika/[email protected]/source.production.js
• source.production.js starts with this code:

import React from "https://unpkg.com/react@^16.0.0?module";

That line tries to pull the package from unpkg, and it fails, since there is no ESM module for it. When I visit in-browser:

Package [email protected] does not contain an ES module

I'm guessing this is more of a Pika issue than a Playground issue, though yeah I'm curious if you've found a workaround? I had settled on using Preact, but I'm realizing a lot of the dependencies I want to use depend on React, and I don't know how to alias it in this situation, given the lack of a bundler.

Appreciate any ideas you have!

Reproduction instructions

• Go to https://blog.agney.dev/introducing-playground/
• Scroll down and copy the example React code
• Paste it into the demo at the top

Ggy

Ggy

Cool tool!

Feature Request: Option to hide unused Tabs

It would be great if this plugin could provide an option to hide unused tabs.

For example, if I have a sample code that does not require JS & Console, there is no option to disable it for now.

Currently, we need to pass empty string such as css: `` or javascript: ``

Expected solution:
When the snippet is not provided, consider it as empty and remove it from the render view.
Add an option to disable the console tab from the preview.

Thank you.