{"id":15215,"library":"react-runner","title":"React Runner","description":"React Runner is a JavaScript library designed for executing and previewing live React code directly within a web application. Currently stable at version 1.0.5, it provides components and hooks to dynamically run arbitrary React code snippets, supporting modern JavaScript features like class fields, arrow functions for event handlers, and `import` statements. Unlike alternatives like `react-live` which use Bublé, React Runner leverages Sucrase for transpilation, offering broader compatibility with contemporary syntax and TypeScript without enforcing strict coding patterns. It facilitates scenarios such as interactive documentation, code playgrounds, and component development environments, offering features like multi-file code execution and server-side rendering support. While there isn't an explicit release cadence mentioned, the 1.x.x versioning implies ongoing maintenance within this major branch.","status":"active","version":"1.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/nihgwu/react-runner","tags":["javascript","react","component","preview","runner","live","typescript"],"install":[{"cmd":"npm install react-runner","lang":"bash","label":"npm"},{"cmd":"yarn add react-runner","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-runner","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component for displaying live-executable React code. `react-runner` is an ESM-focused library.","wrong":"const { Runner } = require('react-runner')","symbol":"Runner","correct":"import { Runner } from 'react-runner'"},{"note":"Hook alternative to the `Runner` component, offering state management and caching for live code execution.","wrong":"const { useRunner } = require('react-runner')","symbol":"useRunner","correct":"import { useRunner } from 'react-runner'"},{"note":"Utility function used within the `scope.import` object to enable multi-file local imports within the live code.","wrong":"const { importCode } = require('react-runner')","symbol":"importCode","correct":"import { importCode } from 'react-runner'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { Runner } from 'react-runner';\n\nconst initialCode = `\n  import { Button } from './MyComponents';\n\n  function MyLiveComponent() {\n    const [count, setCount] = React.useState(0);\n    return (\n      <div style={{ padding: 20, border: '1px solid #eee' }}>\n        <h2>Live Counter: {count}</h2>\n        <Button onClick={() => setCount(c => c + 1)}>Increment</Button>\n      </div>\n    );\n  }\n  export default MyLiveComponent;\n`;\n\nconst MyButton = ({ children, onClick }) => (\n  <button style={{ background: 'blue', color: 'white', padding: '10px 15px', borderRadius: '5px', border: 'none', cursor: 'pointer' }} onClick={onClick}>\n    {children}\n  </button>\n);\n\nconst App = () => {\n  const [code, setCode] = useState(initialCode);\n  const scope = {\n    React,\n    useState,\n    Button: MyButton,\n    import: {\n      './MyComponents': { Button: MyButton }\n    }\n  };\n\n  const handleRendered = () => console.log('Live component rendered!');\n\n  return (\n    <div>\n      <h3>Edit the code below:</h3>\n      <textarea\n        value={code}\n        onChange={(e) => setCode(e.target.value)}\n        rows={15}\n        cols={80}\n        style={{ width: '100%', minHeight: '200px', marginBottom: '20px', fontFamily: 'monospace' }}\n      />\n      <h3>Live Preview:</h3>\n      <Runner code={code} scope={scope} onRendered={handleRendered} />\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Illustrates dynamic execution of React code, demonstrating how to provide external components and manage imports within the `scope` for a live preview, including state and interaction."},"warnings":[{"fix":"Ensure target browser environments meet the specified `browserslist` criteria or consider alternative solutions for wider compatibility.","message":"Browser support is restricted to modern evergreen browsers (Chrome > 61, Edge > 16, Firefox > 60, Safari > 10.1). Older browsers or specific environments might require polyfills or fail to run the transpiled code.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Keep the live code relatively standard. If advanced features are needed, pre-transpile the code before passing it to `react-runner` or ensure the features are supported by Sucrase.","message":"While `react-runner` uses Sucrase for modern JS/TS features, it still performs a transpilation step on the provided code. Complex build-time transformations, specific Babel plugins, or highly experimental syntax might not be supported within the live code environment.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review the `react-runner` or `react-live-runner` documentation and adapt your code to the new API, especially for props like `scope` and handling imports. Consider using `react-live-runner` for a smoother transition if your existing `react-live` setup is complex.","message":"Migrating from `react-live` to `react-runner` might require adapting your component structure or scope definition, as `react-runner` provides a different API for component and hook usage. While `react-live-runner` exists as an adapter, direct migration needs careful review.","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 all external variables, components (e.g., `React`, `useState`), or modules that the `code` string relies on are explicitly passed within the `scope` object.","cause":"A variable, component, or module used within the live `code` string is not provided in the `scope` prop.","error":"ReferenceError: [variable] is not defined"},{"fix":"Define the `import` object within your `scope` prop, mapping module names to their corresponding values. Use `importCode(localFileContent, baseScope)` for local file imports.","cause":"Attempting to use `import` statements in the live code without correctly configuring the `import` property in the `scope` prop, or incorrect module path resolution.","error":"SyntaxError: Unexpected token 'import'"},{"fix":"Add `React` (and potentially `ReactDOM` or `useState`, `useEffect` if used as direct imports) to your `scope` prop: `scope={{ React, useState }}`.","cause":"The React library itself or `React` global object is not available in the `scope` provided to `react-runner`.","error":"React is not defined"}],"ecosystem":"npm"}