> For the complete documentation index, see [llms.txt](https://reyvaleza.gitbook.io/vibe.d-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reyvaleza.gitbook.io/vibe.d-tutorial/diet-templates.md). # Diet templates Vibe.d comes with a templating engine called Diet. For now, create **views\simplehello.html** with the following code: ```html Simple hello!

Simple hello, World!

How are you doing today?

``` Edit the **source\app.d** file to make it display the **views\simplehello.html** file. ```d import vibe.vibe; void main() { auto settings = new HTTPServerSettings; settings.port = 8080; settings.bindAddresses = ["::1", "127.0.0.1"]; auto router = new URLRouter; router.get("/",staticTemplate!"simplehello.html"); router.get("*", serveStaticFiles("public/")); auto listener = listenHTTP(settings, router); scope (exit) listener.stopListening(); runApplication(); } ``` Then build and run the project and refresh the browser to see the new message:

We just tested that the new HTML file is working. Now, let’s convert the HTML file into a Diet template file. Save the **views\simplehello.html** file as **views\simplehello.dt** with this contents: ```pug doctype html html head title Simple hello using a template body h1 Simple hello world from a template! h2 How are you doing today? | Please visit the home of Vibe.d ``` It feels weird at first, but then you realize there is less to type when using Diet templates. Then edit **source\app.d** to make it display **simplehello.dt** instead:

import vibe.vibe;

void main()
{
  auto settings = new HTTPServerSettings;
  settings.port = 8080;
  settings.bindAddresses = ["::1", "127.0.0.1"];
  auto router = new URLRouter;
  router.get("/",staticTemplate!"simplehello.dt");
  router.get("*", serveStaticFiles("public/"));
  auto listener = listenHTTP(settings, router);
  scope (exit) listener.stopListening();
  runApplication();
}

In your terminal, stop the app if it is still running **(Ctrl-C)**, then compile and run. **dub --force** We sometimes use the **--force** option to tell dub to recompile everything again, just in case it fails to see that some files were changed and needed to be recompiled or that there are updated libraries that needed to be downloaded again. Refresh your browser to see the changes.

The syntax of Diet templates is based on Jade templates ([http://jade-lang.com/](https://www.google.com/url?q=http://jade-lang.com/\&sa=D\&source=editors\&ust=1676218018149446\&usg=AOvVaw1-f8GuBCNVncVKaTo93xjV)). Here are some of the basic rules: By convention, the Diet template file extension is **.dt** The first word on a line is usually an **HTML** tag: \Hello, world!\ \
in Diet, that line is equivalent to ```pug span Hello, world! br ``` **|** (pipe) tag at the start of a line means the line is composed of plain text ```jade | Hello world ``` **:javascript** tag at the start of a line means JavaScript code on the following indented lines ```javascript :javascript alert(‘Hello, world!’); ``` **:css** tag at the start of a line means CSS code on the following indented lines ```css :css .alert-message { font-size: 20px; color: brown; } ``` The attributes of a tag are comma-separated values inside parentheses: \

becomes ```pug div(class=”high-status”, id=”high-status-1”); ``` A tag followed by a . (dot) followed by an identifier name means a CSS class name: \

becomes ```pug div.high-status ``` A tag followed by a # (hash) followed by an identifier name means a CSS ID name: \

becomes ```pug div#high-status-1 ``` CSS class names and IDs can be combined: \

becomes ```pug div.high-status#high-status-1 ``` CSS classes can be strung together with dots: \

becomes ```pug div.high-status.row-major.row-inner ``` Plain text following a tag should be separated by a space: \

Hello! becomes ```pug div Hello! ``` \

Hello, world! becomes ```pug div(class=”high-status”) Hello, world! ``` or ```pug div.high-status Hello, world! ``` An HTML tag ending in a . (dot) means multi-line plain text follows: ```pug div. These lines are all simple text but may contain HTML code like this ``` Plain text may contain HTML code: ```pug | Like this. ``` Nesting of elements is done by adding indentation: ```pug div Like this span this is inside the div div this

is inside the span | and there is no need for end tags ``` [^1]: