Do you want to try React without taking the pain to setup your system? If yes, then read on, this article will cover best react online editors that let you write, run, and play with react code in your browser.
There are many editors available out there in the wild, and capabilities of an online react editor can vary from being a simple write and run shell to an enterprise grade fully functional online code editor. If you are new to the world of react and simply plan to play around and explore react, the best option is to open one of the browser based editor like Repl.it, codeSandbox, or something like codepen.
What I love about online editors is the option to pick a predefined template as starting point. All you need to do is pick the template, make edits, emulate the output, make further edits, and well, have fun.
On the other hand, if your task is to work on a professional project in reactjs, then you should ideally look at one of the feature rich desktop based react ides.
Check out this best react ide article to look at various options for enterprise grade development. Continue reading here to pick the online react editor that fits your requirement.
Which one is good for you to code React online?
This article will help you identify one that best suits your requirements, you can try out a few before narrowing down to the one. Over the last few days, I have been busy looking at various online React editors and coding environments, given below are some of the best that do the job well.
1. REPL.IT (React Online Editor)
When it comes to online editing, Repl.it is the beast and supports almost every programming language. Repl.it is arguably the best online react editor available out there in the wild, and it is free for basic use.
Repl.it is easy to use, lightweight and comes packed with features to help you play around with React without spending too much time.
Repl.it brings in ease of coding in Gatsby, React, React Typescript, React reason, Bash, Quil and well the entire javascript/npm world is available to be used here.
It used to support react native as well but the support for react native was moved to Expo Snack – covered next.
Some of the key features of Repl.It include –
- Inbuilt debugger for easy of code development
- Super performant linting
- Option to include third party packages
- Live updates with hot module reload
- And well, you can save and host your repls (projects) in the cloud, no need to save anything on the computer. Entire code runs in the cloud, login from any machine and continue from where you left.
Have a look at the below image to get a quick idea on features and pricing plans etc (as of writing), you can visit Repl.IT for latest on this.
Visit the editor here at – https://replit.com/@replit/Reactjs
2. SNACK.EXPO.IO (Dedicated React Native Editor)
Snack Expo is a dedicated online react native editor and comes packed with features to help you create your first mobile app in a matter of minutes. You can create universal apps that can run on iOS, Android as well as on the web.
You can create a native app by including required packages and libraries in the browser itself and check the live output by 1. Using an online emulator or 2. By installing client apps for android and iOS on your mobile (in Expo App) or 3. by moving the developed code on your mobile directly.
The features offered are nothing less than a powerful desktop based code editor, some of the key features include options like –
- Searching React components to drag and drop in the code files
- Checking device logs directly in the editor
- Out of the box support for ESLint
- You can shave and share snacks right from the browser, a perfect option for quick demos and getting feedback on your prototypes.
- Well, you get access to the native features including Camera, image picker, Social Authentication, File Picker, Location, Accelerometer and much more.
- Hot module reloading and remote debugging
- And well, there are many more, you can try your hands out using the link below –
Start coding here – https://snack.expo.io/
3. CODESANDBOX.IO
CodeSandbox is fast becoming an online editor of choice for small to medium scale projects development, prototyping, school projects, hobby projects and much more.
As of today, code sandbox happens to be one of the most used online react editors for creating web applications.
Like Repl.it and Expo Snack, CodeSandbox also comes packed with many features, some notable features include –
Embedding – You can create your code project and the entire sandbox can be embedded in any webpage. Viewers would be able to run your code and see it live on the web page without the need to visit CodeSandbox website. So, well, it is ultra-lightweight in this regard and doesn’t make your webpage too heavy.
Learn and Share – You can search sandboxes created by others, as of writing this article, there are around 3,248,964+ sandboxes available that one can search and play around with to learn.
NPM support – Need an npm dependency, most probably you will get out of the box, else there is an option for you to create one with ease.
Explore the code sandbox examples here at – https://codesandbox.io/explore
Check image of one of the react examples below –
Link – https://codesandbox.io/s/j0y0vpz59?from-embed
4. STACKBLITZ.COM
Another good online editor for react, this one came into existence a couple of years but I do not see it getting regular updates off late.
You can try it out for a while and see how it goes, I wouldn’t recommend making this your long term editor unless it starts getting regular updates. You can check the GitHub repo for more details –
https://github.com/stackblitz/core/
Stackblitz calls its projects as workspaces, some of the popular workspaces are for React Typescript, KendoReact, RXJS Typescript, Ionic etc and much more. You can use Ionic in combination with React.
Check out the online react code editor here: https://stackblitz.com
5. JSFIDDLE.NET
JSFiddle is one of the most stable and old timers in the market of online code editors. It has good support for react online editing as well.
The layout of jsfiddle is very clean and that is what I love about it, it comes with panels for HTML, CSS, output, project directory and React/Javascript, as in the below image.
In the HTML panel, you just add the component code, no need for the body, head and/or doctype etc.
CSS panel supports pre-processors and you can write raw CSS as well as get to SCSS.
Javascript – Babel, JSX, Pure JS – include whatever components and libraries using the project tree.
Some of the notable features include option to fork your fiddles, or other available fiddles. You can also start off with boilerplate templates provided for React, React+JSX and there are many more. JSFiddle also lets you integrate with Git, so you can fetch and save code directly in git repository while working in the JSFiddle.
Start exploring react here at – https://jsfiddle.net
6. CODEPEN.IO
Codepen was founded back in 2012 by Chris Coyier, Alex Vazquez and TIm Sabat. The aim back then was to provide a simple playground for editing and live preview of web pages created using pure HTML, CSS and Javascript.
Over the period of time, Codepen has evolved into a very powerful and feature rich tool for editing and previewing code in many programming languages and frontend frameworks including React and the entire ecosystem around React.
The layout of codepen is quite simple, if you look at the simple example below, you get panels to edit HTML, CSS and Javascript, for live preview – hot reloading and then there are options available to change and customize the layout, fonts, colors and much more.
Start react coding here – https://codepen.io
7. PLUNKER REACT EDITOR
With solid backing from ag-grid, Plunker is fast becoming one of the mainstream online code editors for front end development. They are working on the new version of plunker which is currently in Alpha and would be released soon for production use.
You can check out the alpha version of plunker here at – https://next.plnkr.co/
Check out the coding environment here at – https://plnkr.co
8. REACTLIVE
ReactLive is lesser known as of today and offers very basic features. Its main purpose is to run the code and show the output live and doesn’t seem to do anything more than that.
You can write React component class to see the output or write functional components with live reload or the JSX code live.
It also offers you to plan your demo by loading multiple components in tandem, all you need to do is use “noinline” prop and canll render.
https://react-live.netlify.com/
9. STORYBOOK
Well, we know that React is more about UI development and UI includes one or more react components. Storybook is a fantastic tool when it comes to developing user interface components in react.
You can develop independently functional react components interactively and in an isolated development environment of Storybook. You can focus on the component development independent of your app and all other app specific requirements and dependencies.
What helps the development process using Storybook is that it comes with ready to use addons that help in components design, testing, documentation and much more. The flexible API of storybook can be used further to extend the functionality.
Storybook is open source and free, it is relatively new, with 43K+ Github starts and keeps on getting regular upgrades.
Conclusion
React is a leading programming framework for developing front end applications and used for hobby projects, by students as well as for enterprise grade apps development.
Everyone into the game of frontend development wants to explore and react, and the best way is to open the browser, start writing the code and see the output live, and for that reason, an online react editor is all you need for hassle free onboarding .
Hope you liked the article, do share your experience with react online via comments. Cheers!
