Rocal UI - A simple template engine with Rust

Hi developers, as I introduced Rocal - Full-Stack WASM framework in my previous article, today I'm really pleased to show you guys "Rocal UI - A simple template engine with Rust". Although this template engine is basically intended to use with Rocal framework to craft views, it can be used anywhere with Rust. Let's begin with syntax of Rocal UI. Here is a simple example including variables, if-else control, and for-loop control. view! { {{ title }} if user.id

May 1, 2025 - 15:23

Rocal UI - A simple template engine with Rust

Hi developers, as I introduced Rocal - Full-Stack WASM framework in my previous article, today I'm really pleased to show you guys "Rocal UI - A simple template engine with Rust".

Although this template engine is basically intended to use with Rocal framework to craft views, it can be used anywhere with Rust.

Let's begin with syntax of Rocal UI. Here is a simple example including variables, if-else control, and for-loop control.

view! {
  <div class="container">
    <h1 class="title">{{ title }}h1>

    if user.id <= 10 {
      <p>{ "You are an early user!" }p>
      <a href={{ reward_url }}>{ "Click here to get rewards!" }a>
    } else if user.id <= 20 {
      <p>{ "You are kind of an early user." }p>
      <a href={{ sort_of_reward_url }}>{ "Check it out for your reward." }a>
    } else {
      <p>{ "You are a regular user." }p>
    }

    <hr/>

    <ul>
      for article in articles {
        <li><a href={{ article.url }}>{{ article.title }}a>li>
      }
    ul>
  div>
}

It's straight forward, isn't it?

{{ variable }} : as you saw the code above, you can use any variable with it
if-else : you can utilize if-else even else-if as below

if user.id <= 10 {
    <p>{ "You are an early user!" }p>
    <a href={{ reward_url }}>{ "Click here to get rewards!" }a>
} else if user.id <= 20 {
   <p>{ "You are kind of an early user." }p>
   <a href={{ sort_of_reward_url }}>{ "Check it out for your reward." }a>
} else {
  <p>{ "You are a regular user." }p>
}

for-in: This can be used as same as Rust syntax

for article in articles {
  <li><a href={{ article.url }}>{{ article.title }}a>li>
}

{ "string" }: This is sort of shorthand of variable embedding for only string. You can use it with regular string, exactly, &str in Rust context

Advanced use

view! {} produces HTML string technically, so you can embed view! in another view! like using it as a partial template.

let button = view! {
  <button type="submit" class="btn btn-primary">
    Submit
  button>
};

view! {
  <form action={{ &format!("/articles/{}", article.id) }}>
    <input type="text" />
    {{ &button }}
  form>
}

On top of that, so {{ variable }} can take any expression that emits &str of Rust, if you want to do string interpolation, you can write like {{ &format!("Hi, {}", name) }}.

And more...

fn button(ty: &str, class: &str, label: &str) -> String {
  view! {
    <button type={{ ty }} class={{ class }}>
      {{ label }}
    button>
  }
}

view! {
  <form action="/posts">
    <input type="text" />
    {{ &button("submit", "btn btn-primary", "Submit") }}
  form>
}

Can be used like a component as well.

How to install

On MacOS or Linux

$ curl -fsSL https://www.rocal.dev/install.sh | sh

On Windows
(if you have not had cargo yet, follow this link first)

$ cargo install rocal --features="cli"
$ rocal new -n yourapp

Then in yourapp/src/templates/root_template.rs, you could see an example of usage of Rocal UI