Inside RINPn Online: Architecture Overview
As announced in the previous article, the free, scientific calculator RINPn now has an online version you can use anytime, anywhere in your web browser.
Like the download version, RINPn Online is open source. Anyone can freely modify and reuse the source code for both commercial and non-commercial purposes (licensed under the MIT License).
In this follow-up, let's take a light, high-level look at the architecture of RINPn Online and walk through a few bits of the source code.
Fire It Up First
RINPn Online launches instantly, so before diving into internals, let's bring it up and see it in action.
Open the official RINPn website:
On the page, click the "Launch Online" button to start it:
The UI looks like this. Enter an expression in the INPUT field and press "=" to evaluate:
How did it go — did it start up correctly?
Old browsers may fail to run it or may display layout issues. Some smartphones may behave similarly depending on model and generation. For now, please try it on a relatively recent PC if possible.
The Basic Architecture of RINPn Online
Now, let's step inside RINPn Online.
You can browse the source code on the GitHub repository below; we'll link to specific parts as needed throughout this article.
Overall Architecture
First things first: the basic architecture of RINPn Online is extremely simple.
The download (desktop) version of RINPn is fairly large in scope, but — as noted in the previous article — the online version pares back features quite a bit.
If you need the full feature set, just use the download version. By contrast, the online version focuses squarely on lightweight, "use it right now" scenarios — like when you suddenly need to run a calculation on the spot.
So the core structure is just three files:
- A single HTML file for the UI ( index.html )
- A TypeScript library that performs expression evaluation ( exevalator.ts )
- A TypeScript file that handles UI events and bridges them to the evaluator ( rinpn-online.ts )
→ this is effectively the central piece
The two TypeScript files are built into a single JavaScript bundle: `rinpn-online-bundled.js`.
Visualized, the architecture looks like this:
With that in mind, let's look at the three source files in turn (excluding the generated JavaScript bundle).
UI HTML File: index.html
First up, the outermost layer — the HTML for the UI:
It's fairly straightforward HTML + CSS — mostly a lot of buttons laid out on the page.
The layout is responsive, so the calculator scales with the display size. This lets a single HTML file cover both PCs and smartphones.
Concretely, it uses CSS media queries (the "@media (...) { ... }" sections) to adjust the size of the <body> area, and the panels holding the buttons expand and shrink to fit.
That said, smartphones vary widely in screen size, OS, browser, and version, so on some devices the layout may still break or feel awkward (for now). Since this is a free, quick-to-use build, we're accepting that trade-off at this stage and plan to refine it over time as we operate it.
TypeScript Library for Expression Evaluation: exevalator.ts
Now let's jump to the other end of the stack — the expression evaluation at the deepest layer. This is handled by the TypeScript file `exevalator.ts`:
This `exevalator.ts` is the TypeScript implementation of our free Exevalator library, which we also develop and publish — just like RINPn.
We build various language runtime/engine components, and among them Exevalator is a compact library focused solely on evaluating expressions. Because it's small, it's been ported to multiple languages; as of now it supports Java / Rust / C++ / C# / VB.NET / TypeScript. For RINPn Online, we're using the TypeScript version.
» For details, see the Exevalator official site
Exevalator is very easy to use. In fact, the logic in `rinpn-online.ts` — which we'll cover next — serves as a good, concrete example of how to integrate Exevalator.
Although it's a bit off-topic for today, Exevalator is also open source, and we have an article explaining its internal architecture and processing flow. If you're curious, check it out:
That said, the article is a little niche. It's light reading overall, but unless you're somewhat interested in language runtimes and parsers, it might feel a bit dense (speaking from hindsight!).
Central TypeScript Orchestrator: rinpn-online.ts
Lastly, here's the central piece: `rinpn-online.ts`.
This file mainly does three things:
- When the "=" button is pressed, it runs `calculate()` (around line 100), which creates/configures Exevalator and performs the calculation (details below).
- When number or function buttons are pressed, it appends the corresponding text to the INPUT field (around line 330).
- It implements the functions that can be used inside calculator expressions (around line 470).
That's all. Even though it's the "central" file, it's essentially a mediator between the UI and Exevalator — fairly humble work.
For reference, here's the execution flow when a calculation runs:
- 1. The user presses the "=" button.
- 2. The event handler for the "=" button (around line 300) fires:
-
calculationButton.addEventListener("click", () => { calculate(); }); - 3. That triggers the calculate() function.
- 4. Inside calculate(), Exevalator is instantiated and configured (variables/functions are registered):
-
function calculate() { ... // Instantiate Exevalator let exevalator: Exevalator = new Exevalator(); // Register functions used in expressions: sin(x), cos(x), tan(x), etc. exevalator.connectFunction("sin", new SinFunction()); exevalator.connectFunction("cos", new CosFunction()); ... // Register variables used in expressions: PI exevalator.declareVariable("PI"); exevalator.writeVariable("PI", Math.PI); - 5. The expression is passed to Exevalator's eval method, which performs the computation:
-
... const result: number = exevalator.eval(expression); - 6. The result is formatted and written to the OUTPUT field:
-
const formattedResult = formatResult(result); outputField.value = formattedResult;
That's the gist of it.
Build and Run the Source
Alright then.
We've wrapped up the architecture overview, so now that you have the internals in mind, why not grab the source and actually build/run it yourself?
If you have Git and Node.js installed, youfre minutes away. Let's do it!
1. Clone the Repository
git clone https://github.com/RINEARN/rinpn-online.git
cd rinpn-online/English # Implementation directory for the English version
2. Set Up the Environment
npm install --save-dev typescript
npm install --save-dev @types/node
npm install --save-dev esbuild
3. Build the TypeScript and Generate a Single JavaScript Bundle
This generates `rinpn-online-bundled.js`, which is also included in the repository. You may want to delete the existing file and re-generate it to confirm your build is working.
4. Launch It
To launch, open `index.html` in your browser (e.g., double-click it). The calculator UI should appear in the browser, and it will load the `rinpn-online-bundled.js` bundle.
If You Want to Modify It...
When making changes, edit the TypeScript files (.ts) rather than the JavaScript files (.js). After editing, run the build step from 3 again to update the calculator's behavior.
-
That's it for today.
Feel free to tweak and reuse the code to create your own custom calculator — have fun!
We'll continue to share RINPn updates in this section. Stay tuned!
Author of This Article
[ Founder of RINEARN, Doctor of Science (Physics), Applied Info Tech Engineer ]
Translation Cooperator
[ GPT-3.5, 4, 5, 5.1 ]
Exevalator v2.4 Released — MCP Support Added, Now Usable as an AI Calculation Tool
2025-11-15 -
We've released Exevalator v2.4, our expression-evaluation library. Starting with this version, it supports MCP, making it usable as a calculation tool for AI assistants.
Exevalator v2.3 Released — Now Usable from Python
2025-11-04 -
We've released Exevalator v2.3. Starting with this version, you can now use it from Python! With growing demand around AI tool development in mind, we share the details here.
Exevalator Updated — Easy Japanese Localization for Error Messages
2025-10-31 -
Exevalator 2.2.2 is out. You can now localize error messages to Japanese with a simple copy-and-paste, and we've included several bug fixes and minor parser adjustments.
Inside RINPn Online: Architecture Overview
2025-10-22 -
An inside look at the architecture of the recently launched online version of the RINPn scientific calculator. It's open source, so you can freely modify and reuse it to build your own web calculator (maybe!).
Meet RINPn Online: Use the Scientific Calculator Anywhere, Instantly
2025-10-21 -
RINPn, the free scientific calculator, now has an online version you can use instantly in your browser — on both PC and smartphones. Read the announcement for details.
The VCSSL Support AI is Here! — Requires a ChatGPT Plus Account for Practical Performance
2025-08-19 -
A new AI assistant for the VCSSL programming language is here to answer your questions and help with coding. This article explains how to use it and showcases plenty of real Q&A and generated code examples.
English Documentation for Our Software and VCSSL Is Now Nearly Complete
2025-06-30 -
We're happy to announce that the large-scale expansion of our English documentation with the support of AI — a project that began two years ago — has now reached its initial target milestone.
VCSSL 3.4.52 Released: Enhanced Integration with External Programs and More
2025-05-25 -
This update introduces enhancements to the external program integration features (e.g., for running C-language executables). Several other improvements and fixes are also included. Details inside.
Released: Latest Version of VCSSL with Fixes for Behavioral Changes on Java 24
2025-04-22 -
VCSSL 3.4.50 released with a fix for a subtle behavioral change in absolute path resolution on network drives, introduced in Java 24. Details inside.