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);

Development

Running the Main App

pnpm dev

Running the Documentation Site

pnpm docs

This will start a development server for the examples directory, which serves as the documentation site.

Building the Library

pnpm build

Building the Documentation Site

pnpm docs:build

Running Tests

pnpm test

Running on Desktop (NodeGUI)

pnpm desktop

Running on Mobile (NativeScript)

pnpm mobile

Connect With Us

Built happily using "Windsurf on Linux"
Sponsored by Profullstack, Inc.

License

ISC