@profullstack/sans-ui NPM

Sans UI

A cross-platform native UI library which supports iOS, Android, Windows, macOS, and Linux using NodeGUI for desktop and NativeScript for mobile. Built with Svelte 4 and web components.

See our HN announcement.

Frontends

Desktops

Mobile

Runtimes

Platforms

Architecture

Sans UI uses a universal abstraction layer that maps Web Components and Svelte to native UI widgets:

Desktop Platforms (Windows, macOS, Linux): Uses NodeGUI/Qt
Mobile Platforms (iOS, Android): Uses NativeScript
Web Platforms: Falls back to standard DOM elements

This architecture allows you to write UI code once and have it render natively on all platforms without using WebViews.

Key Features

Write Once, Run Anywhere: Use the same code across all platforms
Native Performance: Better performance than WebView-based solutions
Native Look and Feel: UI components look and behave like native widgets
Familiar API: Web Components and Svelte provide a familiar developer experience
Smaller Bundle Size: No need for a full browser engine

Component Mapping

Sans UI provides a standard UI schema that maps to both NodeGUI and NativeScript:

Component	Web API	Desktop (NodeGUI/Qt)	Mobile (NativeScript)
Button	`<sans-button>`	`QPushButton`	`Button`
Text Input	`<sans-textbox>`	`QLineEdit`	`TextField`
Label	`<sans-label>`	`QLabel`	`Label`
List View	`<sans-list>`	`QListWidget`	`ListView`
Image	`<sans-image>`	`QPixmap`	`ImageView`
Container	`<sans-container>`	`QWidget`	`StackLayout`

Installation

npm install @profullstack/sans-ui

Or with pnpm:

pnpm add @profullstack/sans-ui

Usage

Web Components

<sans-button type="primary">Click Me</sans-button>

<script>
  document.querySelector('sans-button').addEventListener('button-click', () => {
    console.log('Button clicked!');
  });
</script>

Svelte Components

<script>
  import { Button } from '@profullstack/sans-ui';
  
  function handleClick() {
    console.log('Button clicked!');
  }
</script>

<Button type="primary" onClick={handleClick}>Click Me</Button>

JavaScript API

import { createButton, getNativeUI } from '@profullstack/sans-ui';

const button = createButton({
  label: 'Click Me',
  type: 'primary'
});

const nativeUI = getNativeUI();
nativeUI.setEventHandler(button, 'click', () => {
  console.log('Button clicked!');
});

document.getElementById('container').appendChild(button);