DEV Community

Raed Bahri
Raed Bahri

Posted on

I want to integrate a code editor in my platform

I'm working on something like Codecademy, Progate.

and I've been looking for some code editor APIs so I can integrate it into my react e-learning platform.
I want a code editor that supports customization. where every lesson has his own pre-written code ready.

don't hesitate if you can help.

Top comments (8)

Collapse
 
akashkava profile image
Akash Kava

Check monaco editor, it is what powers visual studio code and typescript playground. It is used by gitlab and code places.

Collapse
 
lord007tn profile image
Raed Bahri

Does monaco support compiling and showing the result. Like in codecademy when you type html and css there is a section aside that show the compiled code ???

Collapse
 
akashkava profile image
Akash Kava

It’s a basic editor will compilation feature, you can watch and create your own UI to display errors.

Thread Thread
 
lord007tn profile image
Raed Bahri

Link please?

Thread Thread
 
akashkava profile image
Akash Kava

microsoft.github.io/monaco-editor/...

I have created my own from this, you can check View Source and see what all things are implemented. webatoms.in/play

Collapse
 
saswatamcode profile image
Saswata Mukherjee

Really like Ace editor for these kinds of things! github.com/ajaxorg/ace

Collapse
 
lord007tn profile image
Raed Bahri

Does ace support compiling and showing the result. Like in codecademy when you type html and css there is a section aside that show the compiled code ???

Collapse
 
saswatamcode profile image
Saswata Mukherjee

You need to run the code by yourself. Ace just provides the UI required for giving a code editor like feel. If it's html/css/js you can "run" and show the output in your frontend itself. But if you plan on something like C++/Py/Go, you'd need a separate backend which supports secure remote code execution, preferably something containerised.