Introducing a Modern C++ GUI Library: Elements

When developing desktop tools or plugin interfaces, many people first think of Qt or wxWidgets. They are mature and feature-rich, but inevitably feel a bit cumbersome: high learning curve, complex build systems, and significant introduction costs. On the other hand, Dear ImGui is lightweight and flexible, suitable for game tools and debugging UIs, but it appears rough in structured UI development, theme customization, and layout.

Recently, while working on an internal tool, I tried a relatively niche but very clean library — Elements. It is a modern GUI library written in C++20, with modular composition of interface elements and a simple, intuitive layout, making it particularly suitable for developers who enjoy coding in modern C++.

📚 The C++ Knowledge Base has launched on ima! The current content covered by the knowledge base is shown in the image below👇👇👇

📌 Students interested in the knowledge base can add the assistant vx (cppmiao24) with the note 【Knowledge Base】 or click 👉 C++ Knowledge Base (tap to jump) to view the complete introduction of the knowledge base～

1. Introduction to Elements

Author: Cycfi Research (also known for open-source libraries related to DSP)
Language Standard: C++20
Rendering Backend: Based on Skia
Positioning: Lightweight, modular, composable GUI framework
License: MIT

The design philosophy of Elements is to treat the GUI as declarative composition — the interface is composed of individual widgets that can be nested and combined like building blocks. Layout and style are expressed through C++ code, without relying on additional UI files or DSLs.

Its interface style is somewhat similar to the hierarchical structure of HTML/CSS, but is entirely implemented in modern C++, ensuring type safety at compile time.

2. Installation and Build

Elements itself is a library consisting of a header file and a few source files, with no complex build system. Simply clone the repository and add lib/include and lib/src to your CMake project. In terms of dependencies, Skia is a must.

cmake_minimum_required(VERSION 3.20)
project(demo_elements)

set(CMAKE_CXX_STANDARD 20)

find_package(Skia REQUIRED)

add_executable(demo main.cpp)
target_include_directories(demo PRIVATE path/to/elements/lib/include)
target_link_libraries(demo PRIVATE Skia::skia)

Skia has precompiled packages available on all platforms, which can be used directly with vcpkg or compiled manually.

3. Basic Example

Below is a minimal Elements application example that demonstrates a button and a label:

#include <elements.hpp>
#include <iostream>

using namespace cycfi::elements;

int main(int argc, char* argv[])
{
    app _app(argc, argv, "Elements Demo", "com.example.demo");

    window _win(_app.name(), 400, 200);

    view view_(_win);

    // Create a button and label
    auto label_ = share(label("Hello, Elements!"));

    auto button_ = share(button("Click Me", [label_]{ 
        label_->set_text("Button Clicked!");
        std::cout << "Button pressed!\n";
    }));

    // Vertical layout
    view_.content(
        margin({10, 10, 10, 10},
            vtile(
                label_,
                button_
            )
        )
    );

    _app.run();
}

Features:

All components are element objects that can be share() as shared pointers, allowing safe usage in event callbacks.
Layouts are combined using vtile (vertical) and htile (horizontal), similar to the block/inline concept in HTML.
Styles, fonts, and colors can be defined directly in code, without relying on external style files.

4. Comparison with Other Libraries

Feature	Qt	Dear ImGui	Elements
Size	Large	Small	Medium
Build	qmake/CMake + MOC	Header files	CMake/Direct inclusion
UI Aesthetics	High, themable	Basic	Medium to high
Responsive Layout	Supported	No	Supported
Type Safety	Average	Average	High (C++20 compile-time checks)

The advantages of Elements include:

Modern C++ Interface: Features like templates, std::shared_ptr, and constexpr are used very naturally.
Composable Layout: The UI is described directly in code, without additional XML/QML.
Few Dependencies: Primarily depends on Skia, with no heavyweight runtime libraries.

Disadvantages:

Small ecosystem, with few ready-made components, requiring implementation of some common controls.
Documentation is less comprehensive than Qt, requiring reference to source code and examples.
Limited mobile support, more suitable for desktop tools.

5. Practical Experience

I used it to create an internal debugging tool, which included multiple input boxes, sliders, and charts. Because its widget composition model naturally supports nesting, it was easy to create complex layouts. Compared to Qt, the project build speed was significantly faster, without the need to handle MOC generation or introduce a large number of dynamic libraries.

Another pleasant surprise was that Elements had no noticeable lag when responding to events and refreshing the interface; Skia’s rendering performance is quite good. The downside is that if you are accustomed to the drag-and-drop design of Qt Designer, this “fully code-based UI description” approach may take some adjustment.

6. Recommended Use Cases

Elements is particularly suitable for:

Lightweight Desktop Tools: Debuggers, data visualization panels, small editors
Plugin-based UIs: Embedded into existing C++ applications
Prototype Development: Quickly assembling interactive interfaces

Less suitable for:

Complex cross-platform commercial applications (Qt’s ecosystem is more reliable)
Scenarios requiring a large number of ready-made controls and third-party components

7. Conclusion

If you enjoy writing clean code in modern C++ and find Qt too heavy or Dear ImGui too simplistic, then Elements is a worthwhile option to try. Its learning curve is gentle, the source code is clear, and it is suitable for projects that demand both interface aesthetics and code quality. Although the ecosystem is small, as a composable C++ GUI library, its design philosophy is very modern and “engineer-friendly”.

Project address: https://github.com/cycfi/elements