Codepen and codesandbox are great, but honestly they are slow and even more if you have a weak internet connection, so i created Codetree, an ultra-fast, high-performance online playground with automatic npm module detection.

To be able to understand why  Codetree is a powerful online editor, we will:

• Understand how codepen works.
• Find a bundler that can be executable inside our browser.
• Build a simple react app transpiler.

First, how Codepen/Codesandbox works ?

Thanks to the great instructor

Stephen Grider

, i found in one of these videos a rather detailed explanation on how Codepenworks. To simplify, they retrieves the raw user code and sends it to an Api Backend server, the server will run Babel or any other transpiler and send the result back to the application to be executed by the user’s web browser.!

The problem with this method is that a request must be made each time the user writes code in the editor (even with a debouncer), which requires more time to receive, process and convert the code before displaying it in the application. So for Codetree, i needed to do all these compilation tasks directly in the browser.

#webassembly #react #programming #typescript #javascript