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.