---
description: Components of Weblabs
---

# Components

Weblabs uses native HTML Components which are directly converted to HTML Elements when described. That means every HTML Component is valid in Weblabs too! But how will we translate HTML to our components?

Let's see an example below:

```html
<p>Hello World</p>
```

Now this is a HTML component, and how would we describe it in Weblabs? Well here it is

<pre class="language-javascript"><code class="lang-javascript"><strong>import { p } from '@weblabsjs/core/components'
</strong><strong> 
</strong><strong>p("Hello World")
</strong></code></pre>

As you can see, a HTML component is just a function in Weblabs, that means every html component will have it's own function, like

```javascript
import { p, h1, h2, div, section } from '@weblabsjs/core/components'

p("I am a pragraph")
h1("I am a large heading")
h2("I am smaller than large heading")
div("I am a container")
section("I am a section")
```

But in HTML, you can nest components, like

```html
<div>
    <p>Name: Weblabs</p>
    <p>Work: Javascript Framework</p>
</div>
```

So how we can do it in Weblabs? Well all the function you just saw as components also accept multiple components as their child elements, i.e

```javascript
import { div, p } from '@weblabsjs/core'

div(
    p("Name: Weblabs"),
    p("Work: Javascript Framework")
)
```

{% hint style="info" %}
Note: the html tag <mark style="color:green;">`<var>`</mark> clashes with the keyword <mark style="color:purple;">`var`</mark> in javascipt, hence if you want to use the <mark style="color:green;">`<var>`</mark> tag, call the <mark style="color:purple;">`Var`</mark>`()` function instead
{% endhint %}

It's that simple! You can now create layouts entirely on this architecture, and the intellisense that your IDE will provide, it will be even faster and you will have amazing developer experience!
