# Conditional rendering

If you want to render different things based on a condition you can use the conditional rendering.

# Simple if

{{#if condition}}
<p>Hello world</p>
{{/if}}

<script>
let condition = true;
</script>

# Else

{{#if condition}}
<p>Hello world</p>
{{#else}}
<p>Bye world</p>
{{/if}}

<script>
let condition = true;
</script>

# Else if

{{#if state === 0}}
<p>Hello world</p>
{{#elif state === 1}}
<p>Bye world</p>
{{#else}}
<p>Hello other dimension</p>
{{/if}}

<script>
let state = 0;
</script>