gcc -O2 mini_browser_sdl.c -o mini_browser_sdl $(sdl2-config --cflags --libs) -lSDL2_ttf -lm

Mini Browser (SDL2 + TTF)

A tiny experimental renderer written in one C file. It implements a very small DOM → render tree → layout → paint pipeline and displays the result with SDL2 + SDL_ttf. The project is meant to be a compact, hackable playground for learning and prototyping UI/layout behavior.

Why this repo

• Everything is intentionally small and easy to read — the whole program is in mini_browser_sdl.c.
• Use the project to experiment with text layout, simple CSS-like styling, and small interactive demos.

What’s included

• mini_browser_sdl.c — main application, demo pages, layout and paint code.
• BBHSansHegarty-Regular.ttf — example font used by the demos (fallback is available).

Quick setup (Ubuntu / WSL)

sudo apt update
sudo apt install build-essential libsdl2-dev libsdl2-ttf-dev pkg-config
# optional but useful on WSL to open links in Windows
sudo apt install wslu

Build

gcc -O2 mini_browser_sdl.c -o mini_browser_sdl $(sdl2-config --cflags --libs) -lSDL2_ttf -lm

If you don't have sdl2-config, try pkg-config --cflags --libs sdl2 instead.

Run

./mini_browser_sdl

How to author pages

This project does not parse HTML. Instead it uses small helper functions and a tiny style syntax to let you compose pages in C directly.

Style strings look like this:

• "bg=#ffffff;padding=16"
• "a|href=app:home;color=#09f;pr=8"

Builder helpers provided in the source:

• Div(style) — create a div node
• P(text, style) — paragraph
• H1/H2/H3(text, style) — headers
• A_link(text, href, styleExtra) — anchor (href passed separately)
• WITH(parent, child1, child2, ...) — append children to parent and return the parent

Example

Node *home = WITH(
  Div("bg=#f2f4f8;padding=16"),
  WITH(Div("bg=#1f2937;color=#fff;padding=12;border=0"),
       H1("Your Name", "color=#fff;pt=4;pb=4"),
       WITH(Div(""),
            A_link("Home", "app:home", "color=#9be7ff;pr=8"),
            A_link("Projects", "app:projects", "color=#9be7ff;pr=8"),
            A_link("Contact", "app:contact", "color=#9be7ff"))),
  WITH(Div("bg=#ffffff;border=1;border-color=#e5e7eb;padding=16;margin=12"),
       H2("Hi — I'm Your Name", "color=#111"),
       P("Welcome text...", "color=#333"))
);

Extend the demo

• Add a make_xxx_dom() function that returns a Node* authored with the builder API.
• Wire it into the router where the app handles app: links (search for strncmp(hit->style.href, "app:", 4)).

Troubleshooting

• Font or TTF errors: check stderr. The program falls back to a simple glyph renderer if a TTF font isn't available.
• Links not opening on WSL: install wslu to get wslview which opens links in Windows. The app falls back to xdg-open and sensible-browser.

Ideas for improvements

• Add Card() / Grid() helpers for common patterns.
• Data-driven API: pass arrays of project descriptors and generate cards automatically.
• Persist visited links across runs.
• Add image rendering and improved text wrapping.