New Svelte NodeGui Allows Creating Native Desktop Applications with Qt and Svelte

Jamie Birch recently announced Svelte NodeGui, a framework for developing desktop applications on Windows, Linux, and MacOS. A lighter alternative to Electron, Svelte NodeGui lets developers write their applications with the Svelte front-end framework and compiler, the Qt widget toolkit, and a subset of HTML and CSS.

Svelte NodeGui documentation presented the rationale and benefits behind the new framework as follows:

Svelte NodeGui is a Svelte renderer for NodeGui, which is an efficient JavaScript binding to a cross-platform graphical user interface (GUI) library Qt. Qt is one of the most mature and efficient libraries for building desktop applications. This enabled Svelte NodeGui to be extremely memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. A hello world app built with Svelte NodeGui runs on less than 20Mb of memory.

Some developers have reported the size of a basic hello world Electron application to be as high as 115 MB or 275 MB. Svelte NodeGui manages to compile smaller executables with a better memory consumption by not shipping the Chromium web browser together with the web application.

Conversely, Svelte NodeGui applications cannot leverage browser APIs nor the full extent of HTML and CSS. A Svelte NodeGui app is a Node.js app whose user interface is made of Qt widgets (e.g., QMainWindow, QCheckBox) that can be styled with the subset of CSS supported by Qt’s stylesheet syntax and are laid out with Flexbox — a web browser’s one-dimensional layout method. Qt widgets’ surface area may be lower than that of HTML native elements, which effectively limits developers to using a Qt-supported subset of HTML. Svelte NodeGui ships with 13 tags or UI components, including buttons, image tags, editable text areas, progress bars, or native OS windows.

Qt widgets may emit events (called Signals), which can be listened to and programmatically associated with event handlers. NodeGui also provides a set of internal events that the application can listen to (QEvents). Svelte NodeGui’s documentation provides the following example that illustrates the layout mechanism and event syntax:

<script lang="ts">
  import { onMount } from "svelte";
  import { Direction } from "@nodegui/nodegui";
  import type { QPushButtonSignals } from "@nodegui/nodegui";

  let additionalButtons: string[] = [];
  let direction: Direction = Direction.LeftToRight;

  function addHandler(): void {
    additionalButtons = [...additionalButtons, `Button ${additionalButtons.length}`];
  }
  function removeHandler(): void {
    additionalButtons = [...additionalButtons.slice(0, additionalButtons.length - 1)];
  }
  function toggleDirection(): void {
    direction = ((direction + 1) % 4) as Direction;
  }

  onMount(() => {
    (window as any).win = win; // Prevent garbage collection.
    win.nativeView.show();
    return () => {
      delete (window as any).win;
    };
  });
</script>

<window bind:this={win}>
  <boxView direction={direction}>
    <button text="Add" on={addHandler} />
    <button text="Remove" on={removeHandler} />
    <button text="Toggle direction" on={toggleDirection} />
    {#each additionalButtons as additionalButton (additionalButton)}
      <button text={additionalButton}/>
    {/each}
  </boxView>
</window>

As the previous code sample shows, the regular Svelte single-file component syntax is used to describe the application logic. Svelte’s onMount lifecycle hook is used to display the native application window. The window’s content is encapsulated within the window tag and consists of four buttons that are laid out in a given direction that the user can toggle by clicking on a button. On each toggle, the user interface of the resulting desktop application will oscillate between the two following layouts:

(source: documentation)

While developers cannot use the fetch browser API, they can pick from the large existing set of Node.js packages (e.g., Node Fetch). Native Node.js modules may also be installed and used. Developers can debug their Svelte NodeGui applications with the Chromium Developer Tools, as they would a Node.js application.

The release generated an animated discussion on HackerNews. One user welcomed the new option for desktop applications while signaling remaining work:

Looks really good! At first glance, this seems like probably the best Electron alternative I’ve seen posted on HN.

Apart from the consistent GUI layer, I think an underrated reason that many teams stick with Electron is the mature tooling for cross-platform builds and upgrades. It’s pretty painful to DIY.

It looks like NodeGUI doesn’t currently support cross-compilation–is that something that’s on the roadmap? How about upgrade/auto-upgrade tooling? Code signing?

react-electron-boilerplate, neutralino, and tauri are additional options for the development of lightweight desktop applications with web technologies. Google recently released Flutter 2, a cross-platform UI Toolkit that strives to support developers writing applications for mobile, web, and desktop platforms from a single codebase. One HackerNews reader additionally mentioned Sciter.js that provides a JavaScript interface to Sciter, an embeddable HTML/CSS/script engine:

Same demo in VanilaJS and Sciter.JS : https://github.com/c-smile/sciter-js-sdk (see screenshots there).

Binary is ~5MB, and that is HTML/CSS + QuickJS + NodeJS runtime.

Versus 50MB+ of NodeGUI that is Node.JS + QT.

And SvelteJS works in Sciter.JS out of the box too.

Qt is dual-licensed under commercial and open-source licenses. The creator of the parent NodeGui project emphasized the impact of licensing on software distribution:

You can use Qt for commercial apps for free as well as long as you follow LGPL license requirements. For desktop apps, it is relatively easier to do. We need to make sure that you are dynamically linking to Qt libraries + extra license and credit info. More here.

Svelte NodeGui is an open-source project distributed under the MIT license.