the commonplace notebook for eliana

react runkit alternatives

7 min read

i need alternatives to https://github.com/runkitdev/react-runkit

You can replace react-runkit with more general React-based code playground/embed components, especially if you mainly need “edit + run + preview” rather than full RunKit’s Node environment.12

React-focused embeds

  • @codesandbox/sandpack-react – CodeSandbox’s official React playground toolkit; gives you an embeddable <Sandpack /> component with live editor + preview, npm deps, theming, and composable primitives so you can style it to match your site.1
  • component-playground – A small React component (used in the linked CodeSandbox) that renders a React component plus editable source with live preview; good if your use case is specifically React UI demos rather than arbitrary Node scripts.2

General JS playground embeds

  • CodePen – Offers embeddable pens you can drop into React via <iframe>; supports HTML/CSS/JS and frameworks, but not a Node backend like RunKit.3
  • JSFiddle – Similar to CodePen, with React boilerplates available and simple embed snippets you can wrap in a React component.43
  • StackBlitz – Full online IDE with embeddable projects; works well for more complex examples, though the embed is usually iframe-based rather than a tiny component wrapper.53

Notebook-style / REPL alternatives

  • Scribbler JavaScript Notebook – Browser-based JS notebook, open source; can be self‑hosted and embedded for “notebook-like” interactive docs, though you may need to wire your own React wrapper.6
  • Nodebook – Self‑hosted, multi-language in-browser REPL; again, closer to RunKit conceptually, but you embed via its web UI rather than a ready-made React component.6

If you describe your exact needs (Node vs browser-only, need npm, need serverless endpoints vs just UI demos, SSR constraints), a more tailored pick or small wrapper component around one of these is possible. 789101112131415161718192021222324252627

⁂

Embeddable React code playgrounds to use instead of react-runkit

How to integrate SandPack into a React app Self hosted JavaScript notebook alternatives to RunKit React components for in-browser REPLs and sandboxes Compare Nodebook Scribbler and SandPack features

Sandpack stands out as the top embeddable React code playground alternative to react-runkit, offering a full in-browser editor with live preview, npm support, and customizable components. Other options like react-sandbox-editor provide lighter iframes for React snippets, while self-hosted notebooks such as Scribbler focus on browser-based JS without Node backends. Nodebook appears limited or unmaintained as a direct RunKit clone, with Scribbler and Sandpack emphasizing client-side execution over full Node REPLs.28293031

Sandpack Integration

Install via npm i @codesandbox/sandpack-react, import <Sandpack />, and add it to your app with props like template="react" for quick setup; include the CSS import for styling.3233 Customize with files, theme, options for read-only mode or custom layouts, and it handles bundling, HMR, and error overlays out-of-the-box.3428 For Hugo/static sites, use the CDN version with import maps to embed without a build step.33

Feature Comparison

FeatureSandpack (@codesandbox/sandpack-react)Scribbler JS Notebook 31Nodebook 31react-sandbox-editor 30
Self-hostedNo (CDN/cloud bundler)Yes (pure browser JS)Yes (limited docs)Yes (client-side iframe)
Node.js supportPartial (Nodebox mode, no full event loop) 35No (browser-only)Yes (aimed at Node)No (React/browser scripts)
npm depsYes (bundled/cached)NoPartialVia unpkg URLs
React componentYes (composable)Embed via iframe/webWeb UI embedYes (Sandbox HOC)
Editable previewFull editor + HMRNotebook cellsREPL-styleDual editors (script/template)
Best forDocs/demos (your Hugo sites)Pure JS notebooksNode experiments (if active)Simple React snippets

Other Embeddable Options

  • react-sandbox-editor – Lightweight React wrapper for sandboxed iframes with script/template editors; deps via CDN, good for unhosted UI demos without npm complexity.30
  • PlayCode React Playground – Online editor with embed potential via iframes; supports JSX/TS but less customizable as a component.36

Self-hosted full Node REPLs like RunKit remain scarce post-shutdown; consider Observable or JupyterLite for JS if notebooks fit better than embeds.3731 383940414243444546474849

⁂

Best self hosted React playgrounds for production use

