# Quick Start Tutorial

In this hands-on tutorial you will launch Exaplay 3, create a screen, load a video, and play it back on a connected display. By the end, you will have a saved project file and a clear understanding of the basic workflow.

**Time required:** about 10 minutes

## What You'll Build

A single-screen project that plays a video file on a connected display. Simple, but it covers every core step you will use in every future project.

## Before You Begin

Make sure you have:

* [x] Exaplay 3 installed and licensed — see [Installation](/v3/getting-started/installation.md)
* [x] At least one display output connected (your primary monitor works fine for learning)
* [x] A video file to play (MP4, MOV, HAP, or any other [supported format](/v3/features/media-playback.md))

::: tip Don't have a test video? Any MP4 file will work — a phone video, a free stock clip, or a screen recording. For best results, use a file with at least 1920×1080 resolution. :::

***

## Step 1 — Launch the Application

Start Exaplay 3 from the Desktop shortcut. The web-based editor opens automatically in a WebView2 window. You should see an empty workspace that looks like this:

![Main interface on first launch](/files/SGA2EEYjJbORfz44rd2r)

Take a moment to orient yourself. The interface has these main areas:

| Area             | Location   | Purpose                                     |
| ---------------- | ---------- | ------------------------------------------- |
| **Header Bar**   | Top        | Project name, screen tabs, show-mode toggle |
| **Canvas**       | Centre     | Visual preview of the selected screen       |
| **Inspector**    | Right side | Properties panel for the selected item      |
| **File Browser** | Bottom     | Media file thumbnails and folder navigation |
| **Timeline**     | Bottom     | Arrange media clips in time                 |
| **Transport**    | Bottom bar | Play, pause, stop, and timeline position    |

::: info First-time blank slate On first launch the canvas is empty because no screens exist yet. That is normal — you will create one in the next step. :::

## Step 2 — Create a Screen

A **Screen** in Exaplay 3 represents a physical display output. You need at least one screen to display content.

1. In the top toolbar, click **+ Screen**.
2. A dialog appears asking for:
   * **Name** — Give it a descriptive name, e.g. `Main Screen` or `Projector 1`.
   * **Output** — Choose your connected display from the drop-down list. If you only have one monitor, choose it — the output will be overlaid on your desktop during preview and go fullscreen in Show Mode.
   * **Resolution** — This is auto-detected from your display's EDID data. You usually don't need to change it.
3. Click **Create**.

![Add screen dialog](/files/wWF2POKNEKSavfXcQgRw)

A new composition canvas appears in the editor. The screen name shows up as a tab in the header bar — you can have multiple screens and switch between them using these tabs.

::: details What just happened behind the scenes? Creating a screen did three things:

1. Registered a display output in the engine
2. Created a **Composition** — the visual scene that will be rendered to that output
3. Added an empty **Timeline** with tracks ready for media clips :::

## Step 3 — Browse for Media

Now you need to find a video file to play.

1. Look at the **File Browser** panel at the bottom of the interface.
2. Click the **folder icon** (📁) to open a directory picker.
3. Navigate to the folder containing your video file and select it.
4. The browser now displays thumbnails for all supported media files in that folder.

![File browser with a video thumbnail](/files/qKikc8UYkKCXPTGfwBGy)

You should see your video file appear as a thumbnail. Hover over it to see its filename, resolution, duration, and codec.

::: tip Organise your media early A good practice is to keep all media for a project in a single folder (or sub-folders within it), and place that folder inside `Documents\Exaplay3\media\`. This makes projects portable and avoids missing-file warnings. :::

## Step 4 — Add the Video to the Timeline

With your video visible in the File Browser, it is time to add it to the composition:

1. **Click and drag** the video thumbnail from the File Browser.
2. **Drop it onto Track 1** in the Timeline panel.
3. The clip appears as a coloured block on the track, showing its duration.

![Video clip on timeline](/files/wU6NhaJbR6q9roaSYEaU)

The canvas now shows the first frame of your video. You have just added a media clip to Layer 1 of your composition.

::: details What is a Track? Each track in the timeline corresponds to a **layer** in the composition. Track 1 is the bottom layer, Track 2 sits on top, and so on. Layers higher in the stack draw over lower layers, which is how you composite titles, graphics, and effects on top of background video. :::

## Step 5 — Play the Video

Now for the satisfying part — seeing your video play:

1. Press **Space** on your keyboard, or click the **▶ Play** button in the Transport bar at the bottom.
2. The playhead moves across the timeline and the video plays on the canvas preview.
3. If you have Show Mode active (or toggle it with **Shift+Escape**), the video also appears fullscreen on the assigned display output.

![Transport controls](/files/8ghI6NoDS37qT7YC8IGV)

**Playback controls to know:**

| Action                 | Keyboard | Mouse                        |
| ---------------------- | -------- | ---------------------------- |
| Play / Pause           | `Space`  | Click ▶ / ⏸ in the Transport |
| Stop (return to start) | `Escape` | Click ⏹ in the Transport     |
| Scrub through timeline | —        | Click or drag the playhead   |

Press **Space** again to pause, and **Escape** to stop and return to the beginning.

## Step 6 — Save Your Project

Save your work so you can pick up where you left off:

1. Press **Ctrl+S** or choose **File → Save**.
2. Enter a project name — e.g. `My First Project`.
3. The project is saved as a `.vpp` file in `Documents\Exaplay3\`.

::: warning Media files are referenced, not embedded The `.vpp` file stores references to your media files by their file path. If you move the media files to a different folder, Exaplay 3 will show missing-file warnings. Keep your media in a stable location. :::

***

## ✅ Checkpoint — What You've Accomplished

Congratulations! You have completed the essential Exaplay 3 workflow:

* [x] Launched the application and oriented yourself in the interface
* [x] Created a Screen mapped to a display output
* [x] Browsed for media in the File Browser
* [x] Added a video clip to the Timeline
* [x] Played the video back with the Transport controls
* [x] Saved the project as a `.vpp` file

This is the foundation of every Exaplay 3 project. From here, everything builds on these same concepts — more screens, more layers, effects, cue lists, and operator controls.

***

## What's Next?

You are ready for a more involved project. Continue to [Your First Project](/v3/getting-started/first-project.md) where you will:

* Set up **two screens** for a dual-projector setup
* Use **multiple layers** for background loops and title graphics
* Create **cue lists** for operator-driven control
* Share a **Control View** URL for your show operator

### Other Useful Links

* [Key Concepts](/v3/getting-started/key-concepts.md) — Review the terminology if anything was unclear
* [Interface Overview](/v3/user-interface/index.md) — Deep dive into every panel and tool
* [Output Setup](/v3/configuration/outputs.md) — Configure multi-monitor and multi-projector rigs
* [Media Playback](/v3/features/media-playback.md) — Supported codecs, performance tuning, looping options


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.exaplay.one/v3/getting-started/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.