Ever wonder how to code in JavaScript or React
directly in the browser with VScode like editor,
Automatically run the code with a blink of your eye,
document with beautiful markdown text,
and finally, share the file with others to see!

Well, wait no more!

Bundled with ESbuild, the fastest js bundler
View Demo · Report Bug · Request Feature

This is it, the project I always wanted to proudly present to the world. This took me more than 3 months of coding, searching, reading documentation, watching lots of tutorials. I wanted to build something unique. During the building proccess, I hit many roadblock, but every roadblock taught me something new.
Below I listed some of the key features I think are great about this project.

• Run in command-line interface(CLI) and install it on your machine
• Friendly VScode-like editor with auto Suggestion and syntax highlighting. (fun fact: VScode and this editor uses the same library named Monaco)
• Document your code with a beautiful markdown editor
• Autosave to your hard drive
• Run the code automatically and preview the result
• You can open multiple code(+text) windows and they are joined with the previous code. Which means you can access a variable from the previous code window
• Import any JS (and CS) library directly. No installation is required!
• Built-in Reactjs support. No need to import 'react' and 'react-dom'
• Added a show() function, which can directly display jsx or, any js value.
• Rearrange the opened window with 'up' and 'down' arrow
• Prettier format button
• Auto generates a .js file on your hard drive. You can share it with anyone

I hope to add more features in the future. If you have any specific features in mind let me know. Or better yet you can add feature forking this project. To know how, see the Contributing sections.

• Reactjs
• Typescript
• React-Redux for state management
• Expressjs for backend
• Commander for CLI
• Monaco Library
• Lerna for managing 3 different package

lots of other packages

This package is installable if you already installed nodejs on your system. Follow the instruction below to get started ⏬

You have to have nodejs installed on your machine

1. Go to your preferred directory ex: c://<folder-name>/
2. Open Command Interface of your choice. ex: cmd, powershell, git-cli etc...
3. Run the following command to install mgnote globally

   npm i -g mgnote

   Now you can run mgnote anywhere in your machine.

Run this instead for a quick run

npx mgnote serve

To start using the app, enter the following command

mgnote serve

That's it! You will see a local server link in your cli. Copy and paste the link to the browser. Finally hit enter. You will see a beautiful website appeared on your screen.

By default a file, named notebook.js will get created for you

you can optionally specify a port number (if default port is not available) and book name

mgnote serve [file-name.js] [-p ****]

example:

mgnote serve mybook.js -p 3030

If you are done editing, you can share the file (notebook.js or, mgnote whatever) created in your chosen directory with the world*

or maybe you want to save some JS function or React component and document how they work.
MG Note got you covered!

Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👤 MG Rahim

• Twitter: @mgrahimm
• Github: @melodyghost
• LinkedIn: @mgrahim

Give a ⭐️ if you like this project!