Introduction to Blade: Mastering Laravel's Templating Engine

Learn how to use Blade to render dynamic data in Laravel. Discover how to create .blade.php files, use echo syntax, and implement essential directives.

LaravelBladePHPTemplatingWeb Developmentbackend

Previously in this course, we covered Task Manager: Implementing the Task List Route, where we returned a simple string response from a controller. In this lesson, we'll replace that hardcoded string with a real view, moving from basic routing into the world of Blade, Laravel's native templating engine.

What is Blade?

Blade is a powerful, elegant templating engine that allows you to write plain PHP in your views without the messy syntax of traditional PHP tags. Instead of writing <?php echo $name; ?>, you write {{ $name }}.

Blade files are saved with the .blade.php extension and are stored in the resources/views directory. When a user requests a page, Laravel compiles these files into plain, cached PHP code, meaning there is zero performance overhead for using the engine.

Creating Your First Blade View

Let’s move our "Task List" away from the controller and into a proper view.

Navigate to resources/views.
Create a new file named tasks.blade.php.
Add the following HTML structure:


HTML
<!DOCTYPE html>
style="color:#808080"><style="color:#4EC9B0">html>
style="color:#808080"><style="color:#4EC9B0">head>
    style="color:#808080"><style="color:#4EC9B0">title>My Task Liststyle="color:#808080"></style="color:#4EC9B0">title>
style="color:#808080"></style="color:#4EC9B0">head>
style="color:#808080"><style="color:#4EC9B0">body>
    style="color:#808080"><style="color:#4EC9B0">h1>Tasksstyle="color:#808080"></style="color:#4EC9B0">h1>
style="color:#808080"></style="color:#4EC9B0">body>
style="color:#808080"></style="color:#4EC9B0">html>

To display this in your browser, update your TasksController to return the view helper instead of a string:


PHP
public function index()
{
    return view('tasks');
}

Outputting Data with Echo Syntax

The most common task in templating is displaying data passed from the controller. Blade uses "curly brace" syntax to safely output variables.

Update your controller to pass an array of data to the view:


PHP
public function index()
{
    $tasks = ['Buy milk', 'Clean the house', 'Finish Laravel lesson'];
    
    return view('tasks', ['tasks' => $tasks]);
}

Now, update tasks.blade.php to access this data. Blade automatically runs htmlspecialchars() on your output to prevent XSS attacks, making your app secure by default.


HTML
style="color:#808080"><style="color:#4EC9B0">h1>Tasksstyle="color:#808080"></style="color:#4EC9B0">h1>
style="color:#808080"><style="color:#4EC9B0">ul>
    style="color:#808080"><style="color:#4EC9B0">li>{{ $tasks[0] }}style="color:#808080"></style="color:#4EC9B0">li>
    style="color:#808080"><style="color:#4EC9B0">li>{{ $tasks[1] }}style="color:#808080"></style="color:#4EC9B0">li>
style="color:#808080"></style="color:#4EC9B0">ul>

If you ever need to output raw HTML (be careful!), you can use {!! $variable !!}. Only use this for trusted content, like data coming directly from your own database.

Using Basic Blade Directives

Directives are the "power tools" of Blade. They look like functions prefixed with an @ symbol and handle common programming tasks like loops and conditionals.

Let’s improve our task list to handle empty states and loop through our array dynamically:


HTML
style="color:#808080"><style="color:#4EC9B0">h1>Tasksstyle="color:#808080"></style="color:#4EC9B0">h1>

@if(count($tasks) > 0)
    style="color:#808080"><style="color:#4EC9B0">ul>
        @foreach($tasks as $task)
            style="color:#808080"><style="color:#4EC9B0">li>{{ $task }}style="color:#808080"></style="color:#4EC9B0">li>
        @endforeach
    style="color:#808080"></style="color:#4EC9B0">ul>
@else
    style="color:#808080"><style="color:#4EC9B0">p>No tasks found!style="color:#808080"></style="color:#4EC9B0">p>
@endif

@if: Starts a conditional block.
@foreach: Iterates over the collection.
@else: Provides a fallback.
@endif: Closes the block.

These directives keep your templates readable. While you could write native PHP inside your views, sticking to Blade directives is a best practice for clean, maintainable code.

Hands-on Exercise

Open your TasksController and add a new variable $pageTitle = 'My Awesome Task List';.
Pass this variable to the view function using the compact('pageTitle') helper.
In tasks.blade.php, display $pageTitle inside an <h1> tag.
Add a check: if the $pageTitle is long (use strlen()), display a special sub-header.

Common Pitfalls

Forgetting the extension: Always name your files .blade.php. If you name it just .php, Laravel won't compile the Blade directives, and you'll see raw @if syntax in your browser.
Case Sensitivity: View names are case-sensitive on most Linux servers (though not on macOS/Windows). Always stick to lowercase filenames to avoid "View not found" errors when you deploy.
Over-logic: Keep your views thin. If you find yourself writing complex database queries or heavy calculations inside a Blade template, move that logic into your controller or an Eloquent model.

Recap

We've moved from hardcoded strings to dynamic Blade templates. By using the {{ }} syntax for output and directives like @foreach and @if, you can create complex, data-driven interfaces. As you continue, you'll find that mastering these views is the key to building a robust UI.

Up next: We will learn how to use Laravel Blade Templates: Mastering Inheritance and Sections to avoid repeating our HTML code across different pages.

Back to Blog

Introduction to Blade: Mastering Laravel's Templating Engine

What is Blade?

Creating Your First Blade View

Outputting Data with Echo Syntax

Using Basic Blade Directives

Hands-on Exercise

Common Pitfalls

Recap

Similar Posts

Mastering Blade Directives for Loops and Conditionals

Customizing Validation Error Messages for Better Laravel UX

Implementing Blade Partials: A Guide to DRY Laravel Views