I want to use experimental feature x but Sucrase doesn't support it! Can I use babel instead?
react-live doesn't currently support configuring the transpiler and it ships with Sucrase. The current workaround for using some experimental features
Sucrase doesn't support would be to use the
transformCode prop on
LiveProvider to transform your code with
Comparison to component-playground
There are multiple options when it comes to live, editable React component environments. Formidable actually has two first class projects to help you out:
react-live. Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.
Here's a high-level decision tree:
- If you want fast and easy setup and integration, then
component-playgroundmay be the ticket!
- If you want a smaller bundle, SSR, and more flexibility, then
react-liveis for you!
Here are the various factors at play:
- Bundle size:
component-playgroundhas a larger bundle, but uses a more familiar editor setup.
react-liveis smaller, but more customized editor around
- Ease vs. flexibility:
react-liveis more modular/customizable, while
component-playgroundis easier/faster to set up.
- Extra features:
component-playgroundsupports raw evaluation and pretty-printed output out-of-the-box, while
- Error handling:
component-playgroundmight have more predictable error handling than
react-livein some cases (due to