In the first line, we create a `$Container` to using Elexis API on `document.body` element. Then we see a `content` method after the container object, this method mean the following elements will be the content of container.
We can pass an array into `content` method. In this array, we put a new `<h1>` element which have a class name "title" and text content "Hello, world!".
Run the code, we will get this body structure in DOM:
```html
<body>
<h1class="title">Hello, world!</h1>
</body>
```
So far, we just simply do a hello world project that you can type less in HTML way, and these is not the point of ElexisJS. Let's figure out what ElexisJS will boost development speed in the following examples.
## Using `$State` to sync view and data changes
This line will create a `$State` value, usually we will put `$` sign behind variable name to mean this is a `$State` variable.
```ts
const number$ = $.state(42);
```
This `$State` value has been set a number `42`, which will become a number type `$State`. We can simply put this state value into any display content!
```ts
const value$ = $.state(42);
$(document.body).content([
$('input').type('number').value(value$),
$('p').content(['User input value: ', value$])
])
```
You will see the `<input>` element is fill with number `42`, and also `<p>` element will display `'User input value: 42'`. Now try to change input value in browser, the value text in `<p>` element will be synced by your input!
Using `set` method to set value of `$State`, all displayed content of `value$` will be synced.
