DEV Community: Ethosa

Writing Real-Time Voting App In Nim #1

Ethosa — Fri, 11 Aug 2023 16:02:35 +0000

Get Started

In this article we'll use these technologies:

Nim programming language 🔨
HappyX web framework 🎴
Tailwind CSS 3 ✨
SQLite as database ⚙

To make real-time voting application we need websockets. Websockets is mostly useful to give real-time features to your program.

HappyX web framework provides working with websockets so we need install only Nim and HappyX. 💡

Install

You can install Nim with two ways:

In this article we'll use choosenim.

Enter this command and follow instructions

wget -qO - https://nim-lang.org/choosenim/init.sh | sh

Next, we choose Nim v2.0.0

choosenim 2.0.0

Now we need to install HappyX web framework. We can do it with nimble package manager:

nimble install happyx@#head

Create Project

To create project just use these commands

mkdir vote_app
cd vote_app
hpx create --kind:SPA --name:client --use-tailwind
hpx create --kind:SSR --name:server

Next, open 📁 vote_app/server/src/main.nim. Let's write some procedures to work with database. Final version of main.nim:

# Import HappyX
import
  happyx,  # happyx web framework
  db_sqlite  # stdlib Sqlite


proc initDataBase(): DbConn =
  ## Creates Database connection.
  let res = open("votes.db", "", "", "")
  # Create users table
  res.exec(sql"""CREATE TABLE IF NOT EXISTS user (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    login TEXT NOT NULL,
    pswd TEXT NOT NULL
  );""")
  # Create votes table
  res.exec(sql"""CREATE TABLE IF NOT EXISTS vote (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    userId INTEGER NOT NULL,
    pollId INTEGER NOT NULL,
    answerId INTEGER NOT NULL
  );""")
  # Create poll table
  res.exec(sql"""CREATE TABLE IF NOT EXISTS poll (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    description TEXT NOT NULL
  );""")
  # Create poll answer table
  res.exec(sql"""CREATE TABLE IF NOT EXISTS answer (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    pollId INTEGER NOT NULL,
    title TEXT NOT NULL
  );""")
  res

proc users(db: DbConn): seq[Row] =
  ## Retrieves all created users
  db.getAllRows(sql"SELECT * FROM user")

proc votes(db: DbConn): seq[Row] =
  ## Retrieves all created votes
  db.getAllRows(sql"SELECT * FROM vote")

proc answers(db: DbConn): seq[Row] =
  ## Retrieves all created answers
  db.getAllRows(sql"SELECT * FROM answer")

proc polls(db: DbConn): seq[Row] =
  ## Retrieves all created polls
  db.getAllRows(sql"SELECT * FROM poll")


# Serve at http://127.0.0.1:5123
serve "127.0.0.1", 5123:
  # Connect to Database
  let db = initDataBase()

  # on GET HTTP method at http://127.0.0.1:5123/
  get "/":
    # Respond plain text
    "Hello, world!"

I create test data:

Now, let's write the frontend part. Go to 📁 vote_app/client/ and enter command:

hpx dev --reload

This command executes our single-page application and automatically opens the browser. Flag --reload enables hot code reloading 🔥.

Next, let's rewrite HelloWorld component. Open 📂 vote_app/client/src/components/hello_world.nim. Rename it to header.nim. Final version of the file:

# Import HappyX
import happyx


# Declare component
component Header:
  # Declare HTML template
  `template`:
    tDiv(class = "flex items-center justify-center w-fill sticky top-0 font-mono text-sm font-bold px-8 py-2 bg-purple-200"):
      tP(class = "scale-75 select-none cursor-pointer"):
        "✅ real-time voting app ❎"

📂 vote_app/client/src/main.nim:

# Import HappyX
import
  happyx,
  components/[header]


# Declare application with ID "app"
appRoutes("app"):
  "/":
    # Component usage
    component Header

So we got this

❗ (webpage is 200% scaled)

Next step is authorization.

Authorization

Users must be authorized to vote. So first we will add POST method to sing up and GET method for login

Backend

Go to 📂 vote_app/server/src/main.nim and write additional procedures:

proc userExists(db: DbConn, username: string): bool =
  ## Returns true if user is exists
  for user in db.users():
    if user[1] == username:
      return true
  false

