marconunnari / codemark

An interactive coding environment for Javascript and Markdown.

Codemark

A web-based coding environment where you can write Javascript, see it executed and write comprehensive documentation using Markdown.

You can try it live at codemark.netlify.app

Features

• Add multiple code or text cells
• Re-order and delete cells.
• Write and preview Markdown with an easy to use editor
• Write, execute and see the output of modern Javascript inside the browser
• Import any npm package that works in the browser
• Format code with Prettier
• The code in each code editor is all joined together into one file. If you define a variable in the first cell you can refer to it in any following cell.
• Resize cells vertically or horizontally
• Built in show function for showing any javascript values and React components.
• Autosaving in the browser local storage

How the code execution works

The Javascript code is bundled with esbuild inside the browser thanks to WebAssembly, the imported packages are fetched from unpkg.com and cached inside IndexedDB for performance, the bundled code is executed safely in an isolated iframe element.

Technologies used

• React
• Redux
• Typescript
• Esbuild
• UNPKG
• Monaco editor
• Prettier

Local installation

1. Clone the project

 git clone https://github.com/marconunnari/codemark
 cd codemark

3. Install and run the frontend (http://localhost:3000)

yarn
yarn start