Build a Browser Code Editor in React (Monaco React Editor)

In this video you'll learn how to build an in-browser code editor that supports multiple languages! We'll use the Monaco react library for the code editor, Chakra UI to style our app, and the Piston API to execute our code.
Source Code: github.com/OneLightWebDev/rea...
Monaco React Editor: www.npmjs.com/package/@monaco...
Piston API: piston.readthedocs.io/en/late...
Chakra UI: chakra-ui.com
0:01 Intro
1:13 Starting Files Walkthrough
2:55 Building the Code Editor
15:31 Building the Output Box
Support Me: www.buymeacoffee.com/nikitadev
Contact Me: [e-mail]
#react #javascript #programming

[@misbahfatma5420]

The Piston Api wont expire ever?

[@ajayh3888]

I have been looking for this the longest time.. great tuttorial!

[@ejirothankgod6585]

This is Nice...I'd try it soon. Great Work Nikita!

[@abhaykanwasi881]

Great content keep it bro... it's something totally new

[@shwetanshusinha2690]

Thank you so much for the tutorial bruv

[@harryshuman9637]

Very nice, thanks

[@sumitsinha995]

Great man😊

[@frustratedsid2312]

This tutorial is the best. Can you please make another video where we can change the highlighting of the code?

[@sihamharimech1232]

Thank u

[@myke6972]

is it possible to put like a file explorer? just like vscode? where you can drag and drop images, files, etc. also, is it also possible for monaco to run HTML CSS JAVASCRIPT and see the preview of the output?

[@anasstber7584]

Hey Nikita! Thanks so much for the videos, they are AMAZING literally! by the way, excuse that i will ask something outside of the scope of this video, and the reason is i wanna make sure you can see my comment, i just watched your custom Hook useQuery video (wonderful explanation), however what you did is very similar to the TansTack useQUery library, if you are familiar with it, and so that's why I'm confused, why would you build it instead of just doing Tanstack, there is definitely something you know that we may not. Please explain, thank so much in advance!!!

[@ayushrajpanda8950]

what are language versions for c and c++ sir

[@PRISM600]

How can i add C++ here? I tried with cpp different version but couldnt able to execute it for cpp,,it would be helpfull if you guide me with this..Thank you..

[@harryshuman9637]

Can you also do a video explaining how to setup a basic project, what tools you use, what difference is between all the Angulars, JNodes, Reacts and whatchamacallits, etc.

[@real23lions]

3:00

[@ParthaSutradhar]

Can we do Javascript Debugging here within Manaco Editor?

[@tokaa6762]

When you import "editor" at

[@aleksey6151]

W tutorial

[@aayushpatidar27]

How can I get keyword suggestion of the selected language?

[@vienong2772]

How to enter data from the keyboard?