proc getUser(db: DbConn, login, password: string): Row =
  ## get user by password and login
  for user in db.users():
    # Compare user login and user password hash
    if user[1] == login and check_password(password, user[2]):
      return user
  Row(@[])

Next step is to declare the request model for POST method:

# Declare Auth request model to user registration
model Auth:
  username: string
  password: string

Authorization mount 🔌

mount Authorization:
  get "/sign-in[auth:Auth]":
    ## Authorizes user if available.
    ## 
    ## On incorrect data responds 404.
    ## On success returns user's ID
    var user = db.getUser(query~username, query~password)
    if user.len == 0:
      statusCode = 404
      return {"response": "failure"}
    else:
      return {"response": parseInt(user[0])}
  post "/sign-up[auth:Auth]":
    ## Registers user if available.
    ## 
    ## When username is exists responds 404
    if db.userExists(auth.username):
      statusCode = 404
      return {"response": fmt"failure. user {auth.username} is exists."}
    else:
      db.exec(
        sql"INSERT INTO user (login, pswd) VALUES (?, ?)",
        auth.username, generate_password(auth.password)
      )
      return {"response": "success"}

The final step is to use mount in our server 💡

# Setup CORS
regCORS:
  origins: ["*"]
  headers: ["*"]
  methods: ["*"]
  credentials: true


# Serve at http://127.0.0.1:5123
serve "127.0.0.1", 5123:
  # Connect to Database
  let db = initDataBase()

  # on GET HTTP method at http://127.0.0.1:5123/auth/...
  mount "/auth" -> Authorization

Let's start our app:

cd vote_app/server/src
nim c -r main.nim

User registration [POST]	User authorization [GET]

Frontend

On the frontend side we will create a small reg/auth form. Let's create a file vote_app/client/src/components/auth.nim:

import happyx


component Authorization:
  # Callback that can be notified on auth is success 🔔
  callback: (proc(authorized: bool): void) = (proc(authorized: bool) = discard)

  `template`:
    tDiv(class = "flex flex-col px-6 py-4 items-center rounded-md drop-shadow-2xl bg-purple-100 gap-8"):
      tP(class = "font-mono font-bold"):
        "authorization 🔐"
      tDiv(class = "flex flex-col gap-2"):
        tInput(id = "login", placeholder = "Username ...", class = "text-center rounded-md px-4 font-mono")
        tInput(id = "password", `type` = "password", placeholder = "Password ...", class = "font-mono text-center rounded-md px-4")
      tDiv(class = "flex justify-center items-center w-full justify-around"):
        tButton(class = "bg-none rounded-md px-2 text-sm font-mono border-2 border-purple-600 hover:border-purple-700 active:border-purple-800 transition-all"):
          "sign in"
          @click:
            # Try to authorize
            let
              inpLogin = document.getElementById("login")
              inpPassword = document.getElementById("password")
            auth(self.Authorization, inpLogin.value, inpPassword.value)

  [methods]:
    proc auth(username, password: cstring) =
      buildJs:
        function handleResponse(response):
          # Handle authorization response
          console.log(response)
          console.log(response.response)
          if typeof response.response == "number":
            nim:
              self.callback.val()(true)
          else:
            nim:
              self.callback.val()(false)
        fetch("http://localhost:5123/auth/sign-in?username=" + ~username + "&password=" + ~password).then(
          (e) => e.json().then(
            (response) => handleResponse(response)
          )
        )

Let's use our component ✨
vote_app/client/src/main.nim:

# Import HappyX
import
  happyx,
  components/[header, auth]


# Declare application with ID "app"
appRoutes("app"):
  "/":
    # Component usage
    component Header
    tDiv(class = "absolute top-0 bottom-0 left-0 right-0 flex flex-col justify-center items-center"):
      component Authorization

So we got this authorization window

Let's show polls on user authorized ✨

First we'll add GET method that will respond polls data on the server

  get "/polls":
    var polls = newJArray()
    for poll in db.polls():
      polls.add(%*{
        "id": poll[0],
        "title": poll[1],
        "description": poll[2]
      })
    return {
      "response": polls
    }

Create polls.nim file into 📁 vote_app/client/src/components.
Add the code snippet below:

import happyx


