🎬 [Demo GIF coming soon]
A short recording showing Asteria loading a real web page, rendering styled content on the GPU, and resizing the window — all in real time.
Asteria is a web browser engine being built entirely from scratch.
It reads web pages, understands HTML and CSS, figures out where every element belongs on the screen, and paints the result using modern GPU graphics — all without borrowing code from Chrome, Firefox, or any existing browser engine.
Every part of the pipeline — the HTML parser, the CSS engine, the layout solver, the renderer — is hand-written in Rust with no third-party web engine crates. The networking layer, memory allocators, task scheduler, and browser shell are all custom-built too.
Asteria isn't a wrapper around someone else's work. It's the work itself.
Web browsers are among the most complex pieces of software ever built. So complex that only a handful of engines power every browser on the planet.
We wanted to understand how it all works — not by reading about it, but by building it. From the first byte of HTML to the last pixel on the screen.
Asteria started as a deep-dive into browser internals. It's growing into something that can actually render real web content with GPU acceleration, tabbed browsing, and live network fetching.
| Feature | Status | What it does |
|---|---|---|
| HTML Parsing | ✅ | Reads raw HTML and builds a structured document tree |
| CSS Parsing | ✅ | Understands selectors, properties, media queries, and specificity |
| Style Cascade | ✅ | Applies CSS rules with proper inheritance, inline styles, and @media |
| DOM | ✅ | Represents the page structure in a fast, memory-efficient arena |
| Block Layout | ✅ | Positions block-level elements (headings, paragraphs, divs) |
| Inline Layout | ✅ | Flows text and inline elements with line wrapping |
| Flexbox | ✅ | CSS display: flex horizontal row layouts with explicit item widths |
| GPU Rendering | ✅ | Hardware-accelerated painting via wgpu with shader-based batching |
| Image Decoding | ✅ | Format detection and decoding pipeline (renders fitted placeholder frames; SVG detected but not rendered) |
| Text Rendering | ✅ | GPU-rendered glyphs with proper font metrics |
| Feature | Status | What it does |
|---|---|---|
| Tabbed Browsing | ✅ | Multiple tabs with keyboard shortcuts (Ctrl+T, Ctrl+W) |
| Navigation History | ✅ | Back, forward, and reload per tab |
| Window Resizing | ✅ | Live content reflow when you resize the window |
| Keyboard Navigation | ✅ | Full shortcut support (Alt+←, Alt+→, Ctrl+R, F5) |
| Scrolling | ✅ | Scroll through content that exceeds the viewport |
| Feature | Status | What it does |
|---|---|---|
| HTTP/HTTPS | ✅ | Custom HTTP/1.1 client with TLS, redirects, and connection pooling |
| DNS Resolution | ✅ | Built-in resolver with TTL caching |
| Streaming HTML | ✅ | Pages start rendering before the full download completes |
| Resource Loading | ✅ | Discovers and fetches stylesheets and linked resources |
| Feature | Status | What it does |
|---|---|---|
| Multi-threaded Scheduler | ✅ | Worker pool for parallel tasks with panic isolation |
| String Interner | ✅ | Efficient string deduplication for fast comparisons |
| Frame Arena Allocator | ✅ | Zero-overhead per-frame memory management |
| LRU Cache | ✅ | In-memory resource caching to avoid redundant loads |
| Engine Profiler | ✅ | Microsecond-precision timing for every pipeline stage |
| Devtools & Tracing | ✅ | Chrome Trace JSON export, memory inspector, energy diagnostics |
| Feature | Status | What it will do |
|---|---|---|
!important rules |
🔜 | Override specificity for priority CSS declarations |
| CSS Animations | 🔜 | @keyframes and animated transitions |
| Advanced Flexbox | 🔜 | Column layouts, wrapping, and alignment options |
@import support |
🔜 | External stylesheet inclusion |
| JavaScript Engine | 📋 | Script execution and DOM manipulation |
📸 [Screenshots coming soon]
Screenshots will be added here showing:
| Screenshot | Description |
|---|---|
| Blog article layout | A styled page with headers, paragraphs, callouts, and a navigation bar |
| Flexbox card gallery | Cards arranged in a horizontal flex row with images and descriptions |
| Window resize reflow | Content reflowing live as the window changes size |
| GPU rendering output | Hardware-accelerated frames with text, colors, and borders |
| Tabbed browsing | Multiple tabs open with navigation controls |
At a high level, Asteria transforms a web page into pixels through a series of steps:
📄 HTML source
│
▼
┌─────────────┐
│ Parsing │ Read the HTML and build a tree of elements
└──────┬──────┘
│
▼
┌─────────────┐
│ Structure │ Organize elements into a document (the DOM)
└──────┬──────┘
│
▼
┌─────────────┐
│ Styling │ Apply CSS rules — colors, sizes, spacing
└──────┬──────┘
│
▼
┌─────────────┐
│ Layout │ Calculate where every element goes on the screen
└──────┬──────┘
│
▼
┌─────────────┐
│ Painting │ Generate a list of drawing instructions
└──────┬──────┘
│
▼
┌─────────────┐
│ GPU │ Send everything to the graphics card for rendering
└─────────────┘
Each stage is a separate module. The output of one stage feeds into the next. HTML chunks can be parsed and processed progressively as they arrive from the network, flowing through the engine stages to rendered pixels.
Want to go deeper? The documentation covers each stage in detail:
- Architecture Overview
- Pipeline Deep-Dive
- HTML Engine & DOM Arena
- CSS Engine & Cascade
- Layout Engine
- Painting & GPU Renderer
- Resource Loading & Browser Shell
- Detailed Roadmap
Asteria is under active development. Here's where it's heading:
| Area | Goal |
|---|---|
| CSS | Broader property support, animations, transitions, @import |
| Layout | Advanced flexbox, CSS Grid, positioned elements |
| JavaScript | Script execution engine and DOM API bindings |
| Networking | HTTP/2, WebSockets, better caching strategies |
| Browser UI | Address bar, bookmarks, settings, and a polished browser chrome |
| Standards | Progressive compliance with W3C and WHATWG specifications |
| Performance | Incremental layout, layer compositing, and render optimizations |
| Cross-platform | Native builds for Windows, macOS, and Linux |
📋 See the Detailed Roadmap
Asteria is not yet a daily-driver browser. It's an engine in active development.
When it's ready, this section will cover:
- 📦 Downloading releases
- 🚀 Launching the browser
- 🌍 Opening websites
- ⚙️ Configuration and settings
For now, you can build and run the engine from source to see it in action:
# Clone the repository
git clone https://github.com/anzalkabeer/Asteria.git
cd Asteria/Asteria
# Build and run with a sample page
cargo run
# Or point it at your own HTML file
cargo run -- path/to/page.htmlRequirements: Rust (2024 edition)
Interested in contributing or exploring the codebase?
| Resource | Link |
|---|---|
| Contributing guide | Contributing Guide |
| Architecture docs | Documentation Index |
| Issue tracker | GitHub Issues |
| CI pipeline | GitHub Actions |
The project is written in Rust (2024 edition) and uses wgpu for GPU rendering and winit for windowing. All web engine components — parsing, styling, layout, painting — are built from scratch with no third-party browser engine dependencies.
Asteria is built by Anzal Kabeer (GitHub Link) and Keshav Ghai (GitHub Link).
Asteria — Rendering the web, one pixel at a time.
MIT License