The new Svelte NodeGUI lets you build native desktop applications using Qt and Svelte

Jamie Birch recently released Svelte NodeGUI, a framework for building desktop applications on Windows, Linux, and macOS. This is a much lighter alternative to Electron and allows us to build desktop applications using the Svelte front-end framework and compiler, as well as the Qt control toolkit, with HTM’L and a subset of CSS.

The documentation for Svelte NodeGUI shows its rationale and the benefits of using it, as follows:

Svelte NodeGUI is a Svelte to NodeGUI renderer. This is a highly efficient JavaScript library bundled with the cross-platform GUI library Qt. Qt is one of the most mature and efficient libraries for building desktop applications. This makes Svelte NodeGUI more memory and CPU efficient, in contrast to other JavaScript desktop GUI solutions. A Hello World application built with Svelte NodeGUI takes up 20 MB less memory than other GUI solutions.

Some developers have reported that a basic Hello World application built with Electron could be as large as 115 MB or even 275 MB. Svelte NodeGUI manages to compile a smaller executable with better memory without the Chromium browser package built in.

In contrast, we cannot use all of the browser apis and HTML and CSS capabilities in the Svelte NodeGUI application. The Svelte NodeGUI application is essentially a Node.js application whose user interface is built by Qt controls such as QMainWindow and QCheckBox. We can style the application using Qt style sheet language. It uses Flexbox for layout – a one-dimensional layout method for web browsers. The number and coverage of Qt controls may be smaller than the number and coverage of HTML native elements, which actually limits us — we can only use the subset of HTML that Qt supports. Svelte NodeGUI comes with 13 labels or UI components, including buttons, image labels, editable text areas, progress bars, and Windows.

Qt widgets may emit events (called signals) that you can listen for and programmatically associate with event handlers. NodeGUI also provides a set of internal events that applications can listen for (that is, QEvents). The documentation for Svelte NodeGUI provides the following example to illustrate 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>
Copy the code

As shown in the previous code example, the normal Svelte single-file component syntax is used to describe application logic. Svelte’s onMount lifecycle hook is used to display the native application window. The contents of the window are wrapped in the

TAB and consist of four buttons arranged in a given direction, which the user can switch by clicking. With each switch, the user interface of the resulting desktop application changes between the following two layouts:

(Source: Svelte NodeGUI documentation)

Although we can’t use the browser API, we can pick and choose the functionality we want from a number of existing Node.js packages (such as Node Fetch). We can also install native Node.js modules and use them. We can also use the Chromium developer tools to debug our Svelte NodeGUI applications, just like we do with Node.js applications.

The release was hotly debated on HackerNews. One user enthusiastically welcomed the new features of native desktop apps, as follows:

It looks really good! At first glance, this seems to be the best replacement I’ve seen on HackerNews.

In addition to a consistent GUI layer, I think one of the underrated reasons many teams stick with Electron is the proven tools for cross-platform builds and upgrades. DIY is a real pain.

NodeGUI does not currently appear to support cross-compilation, is this in the plans? How about the upgrade, automatic upgrade tool? Code signing?

React -electron-boilerplate, Neutralino and Tauri are also alternatives to Web technologies for developing lightweight desktop applications. Google also recently released Flutter 2, a cross-platform UI toolkit dedicated to enabling us to write applications for mobile, web, and single codelbase desktop platforms. A HackerNews reader also mentioned sciter.js, which provides a JavaScript interface for Sciter, an embeddable HTML/CSS/Script engine:

Same demo in VanilaJS and sciter.js: github.com/c-smile/sci… (See screen capture).

The binary is about 5 MB, which is HTML/CSS + QuickJS + NodeJS runtime.

This corresponds to the 50MB+ NodeGUI, i.e. Node.js + QT.

SvelteJS can also be used directly in sciter.js.

Qt offers two licenses for commercial and open source licenses. The creators of the NodeGUI project emphasize the impact of licensing on software distribution:

You can use Qt for commercial applications for free as long as you comply with the LGPL license requirements. For desktop applications, this is relatively easy to implement. We need to make sure you are dynamically linking to the Qt library and additional license and credit information. More information is available here.

Svelte NodeGUI is an open source project distributed under an MIT license.