{"library":"react-live","title":"React Live Playground","description":"React Live is a versatile library for creating interactive, live-editable React code playgrounds within web applications. It allows developers to render React components dynamically, display their editable source code, and provide a real-time preview of the changes. The current stable version is 4.1.8, with patch releases occurring frequently to address fixes and minor improvements, as seen in recent version bumps (e.g., 4.1.0 to 4.1.8). Key differentiators include its modular structure, allowing for flexible styling and composition of its core components (`LiveProvider`, `LiveEditor`, `LiveError`, `LivePreview`), and its focus on being production-ready. It abstracts the complexities of code compilation and error handling, making it suitable for documentation sites, component libraries, and interactive learning platforms.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-live"],"cli":null},"imports":["import { LiveProvider } from 'react-live';","import { LiveEditor } from 'react-live';","import { LivePreview } from 'react-live';","import { LiveError } from 'react-live';","import type { LiveContext } from 'react-live';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';\n\nconst code = `\nfunction Counter() {\n  const [count, setCount] = React.useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n\nrender(<Counter />);\n`;\n\nconst scope = { React, useState: React.useState };\n\nfunction MyLivePlayground() {\n  return (\n    <LiveProvider code={code} scope={scope}>\n      <div style={{ display: 'flex', gap: '20px' }}>\n        <div style={{ flex: 1 }}>\n          <h3>Editor</h3>\n          <LiveEditor style={{ minHeight: '200px', backgroundColor: '#333', color: '#fff', padding: '10px', borderRadius: '4px' }} />\n        </div>\n        <div style={{ flex: 1 }}>\n          <h3>Preview</h3>\n          <LivePreview style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '4px' }} />\n          <h3>Error</h3>\n          <LiveError style={{ color: 'red', border: '1px solid red', padding: '10px', borderRadius: '4px' }} />\n        </div>\n      </div>\n    </LiveProvider>\n  );\n}\n\nexport default MyLivePlayground;","lang":"typescript","description":"Demonstrates setting up a basic live code playground with an editable editor, a real-time preview, and error display using `react-live` components.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}