{"id":15128,"library":"javascript-playgrounds","title":"Interactive JavaScript Sandbox","description":"JavaScript Playgrounds is a library that provides an embeddable, interactive JavaScript sandbox environment, primarily designed for educational purposes and quick code experimentation. It allows users to execute JavaScript code directly within a web page, with support for various presets like React and React Native. The package, currently at version 1.2.8, does not specify a strict release cadence but appears to be actively maintained, being used in several 'Express' educational guides. Its key differentiators include easy integration as either a React component or a direct iframe, and the ability to pre-configure the sandbox with specific code and presets, making it highly versatile for showcasing or teaching JavaScript concepts without requiring complex setup for the end-user. Configuration parameters are passed via the URL hash, supporting both JSON and URI encoding for complex setups.","status":"active","version":"1.2.8","language":"javascript","source_language":"en","source_url":"https://github.com/dabbott/javascript-playgrounds","tags":["javascript","typescript"],"install":[{"cmd":"npm install javascript-playgrounds","lang":"bash","label":"npm"},{"cmd":"yarn add javascript-playgrounds","lang":"bash","label":"yarn"},{"cmd":"pnpm add javascript-playgrounds","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for using the Playground React component wrapper.","package":"react","optional":true}],"imports":[{"note":"The primary way to use this library as a React component. The package ships ESM and CJS; prefer ESM imports in modern applications.","wrong":"const Playground = require('javascript-playgrounds')","symbol":"Playground","correct":"import Playground from 'javascript-playgrounds'"},{"note":"When using the Playground component in a React application, it acts as a wrapper for an iframe, handling parameter encoding automatically. Style and className props apply to the wrapping div.","symbol":"JSX usage","correct":"<Playground style={{ width: 800, height: 500 }} />"},{"note":"For non-React environments, embed directly as an iframe. Configuration parameters must be manually URI-encoded JSON in the hash. The example shows a base iframe without parameters.","symbol":"Iframe direct usage","correct":"<iframe src=\"//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html#data=\" width=\"880\" height=\"425\"></iframe>"}],"quickstart":{"code":"import Playground from 'javascript-playgrounds';\nimport React from 'react';\n\n// This component provides an interactive JavaScript sandbox.\n// It defaults to a basic JavaScript environment.\n// To configure with specific code or presets, pass props.\nexport default function App() {\n  // Example: Setting initial code\n  const initialCode = `\nconst message = 'Hello from the sandbox!';\nconsole.log(message);\n\nfunction greet(name) {\n  return 'Hello, ' + name + '!';\n}\n\nconsole.log(greet('World'));\n`;\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>My Interactive Sandbox</h1>\n      <Playground\n        style={{ width: '100%', height: '600px', border: '1px solid #ddd' }}\n        code={initialCode}\n        preset=\"react\" // Example: use the React preset\n        // You can also specify a custom base URL if needed, e.g.,\n        // baseURL=\"https://my-cdn.com/javascript-playgrounds\"\n      />\n      <p>Experiment with JavaScript, React, or other presets directly in this embedded editor.</p>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates embedding the `Playground` React component with initial code and a React preset."},"warnings":[{"fix":"For legacy React Native projects, consider staying on `javascript-playgrounds@1.x` or carefully review the `v1` branch documentation for migration if upgrading is necessary. New projects should follow current `v2+` documentation.","message":"Older versions (v1.x) had specific documentation and behavior tailored for React Native. The current main branch (v2+) has refactored aspects, and users specifically targeting legacy React Native integrations should refer to the `v1` branch.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure parameters are correctly encoded: `const hashString = '#data=' + encodeURIComponent(JSON.stringify(parameters))`.","message":"When using the sandbox directly via an `iframe`, all configuration parameters must be JSON-encoded and then URI-encoded before being appended to the URL hash. Incorrect encoding will lead to parameters not being parsed correctly by the sandbox.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set the `baseURL` prop on the React component or the `src` of the `iframe` to your custom hosted path: `<Playground baseURL=\"https://my-cdn.com/playgrounds\" />` or `src=\"https://my-cdn.com/playgrounds/public/index.html#data=\"`.","message":"The `baseURL` prop/parameter defaults to `unpkg.com` for loading the sandbox assets. If your application has strict Content Security Policy (CSP) rules or you require self-hosting for reliability/offline support, you must configure a custom `baseURL`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Apply dimensions and other styles to the wrapping `div` via the `style` or `className` prop. If direct `iframe` styling is needed, consider using the raw `iframe` method or CSS selectors targeting the `iframe` within the component.","message":"The `style` and `className` props on the React `<Playground>` component apply to the wrapping `div`, not directly to the `iframe` itself. The `iframe` inside the wrapper will take `100%` width and height of this wrapping `div`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import Playground from 'javascript-playgrounds'` is used, as `Playground` is a default export.","cause":"Attempting to use `Playground` component without a correct import in a React application.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Verify the `src` URL points to the correct `index.html` file within the `public` directory of the `javascript-playgrounds` package, e.g., `//unpkg.com/javascript-playgrounds@^1.0.0/public/index.html`.","cause":"Incorrect `src` URL for the iframe, especially if modifying `unpkg.com` or using a custom `baseURL`.","error":"Sandbox content not loading or displaying 'Page Not Found' in iframe."},{"fix":"Double-check the encoding: `const encoded = encodeURIComponent(JSON.stringify({ code: 'console.log(\"Hello\");' })); const src = `//unpkg.com/.../index.html#data=${encoded}`;`","cause":"Configuration parameters in the `iframe` `src` are not correctly JSON-encoded and then URI-encoded, or the `#data=` prefix is missing/malformed.","error":"Parameters passed to iframe are not reflected in the sandbox (e.g., initial code or preset not applied)."}],"ecosystem":"npm"}