Attributes can be assigned in similar fashion to output:

a href="" target="_blank" Elixir
<a href="" target="_blank">Elixir</a>

Elixir expressions can be used as attribute values using the interpolation syntax:

- my_variable = ""
a href="#{my_variable}" Elixir
<a href="">Elixir</a>

Boolean attributes can be set using boolean values:

input type="checkbox" checked=true
input type="checkbox" checked=false
<input type="checkbox" checked>
<input type="checkbox">

There is a literal syntax for class and id attributes:
<div class="foo bar"></div>
<select class="bar"></select>
<div id="foo"></div>
<body id="bar"></body>

Elixir code

Elixir can be written inline using - and =.
- evalutes the expression.
= evalutes the expression, and inserts the value of the expression.

- number = 40
p = number + 2

The interpolation syntax can be used to insert expressions into text:

- name = "Felix"
p My cat's name is #{name}
<p>My cat's name is Felix</p>


Lines can be commented out using the `/` character:

/ p This line is commented out
p This line is not
<p>This line is not</p>

HTML comments can be inserted using /!

/! Hello, world!
<!--Hello, world!-->


We can use the regular Elixir flow control such as the if expression:

- condition = true
= if condition do
  p It was true.
- else
  p It was false.
<p>It was true.</p>


There are shortcuts for common doctypes:

doctype html
doctype xml
doctype transitional
doctype strict
doctype frameset
doctype 1.1
doctype basic
doctype mobile
<!DOCTYPE html>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "">


Elixir's collection manipulation expressions can be used to iterate over collections in your templates:

/ with
- names = ["Sarah", "Mia", "Harry"]
= names, fn name ->
  p= name
/ or with comprehension
- names = ["Sarah", "Mia", "Harry"]
= for name <- names do
  p= name

Embedded engines

  console.log("Test javascript");

  body {
    color: black;

  a = [1, 2, 3]
  b =, &(&1 + 1))

  Hello from <%= "eex" %>