# The first steps

## Installing the editor

The editor can be installed on Windows, Mac and Linux. Follow the link below.

[Download editor](https://hology.app/download)

#### Installing on Windows

If you download for windows, you may see a blue window saying that "Windows protected your PC". Simply click "More info" and then click "Run anyway".

## Prerequisites

### Software

In addition to the editor, you need to have both Node.js installed as well as a code editor. Any code editor should work. A popular one is Visual Studio Code.

[Download Node.js](https://nodejs.org/en/download)

[Download Visual Studio Code](https://code.visualstudio.com/download)

### Knowledge

In order to create something with Hology, some previous knowledge of web development and related technologies is necessary. This includes Typescript, HTML, CSS and how to use a terminal.

## Create a new project

To create a new project, open the Hology editor on your computer.

Click "Create a new project". Then set the name of the project, which could be the name of a game you will create. A template can be selected as a starting point. Select a UI framework such as React which will be set up for you in the project's code base that will be created that when creating the project.

<figure><img src="/files/NjYJGwXC4qY3N48VVYqA" alt=""><figcaption></figcaption></figure>

After clicking "Create", the project's code base will be setup and various dependencies necessary to build your project will be installed. After the installation has completed, your project should open in a new window.

A scene, which can represent the entire world of your game or a single game level, is created for you called demo. In order to use that scene in your game, you will refer to the name of the scene in your code.

## Running your game in a browser

The project is essentially just a website which means that during development, you can run the project game inside your browser.

To run you project, open a terminal and navigate to the project's folder and run the command`npm run dev`.

{% code fullWidth="false" %}

```
cd /path/to/my-project
npm run dev
```

{% endcode %}

A "localhost" address is logged (<http://localhost:5173/>). Open this address in your browser and you should now see your scene. Any changes you make to the scene in the Hology editor will be reflected in the browser window after refreshing.

### Using Powershell (Windows only)

If you are using windows, your default terminal is normally set to Powershell. You may get an error like below. This is expected if you have not previously configured Powershell to allow running scripts.&#x20;

```
npm : File C:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system.
```

Run the following command in the Powershell terminal to enable running scripts.

```
Set-ExecutionPolicy Unrestricted -Scope CurrentUser
```

#### Recommended VS Code extensions

If you are using VS Code as your code editor, the following extensions can help improving your workflow.&#x20;

* **Copy with imports** - This automatically generates imports for you when you copy code. When following tutorials, you will be copying and pasting code a lot and this extensions helps to not having to specify the imports manually.&#x20;
* **Pretty Typescript Errors** - Improves formatting of errors in code
* **Move TS - Move TypeScript files and update relative imports** - When moving files, it can be tedious to update imports. This fixes this.&#x20;
* **Git Graph** - Git it the recommended version control solution and you definitely should have version control in any coding project including hology engine projects. This extension makes it easier to have an overview of the git history and branches in VS Code as it shows the entire history of commits and you can easily inspect the changes performed in a previous commit as well as to revert back to a previous state.&#x20;


---

# 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.hology.app/getting-started/the-first-steps.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.