A View loads and renders web-pages to an offscreen target. It is completely isolated from the OS windowing system and must be forwarded all input events.

You create Views through the `Renderer`, drawing content either to a CPU pixel buffer or GPU render-target.

> 📘 Views in AppCore
>
> When using AppCore, each `Panel` creates a View for you. See [Laying Out Panels](/docs/2.0/laying-out-panels).

## Creating a View

To create a View, call `Renderer::CreateView()` on the Renderer's thread:

```cpp
RefPtr<View> view;

void CreateView() {
  ///
  /// An 800x600 View with default settings, using the default
  /// Session (nullptr).
  ///
  view = renderer->CreateView(800, 600, ViewConfig(), nullptr);

  view->LoadURL("file:///app.html");
}
```

Dimensions are specified in **device pixels**.

`Renderer::CreateView()` returns a `RefPtr<View>` (a ref-counted pointer to the View). You should retain the pointer to keep the View alive.

Call `View::LoadURL()` or `View::LoadHTML()` to begin loading content into the View. To know when the page is ready, see [Handling View Events](/docs/2.0/handling-view-events).

> 📘 Sessions and Site Data
>
> Site data like cookies, local storage, and cached resources are stored in the View's `Session`. You should specify a `Session` during creation or pass `nullptr` to use the default Session. See [Sessions and Site Data](/docs/2.0/sessions-and-site-data).

## Configuring a View

A `ViewConfig` struct defines initial settings for a View and remain fixed unless the View provides a runtime setter.

Most applications configure three common settings: `is_accelerated` for GPU rendering, `initial_device_scale` for high-DPI displays, and `is_transparent` for transparent overlays.

When using `is_transparent`, the page must also clear its own background in CSS:

```css
html, body { background: transparent; }
```

The following function configures an accelerated, transparent View for a 2x display:

```cpp
void CreateHudView() {
  ViewConfig config;
  config.is_accelerated = true;
  config.initial_device_scale = 2.0;
  config.is_transparent = true;

  ///
  /// The page lays out at 640x360 and renders 1280x720 pixels.
  ///
  view = renderer->CreateView(1280, 720, config, nullptr);
}
```

> 🚧 Register a GPU Driver First
>
> You must register a GPUDriver on Platform before creating an accelerated View. Creating an accelerated View without a GPU driver terminates the process with an error. See [GPU Renderer Overview](/docs/2.0/gpu-renderer-overview).

### ViewConfig Options

The table below lists every option available on `ViewConfig` and its default value.

| Field | Default | Description |
| :--- | :--- | :--- |
| `display_id` | `0` | Display identifier whose `Renderer::RefreshDisplay()` call advances this View's animations. See [Updating and Rendering](/docs/2.0/updating-and-rendering). |
| `is_accelerated` | `false` | Renders on the GPU to a texture instead of the CPU to a Surface. |
| `initial_device_scale` | `1.0` | Number of device pixels per CSS pixel. |
| `is_transparent` | `false` | Enables a transparent background for the View. |
| `background_color` | Unset (opaque white) | Base color drawn beneath the page while it loads and wherever the page paints nothing. See [Dark Mode and Color Schemes](/docs/2.0/dark-mode-and-color-schemes). |
| `preferred_color_scheme` | `ColorScheme::Auto` | Color scheme reported to the page through `prefers-color-scheme`. `ColorScheme::Auto` follows the system scheme, which remains Light until you call `Renderer::set_system_color_scheme()`. See [Dark Mode and Color Schemes](/docs/2.0/dark-mode-and-color-schemes). |
| `initial_focus` | `true` | Starts the View with input focus. See [Keyboard Focus and Editable State](/docs/2.0/keyboard-focus-and-editable-state). |
| `enable_images` | `true` | Enables loading and displaying images. |
| `enable_javascript` | `true` | Runs scripts on the page. The DOM API and data bindings work without it. See [About the DOM API](/docs/2.0/about-the-dom-api). |
| `enable_compositor` | `true` | Separates 3D transforms, animated transforms, opacity changes, video, and `will-change` elements into composited layers. |
| `enable_compositor_debug_info` | `false` | Displays layer borders, tile boundaries, and repaint counters. Requires `enable_compositor`. See [Profiling and Tracing](/docs/2.0/profiling-and-tracing). |
| `enable_canvas_filters` | `true` | Enables the HTML5 2D canvas `filter` property. |
| `match_native_editing_behavior` | `false` | Follows host OS text editing and selection conventions. See [Text Editing and the Clipboard](/docs/2.0/text-editing-and-clipboard). |
| `clipboard_read_policy` | `ClipboardReadPolicy::AllowForAppContent` | Controls which pages may read the clipboard from JavaScript. See [Text Editing and the Clipboard](/docs/2.0/text-editing-and-clipboard). |
| `enable_hidden_timer_throttling` | `false` | Throttles repeating JavaScript timers to approximately 1 Hz while the View is hidden. See [Optimizing Performance](/docs/2.0/optimizing-performance). |
| `max_render_fps` | `0` (no per-View cap) | Caps the animation and repaint frame rate for this View. The edition's maximum frame rate still applies. See [Optimizing Performance](/docs/2.0/optimizing-performance). |
| `javascript_can_open_windows_automatically` | `false` | Allows scripts to call `window.open()` without a user gesture. See [Handling View Events](/docs/2.0/handling-view-events). |
| `allow_universal_access_from_file_urls` | `true` | Allows local `file:///` pages to bypass cross-origin restrictions. See [Shipping Your App](/docs/2.0/shipping-your-app). |
| `font_family_standard` | `"Times New Roman"` | Default font family for text that does not specify one. See [Text Rendering and Fonts](/docs/2.0/text-rendering-and-fonts). |
| `font_family_fixed` | `"Courier New"` | Default font family for monospace text such as `pre` and `code`. |
| `font_family_serif` | `"Times New Roman"` | Default font family for the CSS `serif` generic. |
| `font_family_sans_serif` | `"Arial"` | Default font family for the CSS `sans-serif` generic. |
| `font_family_cursive` | `"Comic Sans MS"` | Default font family for the CSS `cursive` generic. |
| `font_family_fantasy` | `"Impact"` | Default font family for the CSS `fantasy` generic. |
| `font_family_pictograph` | Empty | Default font family for the CSS `-webkit-pictograph` generic. When empty, falls back to `font_family_standard`. |
| `font_size_default` | `16` | Default font size in pixels. |
| `font_size_fixed` | `13` | Default font size for monospace text in pixels. |
| `user_agent` | Library default | Custom User-Agent header string. The Free edition always uses the default string. |

## Updating Settings at Runtime

You can update several View properties after creation using dedicated methods on `View`.

| Method | Description |
| :--- | :--- |
| `View::Resize(width, height)` | Resizes the View to new dimensions in device pixels. |
| `View::Resize(width, height, device_scale)` | Updates dimensions and device scale in a single pass. |
| `View::set_device_scale()` | Updates the device scale factor. |
| `View::set_display_id()` | Updates the display ID when moving the View to another monitor. |
| `View::set_visible()` | Shows or hides the View. Hiding stops painting and pauses animations. |
| `View::set_max_render_fps()` | Sets an animation and repaint frame-rate cap, or `0` to remove it. |
| `View::set_preferred_color_scheme()` | Updates the preferred color scheme reported to the page. |
| `View::set_compositor_debug_info_enabled()` | Toggles the compositor debug overlay. |

Every other `ViewConfig` property is fixed at creation. To change any other setting, you must destroy the View and create a new one.