Ultralight provides a bunch of samples to help you learn best-practices when using the API. This guide covers what you need to know to build and run them fast.

## 1. Get the SDK and Install Prerequisites

[Download and extract the SDK](/docs/2.0/getting-the-sdk) and [install the prerequisites](/docs/2.0/installing-prerequisites) for your platform if you haven't already done so.

## 2. Build the Samples

Open your terminal / command prompt and run the following from the root of the extracted package:

```shell
cmake -B build
cmake --build build --config Release
cmake --install build --config Release
```

> 📘 Use Visual Studio Code (VSCode) instead
>
> Prefer an IDE? Open the SDK folder in VS Code, install the recommended extensions when prompted (C/C++ and CMake Tools), pick the Release preset, and press F7 to build.

## 3. Run the Samples

Each sample builds to its own folder under `build/out/Samples/`— navigate to each and double-click the app / executable to run it. MiniBrowser (a simple browser for testing your own pages) lands in `build/out/Tools/MiniBrowser/`.

From VS Code, pick a sample in the "Run and Debug" view and press F5.

## What the Samples Cover

The samples are numbered in recommended learning order, so start at `01-render-to-png` and work your way up.

| Sample | What it shows |
|---|---|
| `01-render-to-png` | Render a page to a PNG with no window at all (a C version is bundled alongside it). |
| `02-basic-app` | The simplest AppCore application: opens a window and shows a local HTML page. |
| `03-panel-layouts` | Splitting the window into multiple, resizable panels. |
| `04-data-bindings` | Bind C++ state to a page and keep it automatically in sync. |
| `05-javascript-bridge` | Expose C++ functions and callbacks to JavaScript using our type-safe JS API bridge. |
| `06-dom-api` | Manipulate a page's DOM directly from C++. |
| `07-file-loading` | Load assets through the FileSystem API. |
| `08-intro-to-c-api` | Building a basic application via the C API. |
| `09-opengl-integration` | Integrate web content into an OpenGL application, with a custom Surface and input translation. |
| `10-native-look-and-feel` | Build a native-looking desktop application with custom chrome. |
| `11-multi-window` | Spawning and coordinating multiple application windows. |
| `12-web-browser` | A full-fledged application: multi-tab web browser, with the UI built entirely with HTML. |
