In this tutorial, we'll learn procs and syntax sugar provided by Karkas and build a layout with them. We'll start with basic rectangles, then play around with vertical and horizontal stacks, and build a form by composing those stacks. Finally, we'll create a layout that can show different content while preserving the basic page structure.

See the complete code of the tutorial app in the Karkas repo: https://github.com/moigagoo/karkas/tree/develop/tutorial.


You'll need to install Sauer package to set up and compile the tutorial app:

$ nimble install -y sauer


  1. Create a new Karax project:

    $ mkdir tutorial
    $ cd tutorial
    $ nimble init # create a "binary" package
    $ sauer init
  2. Open src/tutorial/pages/index.nim in your favorite editor. It should look like this:

    import karax/[karaxdsl, kdom, vdom]
    import kraut/context
    import ../pages
    import ../state
    proc render*(context: Context): VNode =
      currentPage = Page.index
      document.title = "index"
        h1: text "index"
  3. Build the app:

    $ sauer make
  4. Run a local web server and open the app in your browser:

    $ sauer serve --browse