Template System Overview

What is the tulip template system?

Tulip uses a template syntax inspired by Laravel's Blade. Templates are plain HTML files with the .tulip extension that support dynamic directives for layouts, components, variable output, control flow, and comments.

There is no JavaScript runtime — templates are compiled to static HTML at build time.

Layouts

Layouts let you define a shared page shell (head, nav, footer) and inject page-specific content into named sections:

@extends('layouts/main')

@section('content')
  <h1>My Page</h1>
@endsection

Layout files live in the layouts/ directory and use @yield to mark where sections are inserted. See Layouts for full details.

Components

Components are reusable template fragments that accept props and a slot for inner content:

@component('card', { title: "Hello" })
  <p>Card body here.</p>
@endcomponent

Component files live in the components/ directory. See Components for full details.

Expressions

Output variables using double curly braces. HTML is escaped by default for safety:

{{ site.name }}
{{ page.title }}

Use raw output when you need unescaped HTML:

{!! raw_html !!}

See Expressions for all available variables and escaping rules.

Control Flow

Conditionals and loops let you render content dynamically:

@if(show_nav)
  <nav>...</nav>
@endif

@for(post in posts)
  <article>{{ post.title }}</article>
@endfor

See Control Flow for conditionals, loops, includes, and comments.

Includes

Inline another template file. The included file is rendered in place with access to the same variables:

@include('partials/header')

The path is relative to the project root, without the .tulip extension. See Control Flow for more details.

Code blocks

Embed syntax-highlighted code examples with @code. Content is treated as raw text — no directives or expressions are processed, and HTML is escaped automatically:

@code('toml')
[site]
name = "My Site"
@endcode

This renders as a <pre><code> block with the specified language class for syntax highlighting.

Verbatim

Output raw content without processing directives or expressions:

@verbatim
{{ this is not evaluated }}
@if(this is ignored too)
@endverbatim

Comments

Template comments are stripped from the final HTML output:

{{-- This will not appear in the rendered page --}}

File structure

A typical tulip project organizes templates like this:

my-site/
  layouts/
    main.tulip        # shared page shell
  components/
    card.tulip        # reusable card component
    nav.tulip         # navigation component
  pages/
    index.tulip       # home page
    about.tulip       # about page