livecodes VS react-monaco-editor

Please ⭐ star the project on GitHub if you like it, and follow LiveCodes on Twitter to be notified with latest updates!

In the evolving landscape of education, teachers and students are continuously seeking effective learning tools. The need for such tools is even more pronounced in the sphere of programming. The complexity of setting up development environments and the steep learning curve of programming languages are often challenging. This is where LiveCodes steps in, offering a seamless solution that makes programming accessible, interactive, and engaging while remaining free (and open-source) with unlimited usage. The versatility of LiveCodes makes it an ideal tool for schools, colleges, and coding bootcamps, as well as course websites and online learning platforms.

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. Check out the announcement for details.

I'm using https://github.com/live-codes/livecodes to just move it all completely into the client

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

At last, it feels great to build apps that you and others actually use. I plan to continue building and adding features/fixes to LocalPen. It would be great to know your opinion, comments, advice, ideas and, even better, contribution.

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

Here I am introducing LocalPen. A project that I started as a small module to be added to the website, but actually has grown much larger and deserved to be a separate project.

First, we’ll add the directive and necessary imports. We’ll use @monaco-editor/react, which is a nifty React component for Monaco. We’ll also import useState and useEffect hooks to help manage state.

The react-monaco-editor package was the first package available for embedding with React and is still actively maintained. However, it requires you to make various webpack changes which are very inconvenient, especially when working with React. This has made the package decline in popularity, as shown by the number of weekly downloads compared to the @monaco-editor/react package.

Finally, I came across a comment on Reddit suggesting Monaco because VSCode is built on top of it.