102

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.

ranieri
  • 2,030
  • 2
  • 21
  • 39
  • 1
    You can build cross-platform desktop apps with C++ backend and HTML/CSS/JS frontend using Molybden SDK: https://teamdev.com/molybden You can even call C++ functions from JavaScript and vice versa with automatic types conversion. Read more at https://docs.molybden.io/development/javascript-to-cpp.html – Vladimir Jul 27 '23 at 11:34

6 Answers6

50

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.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
  • 3
    But would this compile for an executable? I'm looking for desktop, not web. – ranieri Jul 07 '13 at 23:07
  • 5
    Do you want the user to be able to fire up a browser and navigate to http://localhost/ and use the interface of your application? Or do you want the user to open an executable and be presented with the web interface? –  Jul 07 '13 at 23:10
  • 18
    @RobertDinu I think he wants to build a desktop application with C++ and create the user interface with HTML/CSS – Leonardo Arroyo Jul 07 '13 at 23:12
  • I can see how this would save a lot of time. Would this approach lead to issues at any point? – expiredninja Apr 18 '15 at 03:32
  • @expiredninja the only potential issue I can see is the need for native elements, but they offer drop in components like Unity. I imagine you could extend it to do what you need. – Jason Stallings Sep 09 '15 at 14:28
  • Check out Coherent Labs' Gameface - https://coherent-labs.com/products/coherent-gameface/. Even though it's billed as game UI "middleware", you can build cross-platform apps with it. – Matthew Dean Jan 29 '19 at 20:20
42

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.

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • 2
    I am a beginner in c++ but I find the documentation scanty and scary for beginners..the documentation should start with how to run the demos in codeblocks or even a shell to see if it works ...Kindly add some more marketing effort in your project – repzero Jun 15 '16 at 23:16
  • @repzero check this article http://www.codeproject.com/Articles/859098/Sciter-multiplatform-embeddable-HTML-CSS-scripting , I think it is suitable for C++ beginners. – c-smile Jun 16 '16 at 17:10
  • 2
    @repzero As of codeblocks, just open {sciter-sdk}/demos/usciter/usciter.cbp in that IDE, select Release64 target and click on "Build and Run" button - you should see the app running. – c-smile Jun 16 '16 at 17:23
  • @c-smile thanks for some guidance here.when I tried to running the project in codeblocks I get a fatal error "gtk/gtk.h no such file or directory" this error was emanating from the include statement in the "sciter-x-types.h" header file...I am running debian jessie..I have a folder named gtk which contains gtk.h file. this folder is located in '/user/include/gtk-2.o/gtk'..any advice? – repzero Jun 16 '16 at 23:05
  • On Linux Sciter requires GTK3. If you want to build samples then you will need gtk development package, try `sudo apt-get install libgtk-3-dev` – c-smile Jun 16 '16 at 23:52
  • Very interesting project. For my need there is only one concern. Is there way to pass image of OpenCV (cv::Mat) format to webpage without conversion it to base64 format? – Dmitry Masley Jul 04 '16 at 04:29
  • You can extend Sciter by native functions and events and use that from scripts on the page. So you can create instance of cv::Mat in your native code and pass it with methods to script to manipulate it. – c-smile Jul 04 '16 at 04:46
14

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.

Johannes
  • 987
  • 10
  • 15
11

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.

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
6

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.

tomer zeitune
  • 1,080
  • 1
  • 12
  • 14
  • 1
    It being closed source is very, very unfortunate, considering what Awesomium was capable of :( – ranieri Sep 03 '19 at 03:20
  • I gave Ultralight a try but failed. Couldn't even run the Browser sample due to lib-not-found errors. The containing folder is definitely in my PATH variable. Tried to compile the Basic App but didn't succeed. Compiler couldn't find class Settings which is nowhere declared as I could prove using grep. (Ubuntu 18.4) – testalucida Dec 03 '19 at 16:20
  • @testalucida You can seek support at Ultralight’s Slack workspace. – tomer zeitune Dec 03 '19 at 16:22
4

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.

0xB00B
  • 1,598
  • 8
  • 26