How to embed Sandpack with custom npm dependencies Performance differences between Sandpack and RunKit Security risks of running live code in the browser How to persist user code and state in Sandpack sessions

Sandpack offers self-hosting for production via its bundler deployment, making it reliable without external dependencies, while pure client-side options like react-live suit lightweight React-only playgrounds. Custom npm deps in Sandpack work via customSetup.dependencies for public packages or bundled files/private registries for restricted ones. Browser code execution limits risks to the sandboxed iframe (no direct DOM/network access beyond your config), unlike RunKit’s server-side Node which could expose more attack surface.5051525354

Self-Hosted React Playgrounds

  • react-live – FormidableLabs’ modular React component for live-editable source + preview; fully self-contained, no bundler needed, ideal for static Hugo sites with custom scoping.50
  • Sandpack self-hosted bundler – Deploy CodeSandbox’s bundler to your domain (Vercel/Netlify) and point bundlerURL prop; production-ready with caching/CDN options.51
  • LiveCodes – Self-hostable multi-language playground (React/TS/Vue); embeddable SDK for custom interactions, supports npm via bundler.55

Sandpack Custom Deps & Persistence

Use <Sandpack customSetup={{ dependencies: { 'lodash': '^4.17.21' } }} /> for public npm; for private/custom, bundle JS into files under /node_modules/pkg/index.js or use teamId + registry.565354 Persist state with useSandpack() hook + useActiveCode to sync localStorage or URL params; wrap in <SandpackProvider files={savedFiles}> and listen to onCodeUpdate.5758 Example: const { code } = useActiveCode('/App.js'); useEffect(() => setSavedCode(code), [code]); then restore on mount.57

Performance & Security

Sandpack’s in-browser bundling (SWC/esbuild) starts in <200ms with HMR, lighter than RunKit’s full Node spins (often 1s+ cold starts), but large deps increase iframe load.5951 Browser risks: eval() in isolated iframe limits to CSP sandbox (block network/fetch by default); watch V8 exploits but no server breach possible vs RunKit’s potential RCE on their infra.5260 6162636465666768697071

⁂

Guide to self hosting Sandpack for production use

Compare Sandpack and CodeSandbox performance for large apps How to load private npm packages into Sandpack securely Strategies to sandbox untrusted user code in the browser Best storage options for persisting Sandpack session state

Self-host Sandpack’s bundler for production by cloning codesandbox-client repo, building the sandpack folder, and deploying the www assets to your static host (Netlify/Vercel/Cloudflare). Set bundlerURL in <Sandpack options={{ bundlerURL: 'https://your-domain.com' }} /> to route bundling there, enabling custom caching/registry tweaks without CodeSandbox dependency.7273 Sandpack outperforms CodeSandbox for embeds (sub-200ms cold starts via optimized Sucrase/esbuild in workers) but lags on massive apps due to in-browser limits vs CodeSandbox’s server optimizations.7475 Secure private npm by proxying via self-hosted Node server with read-only tokens, scoped to specific packages, and encrypt tokens server-side to avoid client exposure.7672

Self-Hosting Steps

  1. git clone https://github.com/codesandbox/codesandbox-client, yarn install, yarn build:deps.72
  2. yarn build:sandpack generates /www folder with bundler assets.72
  3. Deploy /www to static host; configure CORS for your domain.7772
  4. Pass bundlerURL in Sandpack props; test with large deps for perf.72

Sandboxing Strategies

  • Embed in <iframe sandbox="allow-scripts"> with strict CSP (default-src 'none'; script-src 'unsafe-eval'; worker-src blob:) to block network/storage.7879
  • Use Web Workers for eval() isolation (no DOM/window access); postMessage for controlled comms.79
  • Strip dangerous APIs via Function constructor scoping (e.g., Function('console.log("ok")') in empty context) before eval.79

Persistence Options

OptionProsConsSandpack Fit
localStorageSimple, survives reloads (~5MB)Sync issues, quota limits 80Best for single-user Hugo demos; use useActiveCode + JSON.stringify(files)
URL paramsShareable, no storage2kB limit, no large state 81Quick sessions via sandpackUrl prop
IndexedDBLarge data, structuredComplex API 80Offline/multi-file via dexie.js wrapper
Server DB (your API)Scalable, multi-deviceNetwork latency 82Custom backend for eliana.lol logins/sessions

