Lite

Lite is a lightweight HTML/CSS/JS rendering engine for Windows, written in C#. It parses HTML and CSS, runs a custom layout engine, renders to a native Win32 window using SkiaSharp, and executes JavaScript via Jint.

---

Projects

Project	Type	Description
Lite/	Class library	The rendering engine and BrowserWindow API
Example/	Executable	Demo app using the library with a local HTML/CSS/JS site

---

Getting Started

Install

Reference the Lite project or build it as a DLL and add a project reference:

<ItemGroup>
  <ProjectReference Include="..\Lite\Lite.csproj" />
</ItemGroup>

Basic Usage

using Lite;

var window = new BrowserWindow("http://localhost:4444");
window.Run();

Run() is blocking — it parses the URL, creates a native window, and enters the Win32 message loop until the window is closed.

---

API Reference

BrowserWindow

The main entry point for the library. Creates a native Win32 window that renders a web page.

public class BrowserWindow

Constructor

public BrowserWindow(string url, string title = "Lite Browser", int width = 800, int height = 600)

Parameter	Description
url	The URL to load and render (e.g. "http://localhost:4444")
title	Window title bar text
width	Initial window width in pixels
height	Initial window height in pixels

Methods

public void Run()

Loads the URL, creates the window, and starts the message loop. Blocks until the window is closed.

---

Architecture

BrowserWindow
│
├── Parser              Fetches HTML, parses via AngleSharp, builds LayoutNode tree,
│                       loads external CSS, executes scripts via JsEngine
│
├── Drawer              Runs BoxEngine layout, then renders the tree to a SkiaSharp
│                       bitmap; returns the pixel buffer and hit regions
│
├── BoxEngine           Two-pass CSS box model layout (block + inline line boxes,
│                       absolute/fixed positioning)
│
├── FlexEngine          CSS Flexbox Level 1 layout (flex-grow/shrink, wrapping,
│                       alignment, gap, order, baseline)
│
├── TableEngine         Table layout (display:table, tr, td/th — two-pass row sizing)
│
├── JsEngine            Jint-based JavaScript runtime with DOM API
│   ├── JsDocument      document.getElementById / querySelector / createElement
│   ├── JsElement       Element proxy: textContent, value, style, events, classList
│   ├── JsStyle         Inline style property get/set
│   ├── JsConsole       console.log / error / warn
│   └── JsWindow        window.alert
│
├── FormState           Tracks text input values, checkbox state, and focused element
├── EventDispatcher     Dispatches click/change/input events to JS handlers
├── ResourceLoader      HTTP image fetching with bitmap cache
└── StaticFileServer    (Example project) ASP.NET Core Kestrel server for local files

---

Supported HTML Elements

Element	Behaviour
div, section, header, footer, main, article, nav, aside, form, span	Generic block or inline containers
h1–h6	Headings with computed font size and weight
p	Paragraph with block layout
a	Link — opens in the system browser on click
img	Image loaded via HTTP; falls back to a placeholder with alt text
input (text)	Focusable text field with keyboard input and backspace
input (checkbox)	Toggle on click
button, input[type=submit]	Triggers click event handlers
label	Inline by default
strong, b	Bold text
em, i, cite, dfn	Italic text
u, ins	Underline
s, del, strike	Strikethrough
small, sub, sup	Smaller text / subscript / superscript
mark	Yellow highlight
code, kbd, samp, var, tt	Monospace font
pre	Preformatted block with preserved whitespace
blockquote	Indented block quote
hr	Horizontal rule
br	Forced line break
ul, ol, li	Unordered (bullet) and ordered (numbered) lists
dl, dt, dd	Definition lists
table, thead, tbody, tfoot, tr, td, th	Table layout
script	Inline and src scripts executed after parse

---

Supported CSS Properties

Property	Values
display	block, inline, inline-block, list-item, flex, inline-flex, table, table-row, table-cell, none
width, height	px, %, vh, vw, auto
min-width, max-width, min-height, max-height	px, %
margin, padding	Shorthand and individual sides; px, %, em, auto
border-width	px per side
border-color	Any CSS color per side
box-sizing	border-box, content-box
background-color	Any CSS color
color	Any CSS color
font-size	px, em, keyword sizes
font-weight	bold / normal
font-style	italic / normal
font-family	Named families; monospace → Consolas, system-ui → Segoe UI
line-height	px, em, %, unitless multiplier
text-decoration	underline, line-through
text-align	left, center, right, justify
white-space	normal, nowrap, pre, pre-wrap, pre-line
position	static, relative, absolute, fixed
top, right, bottom, left	px, %
z-index	Integer
overflow	visible, hidden, scroll, auto
visibility	visible, hidden, collapse
flex-direction	row, row-reverse, column, column-reverse
flex-wrap	nowrap, wrap, wrap-reverse
flex-grow, flex-shrink	Number
flex-basis	px, %, auto
flex	Shorthand
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items, align-self	stretch, flex-start, flex-end, center, baseline
align-content	stretch, flex-start, flex-end, center, space-between, space-around
flex-flow	Shorthand
gap, row-gap, column-gap	px, em, %
order	Integer
cursor	pointer, text, default

---

JavaScript DOM API

Scripts run in a Jint sandbox with a minimal browser-compatible API.

document

document.getElementById(id)          // → Element | null
document.querySelector(selector)     // → Element | null   supports: #id, tag, tag#id
document.querySelectorAll(selector)  // → Element[]        supports: #id, tag
document.createElement(tagName)      // → Element

Element

element.id                           // string (read-only)
element.tagName                      // lowercase string (read-only)
element.textContent                  // get/set displayed text
element.innerHTML                    // get/set (simplified — same as textContent)
element.value                        // get/set text input value
element.checked                      // get/set checkbox state

element.style.color = "red"          // set any CSS property as camelCase or kebab-case
element.getAttribute(name)           // → string | null
element.setAttribute(name, value)
element.hasAttribute(name)           // → boolean

element.children                     // → Element[]
element.parentElement                // → Element | null
element.appendChild(child)          // → child
element.removeChild(child)          // → child

element.classList_add(cls)
element.classList_remove(cls)
element.classList_contains(cls)      // → boolean
element.classList_toggle(cls)

element.addEventListener(type, fn)
element.removeEventListener(type, fn)
element.click()

console

console.log(...)
console.error(...)
console.warn(...)

window

window.alert(message)
alert(message)                       // shorthand

Inline event attributes

Standard HTML inline handlers are supported:

<button onclick="handleClick()">Click me</button>
<input oninput="handleInput()" onchange="handleChange()" />

---

Running the Example

dotnet run --project Example

The example serves the Example/resources/ folder on http://localhost:4444 and opens it in a BrowserWindow. The demo page covers typography, inline text elements, lists, forms, flexbox layouts, tables, positioning, z-index, overflow clipping, and percentage sizing.

---

Dependencies

Package	Purpose
AngleSharp	HTML parsing and CSS style computation
AngleSharp.Css	CSS extension for AngleSharp
Jint	JavaScript engine
Esprima	JavaScript parser (used by Jint)
SkiaSharp	2D rendering
Microsoft.AspNetCore.App	Static file server (Example project only)

---

Platform

Windows only — the renderer uses Win32 APIs (User32, GDI32) for window creation and bitmap blitting.