component Polls:
  data: seq[tuple[
    i: int,
    t, d: cstring,
    answers: seq[tuple[i, pId: int, t: cstring]]
  ]] = @[]

  `template`:
    tDiv(class = "flex flex-col gap-4 w-full h-full justify-center items-center px-8"):
      for poll in self.data:
        tDiv(class = "w-full rounded-md bg-purple-100 drop-shadow-xl px-8 py-2"):
          tP(class = "font-mono font-bold lowercase"):
            {poll.t}
          if poll.d.len > 0:
            tP(class = "font-mono text-sm opacity-75 lowercase"):
              {poll.d}
          tDiv(class = "flex flex-col gap-2"):
            for answer in poll.answers:
              tDiv(class = "flex font-mono lowercase font-sm justify-center items-center rounded-md bg-purple-50 select-none cursor-pointer"):
                {answer.t}

  @created:
    self.loadPolls()

  [methods]:
    proc loadPolls() =
      # Disable renderer at few time
      enableRouting = false
      # Write pure JavaScript with Nim syntax
      buildJs:
        function foreach(data):
          # Declare nim variables
          nim:
            var
              id: int
              title: cstring
              description: cstring
              answers: seq[tuple[i, pId: int, t: cstring]] = @[]
          # Load data from JS
          ~id = data.id
          ~title = data.title
          ~description = data.description
          # Load answers from JS And add in Nim
          for answer in data.answers:
            nim:
              var
                answerId: int
                pollId: int
                answerTitle: cstring
            ~answerId = answer.id
            ~pollId = answer.pollId
            ~answerTitle = answer.title
            nim:
              # Load JS data to Nim
              answers.add((answerId, pollId, answerTitle))
          nim:
            self.data->add((id, title, description, answers))
        function handlePolls(response):
          # Handle response
          response.forEach(e => foreach(e))
          nim:
            enableRouting = true
            # Rerender our app
            application.router()
        # Fetch data from our API
        fetch("http://localhost:5123/polls").then(e => e.json().then(
          x => handlePolls(x.response)
        ))

Next step is component usage. Let's rewrite vote_app/client/src/main.nim:

# Import HappyX
import
  happyx,
  components/[header, auth, polls]


var authState = remember false


proc handleAuth(authorized: bool) =
  authState.set(authorized)


# Declare application with ID "app"
appRoutes("app"):
  "/":
    # Component usage
    component Header
    tDiv(class = "absolute top-0 bottom-0 left-0 right-0 flex flex-col justify-center items-center"):
      if not authState:
        component Authorization(callback = handleAuth)
      else:
        component Polls

And we got this after authorization:

See you soon! 👋

Source code

Component In HappyX

Ethosa — Wed, 26 Jul 2023 05:17:05 +0000

With HappyX you can create single-page applications. Most often components are used for this purpose.

And HappyX components is really powerful.

Declaration 🍍

Components declaration is very easy, ex:

component MyComponent:
  `template`:
    "Hello, world!"

In this example we declare component named MyComponent.

Body 👨‍🔬

Component body consists of:

`template` - HTML
`script` - code that calls every rerender
`style` - isolated CSS (works with current component)
[methods] - methods that can be called.
fields - private/public fields
constructors - component constructors

Any part of the component is optional.

As JS/CSS:

HappyX provides DSL (Domain-specific language) for HTML, CSS and JS.

Components can use all of these DSLs.

`template` uses HTML DSL;
`script` as js uses JS DSL;
`style` as css uses CSS DSL.

`template`, `script`, `style`

These statements is main in component body.

component A:
  `template`:
    # Here is HTML
    tDiv(id = "..", class = "....", style = "....."):
      "Hello, world!"
  `script`:
    echo "Hello from A"
  # To enable syntax highlight
  # use official HappyX extension
  # for visual studio code
  `style`: """
  div {
    ...
  }
  """

Fields

Component fields may be private or public.

component MyComponent:
  privateField: int
  privateFieldWithDefaultValue: string = ""
  *publicField: float
  *publicFieldWithDefaultValue: seq[int] = @[1, 2, 3]

Methods

Component methods is automatically got self param

component MyComponent:
  left: int = 0
  right: int = 0

  [methods]:
    proc sum(): int =
      self.left + self.right

Constructors

By default you can use component and send some params to it.

component A:
  a: int = 0
  b: string = "asd"
...

appRoutes "app":
  "/":
    # Default constructor usage
    component A()
    component A(a = 100)
    component A(b = "hello")
    component A(a = 1, b = "sss")

