How to build native C++ apps with HTML/CSS UI?

C++HtmlCssUser InterfaceDesktop Application

C++ Problem Overview


Is it possible to develop a C++ program while using HTML and CSS for the user interface? I know about programming with Javascript using a Webkit container, but I am really interested in C++ development.

I felt in love with C# WPF when I developed under Windows, but now I moved to Linux and I haven't found a good tool for using markup for interfaces. For this, I would like to mix HTML and CSS, which are very lightweight and easy to use, with C++ code, with something like WPF.

Oh, one more thing: I'm looking for desktop development, not web.

C++ Solutions


Solution 1 - C++

Yes, it is possible. What you want is a C++ web framework. You could start by looking at CppCMS—a Free High Performance Web Development Framework (not a CMS) aimed for Rapid Web Application Development.

Edit: After the question has been clarified, I think Awesomium would be a good fit for your needs.

You can achieve the same functionality by embedding WebKit (or Gecko) but as far as I know that is exactly what Awesomium does behind the scenes.

An alternative is librocket—a C++ interface middleware package designed for game applications. As you can guess from the description it is a good fit for games or real-time applications.

Solution 2 - C++

Sciter is exactly that - embeddable HTML/CSS engine with C/C++ API. Compact and multi-platform.

And check this article.

Sciter has the same feature set as WPF but uses HTML/CSS instead of XAML and uses native API.

Features out of the box:

  • HTML, CSS, SVG, aPNG (animated PNGs), image sprites,
  • <plaintext> - editor with syntax highlighting,
  • <htmlarea> - WYSIWYG HTML editor,
  • <frame type=pager> - print preview and HTML/CSS print,
  • animations,
  • HTTP client, REST/JSON client, WebSocket's, DataSockets,
  • etc.

The same application with Sciter UI running on Windows, MacOS and Linux from the same sources:

enter image description here

Disclaimer: I am an author of Sciter Engine.

2021 update: you can also use Sciter.JS that is version of Sciter that uses standard JavaScript (ES2020) script engine.

Solution 3 - C++

I think Electron would be a nice addition to the other answers.

It uses NodeJS to run a Webkit Window. Electron itself is only html/css/js, but you can use any Node Module within your Electron App - including custom, natively compiled C++ code. A possible Module to embed your C++ code would be node-gyp.

Be aware, however, that this workflow may include a little bit more JS than you would have with the other answers.

My favourite text editor, Atom, was made with Electron.

Solution 4 - C++

You can use Chromium Embedded Framework to embed HTML5 content in your app. You'll get might and speed of Chromium and ability to build GUI apps the same way you develop web applications.

Solution 5 - C++

I suggest checking out Ultralight HTML UI Engine
Not Open Source, Available for C++. OpenGL and DirectX rendering supported.

> Ultralight is the lighter, faster option to integrate HTML UI in your > C++ app.

It's made by the creator of Awesomium, who unfortunately decided to delete Awesomium.

If you need something more heavy weight I recommend taking a look at CEF. It’s a very powerful (and open source) tool.

Solution 6 - C++

I would suggest RmlUI

Its an active fork of librocket with more features. Its very modular, you can handle rendering, event handling and user input yourself (or copy one from provided examples).

Demo Game Menu Screenshot

Note: RmlUI doesn't support full HTML5/CSS3 specifications, but only a subset of it. Animations are supported tho.

Solution 7 - C++

Writing in 2021.

You can use Web assembly (https://webassembly.org/). Web assembly or WASM, allows you to write your application in any language, say C++. Then compile it to web assembly, which the browser can run. Consider wasm like any other assembly but for browsers. At the time of writing this answer, all major browsers ship with WASM engine, and hence one won't face any issues getting started.

Refer to Web assembly official docs for C++:

  1. https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm
  2. https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm

Disclaimer: No affiliation of WASM with me

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionranieriView Question on Stackoverflow
Solution 1 - C++user11617View Answer on Stackoverflow
Solution 2 - C++c-smileView Answer on Stackoverflow
Solution 3 - C++JohannesView Answer on Stackoverflow
Solution 4 - C++Vadim OvchinnikovView Answer on Stackoverflow
Solution 5 - C++tomer zeituneView Answer on Stackoverflow
Solution 6 - C++Tanishq-BanyalView Answer on Stackoverflow
Solution 7 - C++siddharth lakharaView Answer on Stackoverflow