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.

0:01 Intro
1:13 Starting Files Walkthrough
2:55 Building the Code Editor
15:31 Building the Output Box

#react #javascript #programming

[ajaykris]

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

[ejirothankgod]

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

[reallions]

3:00 start of Monaco code editor
5:47 Language selector
15:28 Output box

[nprn_x]

Really appreciated this! Keep up the great effort.

[abhaykanwasi]

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

[harryshuman]

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.

I'm an embedded systems developer, and web-development is like a whole different planet.

[ayushrajpanda]

what are language versions for c and c++ sir

[ParthaSutradhar]

Can we do Javascript Debugging here within Manaco Editor?

[vannakvy]

How do we handle input? for example: name = input("Enter the name: ")

[pravachanpatra]

Is it possible to pass custom input with it? Do you have an idea of how to do this?

[mahrus.rohisyam]

Great video, Nikita, may I ask you? How do we enable the snippet when we are typing?

[hariharan-to]

Isnt a simple function instead of a useRef sufficient?

[anasstber]

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!!!

[hwapyongedouard]

nice nice, can we store the code as Jason or plain text ?

[StammeringCure]

Can we add this project to our resume? This seems preety good project

[keshvi]

Can python be included in language options?

[dnyaneshwarmuley]

Great work, How to add code auto complete feature just like java script for other languages ?

[deepakjoshi]

Hey bro really appreciate your content but can you tell me how to add c/c++ as they have not specified versions like other langugaes???😅😅

[aayushpatidar]

How can I get keyword suggestion of the selected language?

[JaiminPatel-qo]

great tutorial, but why the api is not working?