Constructors expand component usage:

component A:
  a: int = 0
  b: string = "asd"

  # Constructor
  constructor(a: int):
    self.a = a*a*a
...

appRoutes "app":
  "/":
    # Constructor usage
    component A->constructor(10)

Writing Modern Web Applications In Nim

Ethosa — Sat, 22 Jul 2023 04:54:00 +0000

Nim has two famous web frameworks for frontend and backend development - Jester and Karax, but this post not about them.

This post about HappyX web framework.

In HappyX a lot of things runs at compile-time due to metaprogramming (macro-oriented). It's mean that your web application will be faster than more other apps created in other web frameworks.

In HappyX you can write both server-side and client-side applications with the same code. This allows developers spend less time to development.

Here also a LOT of syntax sugar due to DSL (Domain-specific language), ex:

# Server-side application example
import happyx


# declare server at http://127.0.0.1:5000
serve "127.0.0.1", 5000:
  # Will match /user/id100, /user/id0, /user/id25, etc.
  # Don't match /user/idSomeId
  get "/user/id$id:int":
    # Respond JSON
    # `id` is immutable variable
    return {"response": fmt"Hello, user[{id}]"}

  # Will match /post/c0ffe, /post/babe, /post/cafe, etc.
  # Don't match /post/SomeId
  get "/post/$postId:/[a-fA-F0-9]+/":
    # Respond JSON
    # `postId` is immutable variable
    return {"response": postId}

There are also CLI for creating, building and serving your projects!

hpx create --name my_project --kind SPA --use-tailwind
cd my_project
hpx build
hpx dev --reload

You can also convert HTML files into HappyX files with html2tag command:

hpx html2tag source.html --output output

Frontend Example

import happyx

# Declare our application and set target element with id="app"
appRoutes "app":
  # Will be at example.com/#/home
  "/home":
    tDiv(class = "someClass"):  # equal to <div class="someClass">
      "Hello, world!"  # equal to Hello, world!

Backend Example

import happyx

# Declare our application
serve "127.0.0.1", 5000:
  # will be at http://127.0.0.1:5000/
  get "/":
    # plain/text
    return "Hello, world!

Write Simple RestAPI In Nim With Happyx #4

Ethosa — Sat, 24 Jun 2023 00:15:52 +0000

Hi there! 👋

Previously we worked on posts 👨‍🔬

In this part we refactor our code and mount posts.

At first create /src/mounts/posts.nim and write

import happyx

In main.nim delete all routes that provides work with posts.

import
  # This will import HappyX framework
  happyx


# Setting up our server at `127.0.0.1:5000`
serve("127.0.0.1", 5000):
  var posts = %*[
    {
      "title": "Hello",
      "text": "world"
    }, {
      "title": "Bye",
      "text": ":("
    }, {
      "title": "Perfect nim web framework?",
      "text": "it's HappyX 🍍"
    },
  ]

  # on GET HTTP method at 127.0.0.1:5000/hello-world
  get "/hello-world":
    # We'll see "Hello, world!"
    "Hello, world!"

And import posts into main:

import
  # This will import HappyX framework
  happyx,
  ./mounts/[posts]

Write in mounts/posts.nim:

# Request model AddPost
# with two string fields
model AddPost:
  title: string
  text: string


mount Posts:
  # on GET HTTP method at 127.0.0.1:5000/posts
  get "/":
    # will responds all posts
    return posts

  # on GET HTTP method at 127.0.0.1:5000/post
  get "/$index:int":  # index is post index
    if posts.len > index:
      # try open 127.0.0.1:5000/post0
      return posts[index]
    else:
      # try open 127.0.0.1:5000/post10
      return {
        "error": "post index is wrong"
      }

  # on POST HTTP method at 127.0.0.1:5000/post/
  post "/[postData:AddPost]":
    posts.add(%*{
      "title": postData.title,
      "text": postData.text
    })
    return {"response": {
      "index": posts.len - 1
    }}

And mount it:

  ...

  mount "/posts" -> Posts

  # on GET HTTP method at 127.0.0.1:5000/hello-world
  get "/hello-world":
    # We'll see "Hello, world!"
    "Hello, world!"

Now see
GET http://127.0.0.1:5000/posts/
GET http://127.0.0.1:5000/posts/1
POST http://127.0.0.1:5000/posts/

