Creating web pages

Web pages are accessed in the browser via a URL, which is mapped to a route in the server. The server then sends the HTML content of the page to the browser. To define a page with Genie, you can use the route function and the do end syntax to define the page's content as:

app.jl
using Genie
route("/message") do
    name = "John"
    h1("Welcome to Genie $name !")
end
up() # start the server

If you paste the above code in the REPL, you can access the page by navigating to http://localhost:8000/message in your browser. To add more pages, simply define more routes with different endpoints.

To enable features like autoreloading and improved logging, write the code for your app in a file named app.jl and launch the Genie server from the REPL with:

using Genie; Genie.loadapp(); up(8000,async=true)

Low-code UI API

The page's code is written using Genie's low-code API, which implements the standard HTML tags like p for paragraphs, h1 for headers, img for images, and so on. See the list of supported tags here.

You can nest elements by passing them as arguments like

Html.div(p("Welcome to Genie"))
Html.div([h1("Hello John"), p("Welcome to Genie")]) # nesting multiple elements

Moreover, you can pass arguments to the tags to set parameters or customize style. For instance, this code

Html.div([
    h1(style="color:red", "Welcome to Genie !"),
    a(href="/home", "Home")]
)

yields the following HTML:

<div><h1 style="color:red">Welcome to Genie hello !</h1><a href="/home">Home</a></div>

You can test it yourself by pasting the code into the Julia REPL.

Alternative page definitions

Besides using the do end syntax, you can also define the page's code in a function and pass it to the route as

hello() = h1("Welcome to Genie !")
route("/message", hello)

Moreover, you can define the page's code in a file and include it as

app.jl
route("/message") do
    name = "John"
    html(Genie.Renderer.filepath("message.jl"), name=name)
end
message.jl
h1("Welcome to Genie $name !")

The html function renders the code and adds information to the HTTP response header.

You can also use HTML by directly replacing the Julia code and files with HTML strings and files.

app.jl
route("/message") do
    html(Renderer.filepath("pages/message.jl.html"))
end
message.jl.html
<h1>Welcome to Genie $name !</h1>

To learn more about the types of routes and how to pass parameters to a page, see the routing section in the reference.

Executing Julia code in a page

It is possible to embed Julia code in a page's code that will be executed when the page is loaded. To do so, use the $ interpolation operator to wrap Julia code as

low-code
p("1+1 is: $(1+1)")
HTML
<p>1+1 is: $(1+1)</p>

To include multiline code blocks, use the <% and %> delimiters as

HTML
<p>
    <% for i in 1:3 %>
    $i
    <% end %>
</p>

Remember to always pass any variable to be printed to the html renderer.

Including static assets

To display static assets such as images, or include assets in the head of a page, place them first in the public folder. They will be automatically picked up by the server and served at the root path /. Then, the assets can be included in any page like in the example below.

.
├── app.jl
├── public/
│   ├── style.css
│   ├── meta.png
│   └── fig.png
app.jl

function assets()
[
    head([
        meta(charset="utf-8")
        meta(name="og:image", content="/meta.png")
        link(rel="stylesheet", href=("/style.css"))
        title("Including assets")
    ])
    body([
            img(src="/fig.png",alt="plot")
        ])
]
end
route("/", assets)

Creating an API

Expose your code's functions via an API.

Genie