Neutralinojs is a JavaScript Framework that makes it easy for developers to build desktop applications with HTML, CSS, and JavaScript. It supports various Mac, Windows, and Linux platforms.
In this article, you will learn about Neutralinojs, its features, how to download and install the software, as well as how to create your first app.
What is Neutralinojs?
Neutralinojs is a web browser application framework that enables you to build desktop applications with JavaScript. With Neutralinojs, designers can use HTML and CSS to build web apps that execute in their native operating system.
Neutralinojs lets you target all major platforms including Windows, Mac OS X, and Linux.
Why Neutralinojs?
There are other frameworks are available in the market to build desktop applications using HTML, CSS, and JavaScript, Like Electron and NWjs.
But in Electron and NWjs, you have to install Node.js and hundreds of dependency libraries. These make your app bloaty. Neutralinojs offers a lightweight and portable SDK which is an alternative for Electron and NW.js.
Neutralinojs doesn't bundle Chromium and uses the existing web browser library in the operating system (Eg: gtk-webkit2 on Linux).
Click here to see the difference between Web to Desktop frameworks
When you start learning Neutralinojs, you will realize that Neutralinojs answers countless use cases. For example, you can use Neutralinojs for different scenarios like Cross-platform desktop app development, Building web apps with native features, Using a cloud message broker, Connecting multiple processes by using an IPC broker. and more...
Top Features of Neutralinojs
- Portable development kit.
- No compilation is required for application developers.
- No additional dependencies are required for users.
- Native functions support: Read files, run system commands, etc.
- Less resource-intensive compared to chromium-node-based frameworks.
- Cross-platform: Neutralinojs apps work on Linux, Windows, macOS, and Web.
- Simple and flexible development environment.
Supported platforms and CPU architectures
neu CLI provides pre-built x64 binaries for Linux, macOS, and Windows. However, you build them yourself on any other operating system.
Steps to create Web Application using HTML, CSS, and JavaScript using Neutralinojs
1. Install neu CLI using the following command
$ npm install -g @neutralinojs/neu
2. Create a New App using nue:
$ neu create desktopapp
3. Run app after going to desktopapp directory:
$ cd myapp
$ neu run
4. Write JavaScript, HTML, and CSS - Insert the following code into your application resource file
HTML Code in index.html:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>NeutralinoJs</title><link rel="stylesheet" href="styles.css"></head><body><div id="neutralinoapp"><h1 id="name"></h1></div><script src="js/neutralino.js"></script><script src="js/main.js"></script></body>
</html>
Css code in style.css
html, body{
margin: 0px;
padding: 0px;
}
#neutralinoapp {
position: absolute;
width: 100%;
height: 100%;
background: #FFD700;
}
#neutralinoapp h1 {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Arial;
font-size: 48px;
padding: 0px;
margin: 0px;
}
JavaScript Code in main.js
let getUsername = async () => {
const key = NL_OS == 'Windows' ? 'USERNAME' : 'USER';
let value = '';
try {
value = await Neutralino.os.getEnv(key);
}
catch(err) {
console.error(err);
}
document.getElementById('name').innerText = `Hello ${value}`;
}
Neutralino.init();
getUsername();
Now run your application using the following command:
$ neu run
Congratulations🎉 You have created your first desktop app using HTML, CSS, and JavaScript using Neutralinojs.
To build for your application on the different platforms, we need to be able to produce portable binaries. To use them on all supported platforms, you enter the command make final binaries onto your terminal.
$ neu build --release
Here are the required resources to build a desktop application using Neutralinojs:
- Official Website: https://neutralino.js.org/
- Tutorial: YouTube
- Documentation: https://neutralino.js.org/docs/