Source code

Writing Simple RestAPI in Nim With HappyX #3

Ethosa — Fri, 26 May 2023 14:58:59 +0000

Hi there 👋!

Previously we add posts getting 🙂.

Now we implement post adding ✌.

At first go into src/main.nim and add Request Model

import
  # This will import HappyX framework
  happyx

# Request model AddPost
# with two string fields
model AddPost:
  title: string
  text: string

After this let's create post addition method 🍍

  # on POST HTTP method at 127.0.0.1:5000/post/
  post "/post/[postData:AddPost]":

Here we use AddPost as postData immutable var 🎈

Let's add sended post into posts variable

  # on POST HTTP method at 127.0.0.1:5000/post/
  post "/post/[postData:AddPost]":
    posts.add(%*{
      "title": postData.title,
      "text": postData.text
    })

Here we convert AddPost model to JsonNode object and add it into our posts

Let's says user about post successfully added into our posts ✨
Just add return statement

  # on POST HTTP method at 127.0.0.1:5000/post/
  post "/post/[postData:AddPost]":
    posts.add(%*{
      "title": postData.title,
      "text": postData.text
    })
    return {"response": {
      "index": posts.len - 1
    }}

You can test it into postman ✌
URL: http://localhost:5000/post/
Method: POST
JSON raw body:

{"title": "Your title", "text": "your text"}

And try to open http://localhost:5000/posts after adding post 👀

That's all! Good luck ✨

Source code

Writing Simple RestAPI in Nim With HappyX #2

Ethosa — Wed, 24 May 2023 05:20:34 +0000

Previously we added /hello-world method that responds "Hello, world!" ✌

In this series, we'll attempt to write methods for working with simple posts (without connecting to a database for now). 🙂

Let's open /tutorial/src/main.nim 🍍

Rewrite this

# Setting up our server at `127.0.0.1:5000`
serve("127.0.0.1", 5000):

to this

# Setting up our server at `127.0.0.1:5000`
serve("127.0.0.1", 5000):
  var posts = %*[
    {
      "title": "Hello",
      "text": "world"
    }, {
      "title": "Bye",
      "text": ":("
    }, {
      "title": "Perfect nim web framework?",
      "text": "it's HappyX 🍍"
    },
  ]

After this we add a new method that responds all posts 🔨
Try recompile /src/main.nim and open ✌http://localhost:5000/posts

  # on GET HTTP method at 127.0.0.1:5000/posts
  get "/posts":
    # will responds all posts
    return posts

Add method that responds only one post also 🛠

  # on GET HTTP method at 127.0.0.1:5000/post
  get "/post$index:int":  # index is post index
    if posts.len > index:
      # try open 127.0.0.1:5000/post0
      return posts[index]
    else:
      # try open 127.0.0.1:5000/post10
      return {
        "error": "post index is wrong"
      }

And open http://localhost:5000/post1 as example 🙂

That's all, good luck ✨

Source code

Writing Simple RestAPI in Nim With HappyX #1

Ethosa — Mon, 22 May 2023 15:37:24 +0000

In this tutorial series we create RestAPI in Nim using HappyX web framework ✌

Getting Started 🔨

At first we need to install Nim lang

After this via nimble we install HappyX 🔌

nimble install happyx@#head

I will edit my code with VS Code ✌

Project Creation 🛠

Just run this command

hpx create --name:tutorial --kind:SSG
cd tutorial/src

Hello, world! ✌

Let's open tutorial/src/main.nim
You'll see this (without comments)

import
  # This will import HappyX framework
  happyx


# Setting up our server at `127.0.0.1:5000`
serve("127.0.0.1", 5000):

  # on GET HTTP method at 127.0.0.1:5000/
  get "/":
    # We'll see "Hello, world!"
    "Hello, world!"

Let's rename route

  # on GET HTTP method at 127.0.0.1:5000/hello-world
  get "/hello-world":

Now let's try it 🎈

nim c -r -d:debug main

Open browser and go to http://localhost:5000/hello-world 🥳

Source code

RestAPI Request Models In Nim 👑

Ethosa — Fri, 19 May 2023 15:59:34 +0000

HappyX provides request models since v0.20.0

You could also saw request models in Fastapi

Model declaring 🛠

model MyModel:
  param1: string
  param2: int = 100  # you can use default values 🍍

Model usage 🎈

