Skip to content

Instantly share code, notes, and snippets.

@ryan-roemer

ryan-roemer/compare.md

Last active September 22, 2017 20:49
Show Gist options
  • Save ryan-roemer/155b204a420ec78d8e275f7e3d6de1b3 to your computer and use it in GitHub Desktop.
Save ryan-roemer/155b204a420ec78d8e275f7e3d6de1b3 to your computer and use it in GitHub Desktop.
Download ZIP
Component Playground or React Live
Raw
compare.md

Which live React component project should I use?

There are multiple options when it comes to live, editable React component environments. Formidable actually has two first class projects to help you out: component-playground and 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-playground may be the ticket!
  • If you want a smaller bundle, SSR, and more flexibility, then react-live is for you!

Here are the various factors at play:

  • Build: component-playground uses babel-standalone, react-live uses bublé. (Note: react-live might make transpiler customizable in the future).
  • Bundle size: component-playground has a larger bundle, but uses a more familiar editor setup. react-live is smaller, but more customized editor around prism.
  • Ease vs. Flexibility: react-live is more modular/customizable, while component-playground is easier/faster to set up
  • SSR: component-playground is not server-side renderable, react-live is.
  • Error handling: component-playground might have more predictable error handling than react-live in some cases (due to react-dom, although this might change with React 16).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment