Engineering
Hyperion

Deep dive into the architecture of a commercial-grade native browser engine. Built from the ground up with C++23 and Rust.

Project Overview

Hyperion is an ambitious project to recreate the modern web browser from scratch. Unlike Electron or Chromium-based wrappers, Hyperion implements its own parsing, layout, and execution logic.

01

C++23 Core

The main engine and browser shell use C++23 for maximum performance and modern memory safety.

02

Rust Bridge

High-performance parsing for HTML and CSS is handled by Rust for memory safety and speed.

03

Direct2D

Hardware-accelerated rendering via Windows Direct2D and DirectWrite.

How It Works

The Hyperion Rendering Engine (HRE) transforms a raw URL into a visual experience through a strictly defined pipeline.

1

HTML Parsing

The Rust HTML tokenizer converts raw bytes into tokens, which the C++ parser turns into a DOM tree.

2

CSS Parsing

The Rust CSS parser analyzes stylesheets, creating a set of rules mapped to selectors.

3

Style Resolution

The Style Engine computes final values for every DOM node based on CSS specificity.

4

Layout (Reflow)

Calculates the geometric box (X, Y, Width, Height) for every element using the Box Model.

5

Painting

Rasterizes vectors, text, and images into pixels using a Painter class.

6

Compositing

Combines layers and applies GPU transformations for smooth 60fps scrolling.

System Architecture

Application Layer (Browser Shell)

Handles Window management, Tab management, and the Omnibox. Implemented in Win32 API.

browser/src/application.cpp

Rendering Engine (HRE)

The heart of the browser. Manages the DOM, CSS, Layout, and Painting pipelines.

engine/src/layout/ engine/src/render/

HyperionJS VM

A custom bytecode virtual machine. Lexes JS source, compiles to bytecode, and executes in a stack-based VM.

HyperionJS/src/vm/vm.cpp

Platform Layer (Rust/C++)

The foundation. Handles FFI calls to Rust decoders and SChannel for TLS 1.3.

hyperion_png/ hyperion_css/

Rendering Engine Deep Dive

The Layout Engine is the most complex part. It implements the CSS Box Model, calculating margins, borders, and padding to determine the final content area.

layout_engine.cppC++23
void LayoutEngine::layout_tree(std::shared_ptr<LayoutNode> node, double width, double height) {
    layout(node, width, height); // Calculate Box Model
    for (auto& child : node->children) {
        double child_width = width - node->box_model.padding_left - node->box_model.padding_right;
        layout_tree(child, child_width, height);
    }
}

Current capabilities include support for Flexbox and Grid basics, which allows modern layouts to be rendered accurately.

HyperionJS Virtual Machine

HyperionJS is a custom JavaScript implementation. It doesn't use V8; it's a from-scratch VM designed for simplicity and integration.

parser.cppC++23
std::unique_ptr<ast::Stmt> Parser::declaration() {
    if (match({TT::Async})) {
        consume(TT::Fun, "Expect 'function' after 'async'.");
        return function_declaration(L"async");
    }
    if (match({TT::Fun})) return function_declaration(L"function");
    // ... further parsing
}

The engine supports async/await, Promises, and full ES2023 syntax via a recursive descent parser.

The Rust Foundation

Performance-critical parsing and image decoding are delegated to Rust via a C-FFI bridge. This ensures memory safety in the most vulnerable parts of the engine.

HTML Tokenizer

Compliant with HTML5 spec. Fast, parallelized tokenization.

CSS Parser

Production-grade parser for complex selectors and @media queries.

Image Decoders

High-speed PNG, JPEG, and WebP decoders written in pure Rust.

Network & Security

Hyperion uses Windows SChannel for native TLS 1.2/1.3 support, ensuring secure connections without external dependencies like OpenSSL.

Networking Stack:

  • ssl_socket: Handles encrypted handshakes.
  • network_manager: Manages HTTP requests/responses.
  • websocket: RFC 6455 compliant communication.
  • cookie_manager: Persistent state management.

Build & Run

Hyperion requires a Windows environment with C++23 and Rust capabilities.

  • 1
    Install Prerequisites
    Visual Studio 2022 (with C++23), Rust (stable), and CMake 3.20+.
  • 2
    Build Rust Components
    Run cargo build --release in hyperion_png and hyperion_jpeg folders.
  • 3
    Compile Engine
    mkdir build & cd build & cmake .. & cmake --build . --config Release

Forking & Customization

Building your own browser is a great way to learn systems engineering. Here is how to customize Hyperion:

Change UI

Edit browser/src/application.cpp to change window behavior or the toolbar layout.

Add JS Features

Modify HyperionJS/src/runtime/stdlib.cpp to add new global functions to the JS environment.

Optimize Layout

Experiment with engine/src/layout/block_layout.cpp to implement new CSS layout modes.

API Reference

JavaScript APIES2023
// Network
fetch(url).then(res => res.json());
const ws = new WebSocket("wss://...");

// Storage
localStorage.setItem("key", "value");
indexedDB.open("database_name");

// Debugging
console.log("Hyperion Engine active");
C++ Core APIC++23
hre::net::ssl_socket socket;
socket.connect("example.com", 443);

hre::dom::node* root = parser.parse(html_string);
layout_engine.layout_tree(root, 1920, 1080);