Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nodegui/svelte-nodegui

Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀
https://github.com/nodegui/svelte-nodegui

cross-platform desktop-applications nodegui qt svelte

Last synced: about 22 hours ago
JSON representation

Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀

Host: GitHub
URL: https://github.com/nodegui/svelte-nodegui
Owner: nodegui
License: mit
Created: 2021-01-29T18:29:07.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2023-03-26T12:50:03.000Z (over 1 year ago)
Last Synced: 2024-12-05T09:50:18.882Z (8 days ago)
Topics: cross-platform, desktop-applications, nodegui, qt, svelte
Language: TypeScript
Homepage: https://svelte.nodegui.org/
Size: 9.32 MB
Stars: 2,844
Watchers: 31
Forks: 55
Open Issues: 23
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-github-repos - nodegui/svelte-nodegui - Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀 (TypeScript)
awesome-list - svelte-nodegui - platform desktop applications with native Svelte + powerful CSS-like styling.🚀 | nodegui | 2502 | (TypeScript)
awesome-fe-resources - svelte-nodegui

README

        # Svelte NodeGUI

[![Join the NodeGUI community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/nodegui)

[![Join the Svelte community on Discord](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)

[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)

[![JS Party #96](https://img.shields.io/badge/JS%20Party-%2396-FFCD00.svg)](https://changelog.com/jsparty/96)

[![Build and Test status](https://github.com/nodegui/nodegui/workflows/.github/workflows/test.yml/badge.svg)](https://github.com/nodegui/nodegui/actions)

Build **performant**, **native** and **cross-platform** desktop applications with **Node.js** and **Svelte**.🚀

Svelte NodeGUI is powered by **Svelte** and **Qt5** 💚 which makes it CPU- and memory-efficient when compared to Chromium-based solutions like Electron. Svelte NodeGUI is essentially a [Svelte](https://svelte.dev) renderer for [NodeGUI](https://github.com/nodegui/nodegui).

 If you are looking for the **React**-based version, check out: **[React NodeGUI](https://github.com/nodegui/react-nodegui)**.

 If you are looking for the **Vue**-based version, check out: **[Vue NodeGUI](https://github.com/nodegui/vue-nodegui)**.

Visit: https://svelte.nodegui.org for docs.



## How does it look?

















**More screenshots?**

### More Examples:

https://github.com/nodegui/examples

---

## Features

-   🧬 Cross platform. Should work on major Linux flavours, Windows and macOS.

-   📉 Low CPU and memory footprint. Current CPU stays at 0% on idle and memory usage is under 20 MB for a Hello World program.

-   💅 Styling with CSS (includes actual cascading). Also has full support for Flexbox layout (thanks to Yoga).

-   ✅ Complete Node.js api support (Currently runs on Node v12.x - and is easily upgradable). Hence has access to all Node.js-compatible npm modules.

-   🎪 Native widget event listener support. Supports all events available from Qt / NodeJs.

-   💸 Can be used for Commercial applications.

-   🕵️‍♂️ Good Devtools support.

-   📚 Good documentation and website.

-   🧙‍♂️ Good documentation for contributors.

-   🦹🏻‍♀️ Good support for dark mode (Thanks to Qt).

-   🏅 First class TypeScript support. (Works on regular JS projects too 😉).

## Getting Started

-   Check out [svelte-nodegui-starter](https://github.com/nodegui/svelte-nodegui-starter) to get up and running with your own Svelte NodeGUI app!

-   Read through the [Svelte NodeGUI docs](https://svelte.nodegui.org/)

-   Check out the examples: https://github.com/nodegui/examples.

-   [Tutorial: Build a native Meme Search Desktop app with Javascript (NodeGUI) and Giphy API](https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/)

## Docs for contributing

### Svelte NodeGUI

File issues and get in touch (e.g. on the [Svelte Discord](https://svelte.dev/chat)'s `#nativedev` channel), and we can guide you to something broken that needs fixing!

### NodeGUI

Looking to contribute to NodeGUI? If you wish to implement a new widget/add more features and need help understanding the codebase, you can start here: [Contributing developer docs](https://github.com/nodegui/nodegui/tree/master/website/docs/development).

Please read https://github.com/nodegui/.github/blob/master/CONTRIBUTING.md

## Building

```sh

npm run build

```

Optionally set `QT_INSTALL_DIR='/path/to/qt'` environment variable to build using your own version of Qt.

## Updating docs

### Generating docs from source code

The docs generation process is currently a manual operation (text edit everything yourself). The docs are a copy-paste of the React NodeGUI docs, with some text replacement. We're also carrying around a slight fork of the React NodeGUI source in the codebase. In future we hope to clean up this workflow and make it more automatable using `typedoc` just like the original React NodeGUI workflow.

### Deploying docs to GitHub Pages

```sh

cd website && GIT_USER= npm run deploy

```

## Funding

As no funding infrastructure is in place for Svelte NodeGUI specifically, please consider supporting [NodeGUI](https://github.com/nodegui/nodegui) instead, which would be just as productive!

## Special Thanks

- [NodeGUI logo: Thanks to Vishwas Shetty from the Noun Project.](https://github.com/nodegui/nodegui/blob/master/extras/legal/logo/thanks.md)

- [halfnelson](https://github.com/halfnelson) for [Svelte Native](https://github.com/halfnelson/svelte-native), which Svelte NodeGUI forks (as it is an excellent example of building a custom Svelte renderer).

- [rigor789](https://github.com/rigor789) for [NativeScript Vue Next](https://github.com/rigor789/nativescript-vue-next), from which Svelte NodeGUI takes (and adapts) its DOM implementation.

- [a7ul](https://github.com/a7ul) for creating [NodeGUI](https://github.com/nodegui/nodegui) and unwittingly teaching me [how to build renderers](https://blog.atulr.com/react-custom-renderer-1/) in the first place.

## Code of Conduct

https://github.com/nodegui/.github/blob/master/CODE_OF_CONDUCT.md

## License

MIT

## Maintainers ✨

People maintaining this project.

  

    
_{Jamie Birch}

  

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Jamie Birch}
💻

    
_{Saurav Sahu}
💻

    
_{Matthieu PERREIRA DA SILVA}
💻

    
_{Jonas Grunert}
💻

    
_{LukeyBeachBoy}
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!