Skip to main content
Fern Graphics Logo

Welcome to Fern UI Framework

A fast, minimal, cross-platform UI toolkit written in C++ with modern design principles. Build beautiful desktop applications with a comprehensive widget system, flexible layout management, and seamless cross-platform rendering capabilities.

Quick Start

Create your first Fern app in minutes with our interactive tutorial

Installation

Install Fern on Linux, macOS, or Windows with complete CLI setup

Widget System

Explore buttons, text inputs, layouts, and advanced components

Core Concepts

Understand Fern’s architecture and design principles

Key Features

Comprehensive Widgets

Buttons, text inputs, shapes, sliders, progress bars, dropdowns, and custom components

Flexible Layouts

Row, Column, Padding, Center, Expanded, SizedBox for responsive design

Cross-Platform

Linux (X11/Wayland), Web (WebAssembly), with Windows and macOS support planned

Font Rendering

TTF font support with customizable text styling and alignment

Event System

Signal-slot reactive programming for handling user interactions

Minimal Dependencies

Memory-efficient design with modern C++17 and clean APIs

Why Fern?

Fern emphasizes simplicity and performance while providing powerful tools for building rich graphical interfaces:
  • Modern C++17: Clean APIs with both C++ and C bindings
  • Declarative UI: Build interfaces with intuitive widget composition
  • Fast Rendering: Efficient canvas-based drawing with platform-optimized backends
  • Developer-Friendly: Comprehensive documentation and examples to get you started

Quick Example

Here’s a simple “Hello World” app with Fern:
#include <fern/fern.hpp>

using namespace Fern;

void setupUI() {
    int width = Fern::getWidth();
    int height = Fern::getHeight();
    
    auto centerWidget = std::make_shared<CenterWidget>(0, 0, width, height);
    centerWidget->add(Text(Point(0, 0), "Hello, Fern!", 3, Colors::White));
    
    addWidget(centerWidget);
}

void draw() {
    Draw::fill(Colors::DarkBlue);
}

int main() {
    Fern::initialize();
    setupUI();
    Fern::setDrawCallback(draw);
    Fern::startRenderLoop();
    return 0;
}

Architecture Overview

Fern is built around several core subsystems:

Widget System

Hierarchical component architecture with built-in widgets (Text, Button, Shapes) and custom widget support.

Layout Engine

Flexible positioning and sizing with containers (Row, Column, Center) and constraint-based layouts.

Rendering Pipeline

Platform-abstracted graphics with efficient drawing operations, supporting Linux (X11) and Web (WebGL2).

Event System

Signal-slot based event handling for clicks, hovers, and user interactions.

Font Management

TTF font loading with customizable text rendering, alignment, shadows, and backgrounds.

Getting Started

1

Install Fern

Follow our installation guide to set up the CLI and C++ library
2

Create Your First App

Build a simple counter app with our quickstart tutorial
3

Explore Widgets

Learn about available widgets and layout components in the widget documentation
4

Deploy Cross-Platform

Compile for Linux desktop or deploy to the web with WebAssembly

Requirements

  • C++17 or later
  • CMake 3.10+
  • Platform-specific libraries:
    • Linux: X11, fontconfig, freetype2
    • Web: Emscripten
    • macOS: Cocoa framework (planned)
    • Windows: Native Windows APIs (planned)

Community & Support

GitHub Repository

View source code, report issues, and contribute

CLI Reference

Command-line tools for building and managing Fern projects
Fern is currently in beta status. APIs may change as we work toward a stable 1.0 release.

License

Fern Graphics is released under the MIT License. See the LICENSE file for complete terms.

Build docs developers (and LLMs) love