How does it work?

DeskThing uses a client-server architecture that allows any compatible device to connect to your computer and interact with applications hosted on it. The system leverages modern web technologies to provide a responsive experience with minimal resource usage.

Desktop Server

The DeskThing server runs on your computer, serving as the central hub for all connected devices and applications.

Architecture
Built with Electron-Vite, React, TailwindCSS, NodeJS, and ExpressJS, the server implements a listener store architecture using dependency injection. This pattern allows for efficient state management and real-time updates across the entire system.
App Management
Each app runs on its own thread, ensuring stability and isolation. The server can download both official and community apps directly from the internet, handling installation, updates, and dependency management automatically.
Client Management
The server tracks and manages all connected client devices, handling authentication, session management, and data synchronization. It can support multiple simultaneous connections, each with its own state and app configuration.
Communication
WebSockets provide real-time bidirectional communication between the server and clients, enabling instant updates and responsive interactions regardless of the number of connected devices.

Client Devices

The DeskThing client runs on any device with a modern browser, transforming it into an interactive control surface and display for your applications.

Universal Compatibility
Works on phones, tablets, computers, Car Thing devices, smart fridges, or anything that can run a browser and connect via cable or LAN to the desktop. No app installation required—just navigate to the provided URL.
Interactive Interface
The client renders app UIs and allows users to navigate between apps, trigger actions, modify settings, and interact with content—all from the connected device. The interface adapts to different screen sizes and orientations automatically.
Reactive Architecture
Built with Zustand for state management, along with Vite, React, and TailwindCSS, the client provides a fully reactive experience. UI updates happen instantly in response to state changes, without requiring page refreshes.
Offline Capabilities
The client can cache certain app data and continue displaying information even during brief connection interruptions, ensuring a smooth user experience in less-than-ideal network conditions.

Links API Layer

The Links system serves as a sophisticated API layer that simplifies communication between app components and the DeskThing ecosystem.

Unified Communication
Imported as a node module into both the app's UI and backend, Links provides a consistent interface for listening, fetching, or sending data between the server and the app's components, abstracting away the complexity of network communication.
Type Safety
The API is fully typed using TypeScript, providing autocomplete suggestions, compile-time error checking, and documentation directly in the development environment, reducing bugs and improving developer productivity.
Component Integration
Links simplifies the process of adding tasks, settings, mappings, keys, buttons, icons, and other UI elements that need to interact with the backend. Developers can define these components declaratively and Links handles the communication automatically.
State Synchronization
The system ensures that state changes are properly synchronized between the frontend and backend, maintaining consistency across the entire application even when multiple clients are connected.

Community Apps

Apps are the heart of the DeskThing ecosystem, providing specialized functionality while maintaining a consistent user experience.

Dual Architecture
Each app contains both UI and backend logic. The UI is essentially a web page with all the flexibility that web technologies offer, while the backend runs on a dedicated thread within the DeskThing server, providing access to system resources and persistent storage.
Backend Capabilities
The app backend has access to user-configurable settings, guided setup tasks, triggerable actions, and system APIs. It can perform operations that require elevated permissions or system access while maintaining security through the DeskThing sandbox.
Development Tools
Apps have access to a CLI during development that simplifies the build process, enables emulating the DeskThing environment for testing, and allows sending sample settings or data to the backend for debugging purposes without requiring a full deployment.
Distribution
Once developed, apps can be packaged and distributed through the DeskThing app marketplace or shared directly as installation files. The DeskThing server handles installation, dependency resolution, and updates automatically.

Technical Architecture

DeskThing Architecture
├── Core Runtime (Node.js + Electron)
│   ├── Resource Manager
│   ├── App Lifecycle Manager
│   └── System Integration Layer
├── Express Web Server
│   ├── Client Connection Handler
│   └── WebSocket Communication
├── React + Vite Client Interface
│   ├── Layout Engine
│   └── Theme Manager
└── App SDK
    ├── Development Tools
    ├── Dual Architecture Components
    └── Backend Capabilities API
Data Flow Process
  1. Client connects to server via local network
  2. Server authenticates client and sends available apps
  3. Client requests specific app data
  4. Server processes request, fetches data from relevant sources
  5. Data is sent back to client for rendering
  6. Real-time updates are pushed via WebSocket connection
Technology Stack
  • Server: Node.js, Electron, Express.js
  • Client: React, Vite, Tailwind CSS
  • Communication: WebSockets, REST APIs
  • Development: TypeScript for type safety
  • Packaging: Custom app bundling system

App Development Process

1. Development

Developers create apps using the DeskThing SDK, which provides a standardized interface for both frontend and backend components. Apps can be built with almost any software or framework, though the official apps use Node.js for the backend and React for the frontend.

2. Packaging

Once developed, apps are compiled, zipped, and packaged into a format that can be easily installed on the DeskThing server. This package includes all necessary assets, dependencies, and configuration files needed for the app to function properly.

3. Distribution

Packaged apps can be shared with other DeskThing users or submitted to the app marketplace. Installation is as simple as dropping the app package into the DeskThing server, which automatically handles extraction, registration, and initialization.

Setup Process Simplicity

Despite the complex technology behind it, setting up DeskThing is remarkably simple:

1

Install DeskThing on your computer with the provided installer

2

Navigate to the URL provided by DeskThing on your mobile device

3

Start using your device as a DeskThing with the installed apps

Security First

DeskThing operates exclusively on your local network, minimizing security risks associated with cloud-based solutions. All communication between the server and clients is handled within your network, ensuring that sensitive information remains private. The app validation process also includes security checks to prevent malicious code from being executed.

Efficient Resource Management

The DeskThing server includes a sophisticated resource manager that monitors and optimizes system usage. It allocates resources efficiently among running apps, ensures that background processes don't consume excessive CPU or memory, and implements throttling mechanisms when necessary to maintain overall system performance.

DeskThing transforms the complex process of device communication into a seamless experience, making it accessible to users of all technical backgrounds while providing powerful tools for developers to create innovative applications.