base on NanUI is an open source .NET project for developers who want to create Windows desktop applications with HTML, CSS and JavaScript. <p align="center"> <img src="./artworks/WinFormiumLogo.png" width="144" /> </p> <h1 align="center">The NanUI Project</h1> <p align="center"><strong>Easily build powerful WinForm applications with HTML, CSS and JavaScript.</strong></p> # NanUI 点击[[此处]](https://gitee.com/linxuanchen/NanUI/)切换到**简体中文**仓库首页。  [](https://github.com/XuanchenLin/NanUI/actions/workflows/main.yml)   ## ⭐ About NanUI is an open source framework on .NET platform for creating user interface for WinForm Applications using HTML5, CSS3, and JavaScript. It is based on the [Xilium.CefGlue](https://bitbucket.org/xilium/xilium.cefglue/wiki/Home) project, which is a .NET wrapper around the [Chromium Embedded Framework](https://bitbucket.org/chromiumembedded/cef). If you are looking for a framework for creating a WinForm application with a modern user interface, NanUI is a good choice. you can use HTML, CSS, and JavaScript to create a user interface, and use C# to write the business logic of the application. **Please give NanUI project a star⭐ if you like it.** If this project helps, please consider funding it. [](https://paypal.me/mrjson?country.x=C2&locale.x=zh_XC) ## ✨ Recommended for developers interested in WebView2 If you think that NanUI based on CEF is too heavy, you can try the **WinFormedge** project now. It is a lightweight WinForm framework based on [WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/) as the core. Suitable for developers who do not want to integrate libcef, using WinFormege and cooperating with the WebView2 that comes with the Windows system will effectively reduce the size of the application release package. After testing, the size of the .NET 8.0 x64 + WinFormedge application packaged with ZIP compression is only 36MB, while the application packaged with NanUI is at least 125M after compression. But it should be noted that applications created with WinFormedge can only run on Windows 10 and Windows 11, while NanUI supports Windows 7 SP1 and above. - GitHub - [WinFormedge](https://github.com/XuanchenLin/WinFormedge) - Gitee - [WinFormedge](https://gitee.com/linxuanchen/WinFormedge) ## 🖥️ Requirements **For Development** - .NET Framework 4.6.2 or higher / .NET 6.0 or higher - Visual Studio 2019 or higher (VS2022 is recommended) **For Deployment** - Microsoft Windows 7 Service Pack 1 or higher - .Net Framework 4.6.2 or higher - .NET 6.0 for Windows 7 and higher. - .NET 7.0/8.0 for Windows 10 and higher. This is a **Windows Only** framework, it can not run on Linux or Mac OS. The minimum supported Windows is Windows 7 Service Pack 1, and some features (such as DirectComposition Offscreen Rendering) are not supported on Windows 7. ## 🧰 Getting Started Create a simple NanUI Application by following the steps below: **1. Create a WinForm Application by default template.** **2. Install NanUI NuGet Package** Open the NuGet Package Manager to install or use NuGet Package Manager Console, and run the following command to install NanUI nuget package: ```powershell PM> Install-Package NetDimension.NanUI ``` Install the dependencies of Chromium Embedded Framework that NanUI depends on: ```powershell PM> Install-Package NetDimension.NanUI.Runtime ``` **3. A basic NanUI application requires the following code:** Modify the code in the **Program.cs** file as follows: ```csharp using WinFormium; class Program { [STAThread] static void Main(string[] args) { var builder = NanUIApp.CreateBuilder(); builder.UseNanUIApp<MyApp>(); var app = builder.Build(); app.Run(); } } ``` Create a class implements **NanUIAppStartup** for configuring the application: ```csharp using NetDimension.NanUI; class MyAPP : NanUIAppStartup { protected override MainWindowCreationAction? UseMainWindow(MainWindowOptions opts) { // Configure the main window of this application return opts.UseMainFormium<MyWindow>(); } protected override void ProgramMain(string[] args) { // The codes in Main function should be here, this function only runs in Main process. So it can prevent the codes in Main process running in sub-processes. ApplicationConfiguration.Initialize(); } protected override void ConfigurationChromiumEmbedded(ChromiumEnvironmentBuiler cef) { // Configure the Chromium Embedded Framework here } protected override void ConfigureServices(IServiceCollection services) { // Configure the services of this application here } } ``` Create a class implements **Formium** for configuring the main window of the application: ```csharp using NetDimension.NanUI; using NetDimension.NanUI.Forms; class MyWindow : Formium { public MyWindow() { Url = "https://www.google.com"; } protected override FormStyle ConfigureWindowStyle(WindowStyleBuilder builder) { // Configure the style of the window here or leave it blank to use the default style var style = builder.UseSystemForm(); style.TitleBar = false; style.DefaultAppTitle = "My first WinFomrim app"; return style; } } ``` **4. Build and run your NanUI application** ## 📖 Documentation For more info please see - [Documentation](docs/README.md) ## 🤖 Demos - [Minimal WinFormium App](./examples/MinimalWinFormiumApp) - Introduction to the basic usage of WinFormium. ## 🔗 Third-Party References & Tools - CEF - [https://bitbucket.org/chromiumembedded/cef](https://bitbucket.org/chromiumembedded/cef) - Xilium.CefGlue - [https://gitlab.com/xiliumhq/chromiumembedded/cefglue/](https://gitlab.com/xiliumhq/chromiumembedded/cefglue) - Vanara.Library - [https://github.com/dahall/Vanara](https://github.com/dahall/Vanara) - Vortice.Windows - [https://github.com/amerkoleci/Vortice.Windows](https://github.com/amerkoleci/Vortice.Windows) - SkiaSharp - [https://github.com/mono/SkiaSharp](https://github.com/mono/SkiaSharp) - React - [https://github.com/facebook/react](https://github.com/facebook/react) - React-Router - [https://github.com/remix-run/react-router](https://github.com/remix-run/react-router) - Vite - [https://github.com/vitejs/vite](https://github.com/vitejs/vite) ## 🏆 Inspirations I was inspired by the following songs and albums when creating this version of WinFormium. - **Strandels** - Chance Of Rain - **One Direction** - What a Feeling (Made In The A.M.) - **Thomas Rhett** - VHS (Center Point Road) - **Sammy Kershaw** - She Don't Know She's Beautiful (Haunted Heart) - **Chrissy Steele** - Two Bodies (Magnet To Steele) - **Halestorm** - I Like It Heavy (Into the Wild Life) - **Joan Jett & The Blackhearts** - I Hate Myself for Loving You (Up Your Alley) ", Assign "at most 3 tags" to the expected json: {"id":"3316","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"