DEV Community

nasir shahbaz
nasir shahbaz

Posted on

Novadesk: Build Desktop Widgets with JavaScript and C++ Power

Novadesk: Build Desktop Widgets with JavaScript and C++ Power

Hey dev community! 👋

I'm excited to share Novadesk - an open-source desktop widget platform that combines C++ performance with JavaScript simplicity.

What is Novadesk?

Novadesk lets you create custom desktop widgets, system monitors, and desktop enhancements using familiar JavaScript syntax, while leveraging a powerful C++ rendering engine underneath.

Default Widget

Why I Built This

I've always been fascinated by desktop customization, but existing solutions felt limited. Rainmeter required learning a custom language, Electron widgets were too heavy, and most options lacked proper system integration.

I wanted something different:

  • Performance matters. Desktop widgets run 24/7. I didn't want something eating RAM and CPU in the background. C++ with Direct2D gives us native speed with smooth animations.

  • JavaScript should be enough. Why force developers to learn a new language? If you know JS, you should be able to build a widget. QuickJS made this possible without the overhead of Node.js.

  • System access shouldn't be painful. Getting CPU usage, battery stats, or disk info shouldn't require hacks. I built native APIs so widgets can access system data cleanly.

  • Open source wins. The desktop customization community thrives on sharing. I wanted a platform where anyone could contribute widgets, improvements, and new features.

Building Novadesk taught me more about C++, Windows APIs, and software architecture than any course ever could. It started as a personal project to monitor my system stats, and grew into something the community can use and extend.

If you've ever wanted to build desktop tools but felt limited by existing options, give Novadesk a try. I'd love to see what you create.

Key Features

Dual-Language Architecture:

  • C++ Core: High-performance rendering with Direct2D, window management, and system APIs
  • JavaScript Widgets: Easy-to-write widget logic using QuickJS engine
  • Seamless Bridge: Native bindings for UI manipulation, animations, and system access

Rich UI Elements:

  • Text, Images, Buttons, Bitmaps
  • Data visualization: Bars, Histograms, Area Graphs, Rotators
  • Shape primitives: Rectangles, Ellipses, Lines, Arcs, Paths, Curves
  • Layout system with borders, shadows, and scrollable containers

Powerful APIs:

  • System monitoring: CPU, Memory, Battery, Disk
  • File system operations
  • Clipboard access
  • Web fetching
  • Registry operations
  • Environment variables
  • Command execution

Animation System:

  • Smooth easing functions
  • Keyframe animations
  • Property interpolation

Developer Tools:

  • nwm CLI for project initialization, running, and building
  • Widget packaging (.ndpkg format)
  • Built-in widget manager GUI
  • Comprehensive test suite

Quick Example

Creating a widget is as simple as:

// index.js
import {widgetWindow} from "novadesk";

var myWindow = new widgetWindow({
    id: "myWindow",
    width: 200,
    height: 200,
    script: "ui/script.ui.js",
    backgroundColor:"#ffffffff",
});
Enter fullscreen mode Exit fullscreen mode
// ui/script.ui.js
ui.addText({
    id:"hello_Text",
    x:100,
    y:100,
    width:200,
    height:200,
    text:"Hello World",
    fontSize:16,
    fontColor:"#000000",
    fontWeight:"bold",
    fontFace:"Arial",
    textAlign:"centercenter",
});
Enter fullscreen mode Exit fullscreen mode

Architecture Highlights

The project uses a layered architecture:

  1. Scripting Layer: QuickJS engine with custom modules for widget UI, system access, and file operations
  2. Domain Layer: Widget management, desktop integration, animation engine
  3. Render Layer: Direct2D-powered rendering with element hierarchy
  4. Shared Layer: Settings, logging, utilities, and system APIs

Getting Started

Prerequisites:

  • Windows OS
  • Visual Studio 2022 with C++ Desktop Development
  • Git

Setup:

git clone https://github.com/Official-Novadesk/Novadesk.git
cd Novadesk
.\Setup.ps1
Enter fullscreen mode Exit fullscreen mode

Why Novadesk?

  • Performance: C++ core ensures smooth 60fps animations and low resource usage
  • Developer Experience: JavaScript syntax makes widget development accessible
  • Extensible: Easy to add new UI elements and APIs
  • Well-Tested: 75+ integration tests covering all major features
  • Open Source: GPLv3 licensed, community contributions welcome

Links


Would love to hear your thoughts! What kind of widgets would you build with this? Any features you'd like to see added?

opensource #cpp #javascript #desktop #widgets #productivity #windows

Top comments (0)