Combine localStorage for quick saves with optional server sync for production.8083 84858687888990919293

⁂

Footnotes

  1. https://dev.to/salehmubashar/create-a-dynamic-code-playground-with-sandpack-react-3na5 ↩ ↩2

  2. https://codesandbox.io/p/sandbox/trusting-poitras-lxjnk6w7om ↩ ↩2

  3. https://dev.to/robertshaw/20-javascript-playgrounds-to-use-in-2019-455c ↩ ↩2 ↩3

  4. https://jsfiddle.net/boilerplate/react-jsx ↩

  5. https://github.com/orgs/community/discussions/141424 ↩

  6. https://alternativeto.net/software/runkit/ ↩ ↩2

  7. https://itsrakesh.com/blog/online-playgrounds-for-every-technology ↩

  8. https://codedrivendevelopment.com/posts/most-useful-sites-for-javascript-typescript-engineers ↩

  9. https://developers.thoughtspot.com/docs/react-app-embed ↩

  10. https://discuss.runkit.com/t/how-to-embed-runkit-inside-my-gitbook/178 ↩

  11. https://dev.to/devteam/ways-to-enhance-your-dev-posts-useful-embeds-1g0f ↩

  12. https://www.npmjs.com/package/react-code-blocks ↩

  13. https://playcode.io/react ↩

  14. https://github.com/runkitdev ↩

  15. https://news.ycombinator.com/item?id=16580380 ↩

  16. https://github.com/topics/runkit ↩

  17. https://blog.bitsrc.io/11-react-ui-component-playgrounds-for-2018-eef5a87a1bf8 ↩

  18. https://github.com/codesandbox/sandpack ↩

  19. https://blog.csdn.net/gitblog_00363/article/details/141150217 ↩

  20. https://codepen.io ↩

  21. https://jsfiddle.net ↩

  22. https://stackblitz.com/edit/javascript ↩

  23. https://scribbler.live ↩

  24. https://nbks.dev ↩

  25. https://github.com/runkitdev/react-runkit ↩

  26. https://www.reddit.com/r/node/comments/a8i443/runkit_like_app_that_works_in_local_environment/ ↩

  27. https://stackoverflow.com/questions/6154412/php-alternatives-to-runkit-for-intercepting-method-calls ↩

  28. https://sandpack.codesandbox.io/docs/quickstart ↩ ↩2

  29. https://sandpack.codesandbox.io/docs/getting-started ↩

  30. https://github.com/malerba118/react-sandbox-editor ↩ ↩2 ↩3

  31. https://alternativeto.net/software/runkit/ ↩ ↩2 ↩3 ↩4

  32. https://dev.to/codesandboxio/using-sandpack-for-react-libraries-documentation-4838 ↩

  33. https://github.com/runkitdev/react-runkit ↩ ↩2

  34. https://sandpack.codesandbox.io ↩

  35. https://sandpack.codesandbox.io/docs/resources/faq ↩

  36. https://playcode.io/react ↩

  37. https://itsrakesh.com/blog/online-playgrounds-for-every-technology ↩

  38. https://blog.logrocket.com/build-interactive-blog-with-react-sandpack/ ↩

  39. https://www.madlymused.com/comparing-book-writing-software/ ↩

  40. https://sandpack.codesandbox.io/docs/guides ↩

  41. https://codesandbox.io/s/repl-component-d3gcy ↩

  42. https://www.joshwcomeau.com/react/next-level-playground/ ↩

  43. https://github.com/noxstream/SelfHosted ↩

  44. https://www.reddit.com/r/osr/comments/1gumu2x/i_need_help_with_creating_a_sandbox/ ↩

  45. https://hackernoon.com/embed-an-in-browser-code-preview-into-your-react-application-with-sandpack ↩

  46. https://www.reddit.com/r/node/comments/a8i443/runkit_like_app_that_works_in_local_environment/ ↩

  47. https://preactjs.com/repl/ ↩

  48. https://github.com/ManUtopiK/awesome-stars ↩

  49. https://codesandbox.io/s/reactjs-playground-h19jh ↩

  50. https://github.com/FormidableLabs/react-live ↩ ↩2

  51. https://www.joshwcomeau.com/react/next-level-playground/ ↩ ↩2 ↩3

  52. https://www.cisecurity.org/advisory/multiple-vulnerabilities-in-google-chrome-could-allow-for-arbitrary-code-execution_2025-053 ↩ ↩2

  53. https://sandpack.codesandbox.io/docs/getting-started/usage ↩ ↩2

  54. https://sandpack.codesandbox.io/docs/getting-started/private-packages ↩ ↩2

  55. https://livecodes.io/docs/why ↩

  56. https://github.com/codesandbox/sandpack/discussions/58 ↩

  57. https://stackoverflow.com/questions/75036249/how-to-use-a-usestate-variable-for-the-value-of-sandpackcodeeditor ↩ ↩2

  58. https://github.com/codesandbox/sandpack/discussions/823 ↩

  59. https://github.com/farm-fe/performance-compare ↩

  60. https://its.ny.gov/2025-061 ↩

  61. https://www.reddit.com/r/webdev/comments/15ilml7/a_code_playground_for_react_vue_svelte_typescript/ ↩

  62. https://codesandbox.io/s/react-new ↩

  63. https://dev.to/salehmubashar/create-a-dynamic-code-playground-with-sandpack-react-3na5 ↩

  64. https://playcode.io/react ↩

  65. https://v0.rspack.rs/misc/benchmark ↩

  66. https://www.youtube.com/watch?v=5i-BAEBtM6s ↩

  67. https://betterstack.com/community/comparisons/best-sandbox-runners/ ↩

  68. https://socprime.com/blog/cve-2025-12036-vulnerability/ ↩

  69. https://www.freecodecamp.org/news/how-to-build-a-react-development-playground-using-storybook-667ef9808e9f/ ↩

  70. https://en.wikipedia.org/wiki/Live_coding ↩

  71. https://sandpack.codesandbox.io/docs/guides/hosting-the-bundler ↩

  72. https://sandpack.codesandbox.io/docs/guides/hosting-the-bundler ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  73. https://github.com/codesandbox/sandpack/issues/23 ↩

  74. https://codesandbox.io/blog/the-journey-to-a-faster-sandpack-transpiler ↩

  75. https://github.com/codesandbox/sandpack/issues/292 ↩

  76. https://sandpack.codesandbox.io/docs/getting-started/private-packages ↩

  77. https://github.com/codesandbox/sandpack/issues/1140 ↩

  78. https://www.meziantou.net/executing-untrusted-javascript-code-in-a-browser.htm ↩

  79. https://stackoverflow.com/questions/12209657/how-can-i-sandbox-untrusted-user-submitted-javascript-content ↩ ↩2 ↩3

  80. https://www.uxpin.com/studio/blog/how-to-use-react-for-state-persistence/ ↩ ↩2 ↩3

  81. https://stackoverflow.com/questions/75036249/how-to-use-a-usestate-variable-for-the-value-of-sandpackcodeeditor ↩

  82. https://sparkco.ai/blog/mastering-session-state-persistence-best-practices-for-2025 ↩

  83. https://github.com/codesandbox/sandpack/discussions/823 ↩

  84. https://www.joshwcomeau.com/react/next-level-playground/ ↩

  85. https://danilowoz.com/blog/sandpack ↩

  86. https://dev.to/salehmubashar/create-a-dynamic-code-playground-with-sandpack-react-3na5 ↩

  87. https://codesandbox.io/blog/sandpack-recap-ama ↩

  88. https://sandpack.codesandbox.io/docs/architecture/private-packages ↩

  89. https://sandpack.codesandbox.io/docs/getting-started ↩

  90. https://www.duocircle.com/email-security/vulnerable-npm-api-exposes-private-packages-why-you-need-to-be-aware-of-it ↩

  91. https://www.endorlabs.com/learn/happier-doms-the-perils-of-running-untrusted-javascript-code-outside-of-a-web-browser ↩

  92. https://sandpack.codesandbox.io/docs/advanced-usage/components ↩

  93. https://www.librechat.ai/docs/features/artifacts ↩

Graph View