{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-runner"],"cli":null},"imports":["import { Runner } from 'react-runner'","import { useRunner } from 'react-runner'","import { importCode } from 'react-runner'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}