> For the complete documentation index, see [llms.txt](https://groophy.gitbook.io/bhdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://groophy.gitbook.io/bhdocs/guides/creating-your-first-project.md).

# Creating your first project

## The basics

With version 0.3.5, command rules are no longer irregular, learning these layouts makes it easy to use.

## Creating a project

Keeping simplicity at the forefront is our goal, so writing a simple screen is simple.

{% content-ref url="/pages/UpVXUobuYFEUeqecRFI0" %}
[window](/bhdocs/extras/element_types/window.md)
{% endcontent-ref %}

{% code title="FirstProject.BH" lineNumbers="true" %}

```csharp
set $windowName (window):
"Title": "Hello World",
"Width": "335",
"Height": "150"
;

show $windowName;
```

{% endcode %}

<figure><img src="/files/KpMkG7mgYu6dm7uQxvoQ" alt=""><figcaption><p>Output</p></figcaption></figure>

### Creating GUI

#### If you don't have [Bat.Bat](https://github.com/Batch-Man/BatCenter) in same folder or system environment variables can give error.

{% code title="GetInfo.BH" lineNumbers="true" %}

```csharp

//Made with BH

set $windowName (window):
"Title": "Clock",
"Width": "480",
"Height": "320",
"ResizeMode": "NoResize",
"Loaded": "Window_Loaded"
;

com new method -> $windowName as cs:
"name": "Window_Loaded",
"args": "sender, e",
"code": "
	Icon = new BitmapImage(new Uri(\"$srcpath\\\\clean.ico\"));
".
;

com new method -> $windowName as cs:
"name": "Btn_Clicked",
"args": "sender, e",
"code": "
	Detail.Content = Batch.Input(\"bat detail 17\").Stdout.ToString();
".
;

app new comp -> $windowName as (Button):
"inner": "Get Info For Gecho",
"Name": "Getbtn",
"VerticalAlignment": "Top",
"Click": "Btn_Clicked",
"Margin": "62,10,62,0".
;

app new comp -> $windowName as (Label):
"Name": "Detail",
"Margin": "0,30,0,0".
;

show $windowName;
```

{% endcode %}

<div><figure><img src="/files/8dVyD5TVt0syXUuL6hLF" alt=""><figcaption><p>Before Click</p></figcaption></figure> <figure><img src="/files/7BPnhPIH6OZG5n4ujF83" alt=""><figcaption><p>After Click</p></figcaption></figure></div>

{% embed url="<https://www.figma.com/file/vSJokFYf1RPdo2yE8Z8Jij/Untitled?node-id=0:1>" %}
