@agney/playground: a browser HTML, CSS, and JavaScript playground component

What @agney/playground does

Playground is an HTML, CSS, and JavaScript demonstration component that runs entirely in the browser and does not require loading any third-party sites. It is a React component published as @agney/playground on npm, with module formats UMD, CJS, and ESM. The intended use is adding live code demos to static blogs or documentation, where users can change code and see the output in real time.

Features listed in the README include loading previews for predefined code, autoreloading preview, allowing bare ES package imports so any library supporting ES module resolution can be imported automatically, showing console output inside the component, and controlling which tab loads by default. The component is fairly small, with total size and load time tracked on Bundle Phobia.

How module imports work in the playground

If an npm package exposes a module endpoint, it can be imported directly by name. The README gives an example importing format from date-fns. Unfortunately, not all packages support this feature. Users can search the list of supported packages through Skypack, and community packages can replicate functionality, as shown by the React example importing from cdn.skypack.dev.

When transforming JavaScript with Babel, React code with JSX requires transformJs set to true and presets such as react. The README's JSX example imports React and ReactDOM from Skypack and renders a heading into a div. This is the pattern for demonstrating React code inside the playground.

Installing and using @agney/playground

Installation uses npm.

npm install @agney/playground

The component requires an id prop, a unique identifier for the iframe, and an initialSnippet prop with the starting code. The snippet has markup, css, and javascript fields. Optional props include defaultEditorTab with values markup, css, or javascript, defaultResultTab with console or result, transformJs to transform JavaScript with Babel, presets for Babel transforms, and theme for customizing appearance.

The README example builds a snippet and renders the Playground with defaultEditorTab set to javascript and transformJs enabled.

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

The @reach/tabs import is required because Playground uses @reach/tabs as a dependency. The README explains that bundling the stylesheet or injecting it inline would add unnecessary code if the consumer already uses it.

Babel transformation and bundle size

Transforming JavaScript uses Babel Standalone, which adds a considerable size. Playground loads Babel from a CDN so it can be loaded from browser cache on change.

The transformJs prop is required if you want bare module imports. The presets prop is an array of presets for Babel to transform, such as react or es2015, and works only when transformJs is true. This two-step configuration means a developer must understand whether their snippet needs transformation before enabling it.

Limitations and when @agney/playground is the wrong tool

@agney/playground is a React component, so it is the wrong tool if you are not using React or need a framework-agnostic widget. The @reach/tabs dependency and its stylesheet import are a real integration cost for projects that do not already use that library.

The README does not document accessibility, theming beyond passing theme variables, or behavior on mobile browsers.

Recent releases are @agney/playground 2.0.0 on 2026-04-25, v0.8.1 on 2022-10-23, and v0.8.0 on 2021-10-13, so release cadence is uneven.

Alternatives and how the approach differs

The README does not name a competing playground component. The approach differs from hosted playgrounds in that it runs entirely in the browser without third-party sites, which suits static blogs and documentation. It also differs from a plain iframe embed by providing an editor, preview, and console in one component.

A hosted playground would be easier to share, but it requires an external service and network access. @agney/playground trades those capabilities for self-containment and no third-party dependency.

Maintenance, licensing and upgrade cost

The repository is not archived and the last push was on 2026-07-29. The license is MIT. The package is part of a pnpm workspace with an example app, and the workspace uses changesets for versioning and release.

Upgrade cost is driven by React and the @reach/tabs dependency, plus the Babel Standalone CDN version. The component's props are stable according to the API table, but the README notes that different versions of @reach/tabs may cause breaking changes. The MIT license allows use, modification, and redistribution, including in commercial products, but this is not legal advice and a team should have counsel review its obligations.

Editorial conclusion

Adopt @agney/playground if you write React and want embedded live HTML, CSS, and JavaScript demos with module imports. Skip it if you need a framework-agnostic widget or cannot accept the Babel bundle size. Verify the transformJs and presets props for your snippet before shipping.

Frequently asked questions

Official sources

1. agneym/playground on GitHub
2. License: MIT
3. Project website
4. README
5. Releases