![](\"https://user-images.githubusercontent.com/17658189/63178611-4e90d580-c042-11e9-875f-f2455148b9ae.png\")
\nA flexible playground for live editing React code\n
\n![](\"https://img.shields.io/npm/dm/react-live.svg\")
\n![](\"https://img.shields.io/npm/v/react-live.svg\")
\n![](\"http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size\")
![](\"http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size\")
![](\"https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg\"){kind=icon}
\n\n ![\"Maintenance](\"https://img.shields.io/badge/maintenance-active-green.svg\"){kind=icon}
\n\n
![](\"https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif\")
\n\nIn an actual app when you use `react-live` you will also be bundling\nBuble for transpilation, which adds `~135kB` to your bundle. This also\nincludes their dependency on `regenerate-unicode-properties`, which\nis rather large as well.\n\nWe maintain a fork of Buble which excludes the ESnext Regular Expression\ntranspilation with removes Buble's large dependency and weighs in at\na smaller size of `~51kB`, which you can find published at [`@philpl/buble`](http://npm.im/@philpl/buble).\n\nYou can alias this in Webpack or the build tool of your choice, which\nwill reduce the overall bundle size of `react-live` to about `83kB`.\n\n## API\n\n### <LiveProvider />\n\nThis component provides the `context` for all the other ones. It also transpiles the user’s code!\nIt supports these props, while passing any others through to the `children`:\n\n|Name|PropType|Description|\n|---|---|---|\n|code|PropTypes.string|The code that should be rendered, apart from the user’s edits\n|scope|PropTypes.object|Accepts custom globals that the `code` can use\n|noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`\n|transformCode|PropTypes.func|Accepts and returns the code to be transpiled, affording an opportunity to first transform it\n|language|PropTypes.string|What language you're writing for correct syntax highlighting. (Default: `jsx`)\n|disabled|PropTypes.bool|Disable editing on the `