Build a Code Text Editor in React in 10 Minutes (Syntax Highlighting, Dark Theme)

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we use the VSCode Monaco Editor to create an amazing code text editor for our React applications. This video is also great for anyone who wants to make a text editor, as Monaco can be used for regular text as well. This is a great introduction into working with the Monaco Editor. This video is beginner friendly, and is also paced well for intermediate programmers looking to add code text editing to their applications. Monaco Editor is MIT licensed which means you can provide users with a VSCode like experience for 100% free and for business use as well. This is a great introduction to Monaco editor and rich text editors in general.
Project Code: github.com/coopercodes/Monaco...
0:00 Intro
0:30 Create Vite App
1:48 Create Editor
4:45 Create choosing file logic
8:06 Get Monaco Editor value
10:07 Thanks for watching!

[@tsolanoff]

Great! It also might be improved with adding backend service that receives a post request with the value of the editor. This would allow to store/load the code, execute and return a result, or even create a file to download.

[@whileforloops5671]

awesome man thanks for the great tutorial

[@paulthomas1052]

Great tutorial as usual - didn't realise you could leverage VSCode functionality with Monaco Library - great stuff !

[@CooperCodes]

Yeah its pretty cool, and surprisingly easy to implement! Considering making a technical blog full stack project which features code sections using Monaco, because it really just takes a couple minutes which is so great for all the functionality it has.

[@paulthomas1052]

@@CooperCodes Thanks for the reply - great stuff !

[@edwarda7096]

@@CooperCodeshi, did you ever get to writing that blog?
Also, would it be better in the long run setting up monaco from scratch instead of using the react library?

[@WDZ24]

Awesome

[@sonyarianto]

nice and simple, do you have a SvelteKit integration with Monaco?

[@lifeisbeautifu1]

Very cool.

[@CooperCodes]

Thanks for watching Alexey :)

[@myke6972]

can i add output? like for example in html and css, can i add output?

[@mahtabvariyani]

no One could explain it better than you

[@user-vu1mt9el4c]

ㅁㄴㅇ