This is a project to showcase the idea of developing a web-based text editor with a custom programming language, fully packed with features such as autocomplete, real-time syntax error highlights, hints, implementation of a language server as the lexer/parser/listener to process the code, and colorized theme. This project is developed with these technologies:

• TypeScript as the main programming language.
• ANTLR4 as the grammar parser, the lifeblood of the custom scripting language.
• Python to generate ANTLR4 lexers, parsers, and listeners.
• React with Next.js as the view layer / website.
• ChakraUI as the UI framework of this website.
• GitHub and GitHub Actions as the code repository and CI/CD.
• React Icons for all of these nice icons!
• Icons8 for the nice code favicon!

On a Saturday morning, I was enjoying the rain outside of my apartment in Tokyo, Japan on my balcony. While I was busy browsing Instagram , suddenly I got an email from Medium telling me my weekly recommendations. One of the recommendations was showcasing the creation of a simple text editor on the browser. I got fascinated by it and decided to give it a try with my own ways. I decided to augment it with the usage of a language server, in this case, ANTLR to provide it with some kind of faux-Intellisense, much like how you usually use Visual Studio Code with certain smart languages such as TypeScript , Go , or Python . After some time of developing and playing around with the idea, I came up with this website, a prototype of my idea.

There are definitely things that could be improved here and there, so please feel free to let me know and/or contribute to this open source project!

Several features are available on this language, and in extension, the editor:

• Autocomplete, you can press the tab or enter key like your favorite IDE when you start to type one of the keywords.
• Real-time error checking, if you have made any mistakes when writing the code, it will automatically show you the usual red lines that you see while programming on your favorite IDE. It will show the description of the error.
• It supports single-line comments, so you can write your own comments there.
• The website and the code editor supports dark mode! Click the floating action button (light bulb) on the bottom right to try it out.
• Website is intuitive and of course, responsive!
• Complete with a REST API to be connected to your web service.
• Language contains a special secret easter egg! Try to find it 😉!

Nlang is a very straightforward scripting language. The grammar of the language is ADD (INCOME | EXPENSE) NUMBER STRING. The following describes the keywords for Nlang:

• ADD is the starting keyword. You have to type this keyword every time you want to start a new declaration.
• INCOME or EXPENSE is the next keyword. You have to use this to declare whether you have made an income or an expense.
• NUMBER is the next keyword. It is not actually a keyword per-se, but you have to write the amount that you have received or expended. You have to use integers for this case.
• STRING is the final keyword. You have to use double-quotes before you start to write your reason for receiving / expending.
• // means a single-line comment. You can use this when you want to add something to describe your script.
• There is a secret keyword that you can use to show a special message when compiled! Try to find it out in the source code!

Two examples of valid Nlang expressions are:

• ADD INCOME 5000 "Sold a manga" means that you have received 5000 because you have successfully sold your manga.
• ADD EXPENSE 750 "For a grilled fish" means that you have expended 750 because you just bought a grilled fish.

Sounds quite simple, right? Let's dive in then!

Nlang has a REST Application Programming Interface (API) that you can access for free, in case you want to use it for your own, personal use.

API URL: https://nlang.vercel.app/api/parse

It accepts a Content-Type of application/json, and you need to submit a JSON object with expression property inside it, like the following code block. API only accepts POST requests at the moment. You could use the following input to try and make requests if you do not want to use the editor!