---
description: Creating a Hello World using Weblabs
---

# Hello World

The first thing any developer does when learning a new piece of technology is to greet the world, and Weblabs is no exception.

From the previous page, I assume you have learned to create a Weblabs Project. Let's create a new project called hello-world

```bash
$ npm create vite@latest
    ? Project name: > hello-world
    ? Select a framework: >
    >    Vanilla
    ? Select a variant: >
    >    Typescript
$ cd hello-world
$ npm i
$ npm i @weblabsjs/core
```

Now, you will see a main.ts file. Open the file, and delete all the code inside that file, and write the code given below:

```javascript
//in main.ts
import { render } from '@weblabsjs/core'
import { p } from '@weblabsjs/core/components'

function HelloWorld() {
    return p("Hello World")
}

render("app", HelloWorld())
```

Now you will also see a index.html file. Open that file and add the code given below

```html
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="app">
        </div>
        <script type="module" src="/main.ts"></script>
    </body>
</html>
```

Now you are ready to test your app for the first time! Run the following command to start the server

```bash
$ npm run dev
```

Now open the browser to the URL it points to. usually it is `http://localhost:5173`

When you open the browser, it should show something like this

<figure><img src="https://100730191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgcENi8WepIMy5Us3jkKn%2Fuploads%2FJeUAfnW16pepChy5CopF%2FHelloWorld.png?alt=media&#x26;token=3c2496b1-c097-4bf0-8d2e-59f6d5bb24bf" alt=""><figcaption><p>Hello World</p></figcaption></figure>

Congrats on creating your app! Now you can go ahead and learn exactly how the framework works and how you can use different functions and methods to create amazing apps!

Also if you need to refer the functions, you can always go to the API Reference section of the Weblabs Architecture group.
