{"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,"search_vec":"'1.2.8':53 'abil':91 'activ':65 'allow':27 'appear':62 'cadenc':60 'code':24,32,100 'complex':115,137 'compon':84 'concept':112 'configur':95,122 'current':50 'design':18 'differenti':76 'direct':33,87 'easi':78 'educ':20,72 'either':81 'embedd':12 'encod':135 'end':120 'end-us':119 'environ':16 'execut':30 'experiment':25 'express':71 'guid':73 'hash':129 'high':105 'ifram':88 'includ':77 'integr':79 'interact':1,13 'javascript':2,4,14,31,111,139 'json':132 'key':75 'librari':8 'like':43 'maintain':66 'make':103 'nativ':47 'packag':49 'page':37 'paramet':123 'pass':125 'playground':5 'pre':94 'pre-configur':93 'preset':42,102 'primarili':17 'provid':10 'purpos':21 'quick':23 'react':44,46,83 'releas':59 'requir':114 'sandbox':3,15,97 'setup':116,138 'sever':70 'showcas':108 'specif':99 'specifi':56 'strict':58 'support':39,130 'teach':110 'typescript':140 'uri':134 'url':128 'use':68 'user':28,121 'various':41 'versatil':106 'version':52 'via':126 'web':36 'within':34 'without':113","created_at":"2026-04-21T04:49:16.713424+00:00","updated_at":"2026-04-21T04:49:16.713424+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/dabbott/javascript-playgrounds","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/javascript-playgrounds","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}