---
updatedAt: 2025-06-16T21:15:10.000Z
---
Fetch the complete documentation index at: https://docs.ultralig.ht/llms.txt. Use this file to discover all available pages before exploring further.
# Writing Your First App
Ultralight enables you to build your C/C++ app's front-end with HTML/JS/CSS.
This gives you the best of both worlds-- fast, beautiful, modern web UI with the power and performance of native code.
## 1. Install the prerequisites
[Install the prequisites](https://docs.ultralig.ht/docs/installing-prerequisites) for your platform if you haven't already done so.
## 2. Clone the Quick Start repo
Clone the code in the [ultralight-ux/ultralight-quick-start](https://github.com/ultralight-ux/ultralight-quick-start) repository.
```shell
git clone git@github.com:ultralight-ux/ultralight-quick-start.git
```
## 3. Download the Ultralight SDK and extract it to `/SDK`
[Download the Ultralight SDK](https://ultralig.ht/download) and extract the contents to `ultralight-quick-start/SDK`.
## 4. Open in VS Code
### Building the app
1. Open the `ultralight-quick-start` folder in VS Code
2. Install the recommended extensions when prompted (C/C++ and CMake Tools)
3. Select your preferred build preset (Release or Debug) when prompted
4. Build the project using one of these methods:
* Click the "Build" button in the CMake status bar
* Run the "Build (Release)" or "Build (Debug)" task from the Terminal menu
* Press F7 to build with the default configuration
### Running / debugging the app
After building, you can run and debug the app:
* Open the "Run and Debug" view (Ctrl+Shift+D)
* Select "MyApp" from the dropdown
* Press F5 to start debugging or Ctrl+F5 to run without debugging
## 5. Understanding the folder layout
The quick start project is organized with the following structure:
```
ultralight-quick-start/
├── assets/ # HTML resources to bundle with app
├── cmake/ # CMake scripts to automate build
├── src/ # C/C++ source files
└── CMakeLists.txt # CMake project file, edit this to customize your app
```
### **Assets Folder**
You should place all your web-page resources (eg, HTML files, JS files, CSS files, images, etc.) inside the **assets folder**. Anything in this directory will be bundled with the application post-build.
You can access these resources via `file:///` in your C++ and HTML code, for example:
```cplusplus
void MyApp::InitializeView() {
// Load "app.html" from the "assets" directory
myView->LoadURL("file:///app.html");
}
```
## 6. Customizing the window title
To change the title of the window, we will need to dive into the C++ source code for our app.
Open up `src/MyApp.cpp` and find the following lines:
```cplusplus
///
/// Set the title of our window.
///
window_->SetTitle("MyApp");
```
Change the string to something like "My Awesome App!" and save the file:
```cplusplus
///
/// Set the title of our window.
///
window_->SetTitle("My Awesome App!");
```
After you've done that, rebuild and relaunch MyApp to see your changes.
## 7. Editing the HTML assets
Let's start editing our HTML assets.
Open up `assets/app.html` and find the following lines:
```html
Hello World!
```
Change the HTML to display another welcome message, like "Welcome to My App!":
```html
Welcome to My App!
```
After you've done that, rebuild and relaunch MyApp to see your changes.