get "/[m:MyModel]":  # you can't use model as arg name because model is macro
  echo m.param1
  echo m.param2
  req.answer { "response": {
    "one": m.param1,
    "two": m.param2
  }}

And you can send GET request using Postman:
http://......./
with JSON body:

{
  "param1": "123"
  "param2": 2
}

HappyX web-framework

Ethosa — Thu, 18 May 2023 13:18:15 +0000

What Is HappyX? 🤔

HappyX is a macro-oriented asynchronous web-framework written in Nim ✨

Why HappyX? 🤨

HappyX provides one solution for all project types.
Single page applications, Static site generation, Server side rendering - you can make it easy with HappyX 🎈

Features 🍍

Switchable HTTP server for SSR projects 🔌
Configurable project, routing and path params ⚙
CLI tool for working with your projects 💻
Hot code reloading in single page applications (and other project types in future) 🔥

Source Code 💾

You can find source code here

Writing API in Nim

Ethosa — Fri, 12 May 2023 18:19:51 +0000

Why Nim 🤔

Nim is powerful programming language that compiles into C, Cpp, ObjC and JS.

You can install it here

HappyX ✨

HappyX is an asynchronous web framework, written in Nim.
Source code
We'll work with it.

nimble install happyx

Getting Started 👔

You should create project. Choose project name and mark project type as SSG.

hpx create

You should move into project folder after this.

cd PROJECT_NAME/src

Development 🛠

Let's launch project.

nim c -r main

Also you can use flags -d:httpx and -d:micro to use alternative HTTP servers.

Let's change main.nim. For it you should open src/ folder and open main.nim file. You will see 👀

import happyx

serve("127.0.0.1", 5000):
  get "/":
    "Hello, world!"

Rewrite this 👨‍🔬

import happyx

# Go to http://127.0.0.1:5000/ 👨‍🔬
serve("127.0.0.1", 5000):
  # Assignment counter
  var counter = 0

  # You can open / in your browser and see result 🍍
  get "/":
    inc counter
    # Return string
    "counter = {counter}"

  # You can open /upd or /upd100 in your browser and see result 🍍
  get "/upd{i?:int}":
    counter += i
    "counter = {counter}"

And recompile 🛠

That's all! Good Luck! 🙂

Also you can read about SPA in Nim

Writing Single Page Application With Nim 👑

Ethosa — Tue, 09 May 2023 04:13:07 +0000

Why Nim 🤔

Nim is powerful programming language that compiles into C, Cpp, ObjC and JS (what we need).

You can install it here

HappyX ✨

HappyX is an asynchronous web framework, written in Nim.
Source code
We'll work with it.

nimble install happyx

Getting Started 👔

You should create project. Choose project name and mark project type as SPA.

hpx create

You should move into project folder after this.

cd PROJECT_NAME

Development 🛠

Let's launch project.

hpx dev --reload

The dev command will hosts our project at localhost:5000.
Flag --reload will checks all changes in project.

Also you can use flags --host=0.0.0.0 and --port:1234 💡

Now you can change anything and see result in opened web page! 🙂

Let's change main.nim. For it you should open src/ folder and open main.nim file. You will see

import
  happyx,  # import main library
  components/[hello_world]  # import components

# Binds single page application to element with id "app"
# In our case - <div id="app"></div>
# Command `hpx create` reproduce all need files
appRoutes("app"):
  "/":  # Route our app
    component HelloWorld  # It is a component usage

Try to change "/" route

"/":
  component HelloWorld
  tButton:  # tButton will reproduce <button> tag
    "Click me!"  # This will reproduce only text
    @click: # This will handle button clicks
      # Here you can use real Nim code 💡
      # As example you can write in browser console
      echo "Clicked!"

OK, save it and see result! 🙂

Component Development 🛠

Move into src/components/ folder. Here automatically created component hello_world.nim

import happyx  # Import main library

# component declaration
component HelloWorld:
  `template`:  # HTML part 📕
    # Here you can write HTML
    "Hello, world!"

  `script`:  # Script part, optionally 🛠
    # Here you can use real Nim code 💡
    echo "Start coding!"

  # Also can be `style` part with component styles 🎴
  # `style`:
  #   """
  #   div {
  #     background: gray;
  #   }
  #   """

That's all! Good Luck! 🙂

Also you can read about API in Nim