# kusti8/proton-native

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/kusti8-proton-native).**

10,894 stars · 352 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/kusti8/proton-native
- Homepage: https://proton-native.js.org
- awesome-repositories: https://awesome-repositories.com/repository/kusti8-proton-native.md

## Topics

`cross-platform` `desktop` `js` `native` `react`

## Description

Proton Native is a cross-platform desktop framework that compiles React code into native applications for Windows, macOS, and Linux. It enables developers to build desktop applications using the same component syntax and patterns as React Native, with the ability to reuse existing React Native components with minimal modifications. The framework integrates a flexbox layout engine for positioning native desktop widgets and embeds the Node.js runtime for direct filesystem and system-level access.

The framework translates React component trees into native desktop widgets through a bidirectional bridge architecture, where each React component maps to a specific native widget like QPushButton or QLabel. It provides a unified component API that compiles to platform-specific native widgets through a plugin-based backend system, while coordinating asynchronous React updates with the native event loop using a shared message queue. The development environment supports hot reloading, applying code changes instantly to running desktop applications without restarting the process.

Proton Native integrates seamlessly with standard React ecosystem libraries like Redux and allows using any Node.js package directly in the application without compatibility workarounds. The framework's documentation covers installation, component API reference, and development workflow setup for getting started with cross-platform desktop application development.

## Tags

### Mobile Development

- [React Desktop App Development](https://awesome-repositories.com/f/mobile-development/react-native-applications/desktop-ports/react-desktop-app-development.md) — Building cross-platform desktop applications for Windows, macOS, and Linux using React components and patterns.
- [Desktop Ports](https://awesome-repositories.com/f/mobile-development/react-native-applications/desktop-ports.md) — Create cross-platform desktop applications using the same component syntax and patterns as React Native. ([source](https://cdn.jsdelivr.net/gh/kusti8/proton-native@master/README.md))
- [Desktop Adaptations](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components/desktop-adaptations.md) — Port existing React Native components to desktop platforms with few or no changes. ([source](https://proton-native.js.org/))

### Web Development

- [React Desktop Frameworks](https://awesome-repositories.com/f/web-development/cross-platform-desktop-frameworks/react-desktop-frameworks.md) — Builds cross-platform desktop applications for Windows, macOS, and Linux using React components and patterns.
- [Cross-Platform Desktop Frameworks](https://awesome-repositories.com/f/web-development/cross-platform-desktop-frameworks.md) — An environment that compiles React code into native desktop applications for Windows, macOS, and Linux.
- [React Libraries](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-libraries.md) — Use standard React ecosystem libraries like Redux without needing special adapters. ([source](https://cdn.jsdelivr.net/gh/kusti8/proton-native@master/README.md))

### Development Tools & Productivity

- [Hot Code Reloading](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading.md) — Update the running application instantly when source files are modified without a full restart. ([source](https://proton-native.js.org/))
- [Desktop Hot Reloaders](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/desktop-hot-reloaders.md) — A development environment that applies code changes instantly to running desktop applications without restart.
- [React](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/desktop-hot-reloaders/react.md) — Applies code changes instantly to running desktop applications without restarting the process.
- [WebSocket-Based Module Replacement](https://awesome-repositories.com/f/development-tools-productivity/platforms-runtimes-language-services/hot-module-replacement/websocket-based-module-replacement.md) — Replaces component modules in memory without restarting the native process, using a WebSocket-based update stream and incremental re-rendering.

### Programming Languages & Runtimes

- [Node.js Desktop Integration](https://awesome-repositories.com/f/programming-languages-runtimes/node-js-desktop-integration.md) — Using standard Node.js packages for filesystem, process, and system-level functionality inside a desktop application.
- [Node.js Runtime Integration](https://awesome-repositories.com/f/programming-languages-runtimes/node-js-runtime-integration.md) — Embeds the full Node.js runtime alongside the React renderer, enabling direct access to filesystem, process, and native modules.
- [React-Native Event Loop Bridges](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/concurrency-models/asynchronous-event-loops/event-loop-backends/react-native-event-loop-bridges.md) — Coordinates asynchronous React updates with the native event loop using a shared message queue and batched state synchronization.
- [Node.js Package Compatibility](https://awesome-repositories.com/f/programming-languages-runtimes/node-js-package-compatibility.md) — Use any standard Node.js package directly in the application without compatibility workarounds. ([source](https://cdn.jsdelivr.net/gh/kusti8/proton-native@master/README.md))

### Software Engineering & Architecture

- [Bridge Architectures](https://awesome-repositories.com/f/software-engineering-architecture/bridge-architectures.md) — Translates React component trees into native desktop widgets through a bidirectional JSON message protocol between JavaScript and native processes.
- [Cross-Platform Desktop Development](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/application-targets-domains/cross-platform-desktop-development.md) — Building desktop applications for Windows, macOS, and Linux from a single React codebase without platform-specific rewrites.
- [Desktop Widget Backends](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/desktop-widget-backends.md) — Provides a unified component API that compiles to platform-specific native widgets through a configurable plugin-based backend architecture.

### User Interface & Experience

- [Plugin-Based Backend Abstractions](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-abstractions/plugin-based-backend-abstractions.md) — Provides a unified component API that compiles to platform-specific native widgets (Windows, macOS, Linux) through a plugin-based backend system.
- [Desktop Flexbox Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines/desktop-flexbox-layouts.md) — Positioning and styling desktop interface elements using CSS flexbox layout properties.
- [JavaScript](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines/javascript.md) — Implements CSS flexbox layout calculations in JavaScript, then passes computed positions to native widgets for pixel-perfect rendering.
- [Native Rendering Bridges](https://awesome-repositories.com/f/user-interface-experience/native-rendering-bridges.md) — Translates React component trees into native desktop widgets through a bidirectional JSON message protocol between JavaScript and native processes.
- [React-to-Native Widget Mappings](https://awesome-repositories.com/f/user-interface-experience/native-widget-mapping/react-to-native-widget-mappings.md) — Each React component maps to a specific native desktop widget (e.g., QPushButton, QLabel) via a declarative configuration layer.
- [Desktop](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines/desktop.md) — Implements CSS flexbox layout calculations in JavaScript for positioning native desktop widgets.
- [Flexbox](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/flexbox.md) — Lay out and style user interface elements using Flexbox and standard CSS properties. ([source](https://proton-native.js.org/))