What Is Laravel Blade?

Laravel Blade is the templating engine included with the Laravel framework. A Blade template is an HTML file with short instructions added, such as “show this price here” or “repeat this card for every service”, and Laravel fills it with data from the database before sending the finished page to the browser. Blade files end in .blade.php and usually sit in the resources/views folder of a project.

How a Blade template works

Imagine a dog grooming business with a page for each branch, listing that branch’s services and prices. Developers do not write a separate page for every branch. They write one template:

@extends('layouts.app')

@section('content')
    <h1>{{ $branch->name }}</h1>
    @foreach ($branch->services as $service)
        <p>{{ $service->name }}: £{{ $service->price }}</p>
    @endforeach
@endsection

Line by line:

• @extends(‘layouts.app’) says the page uses the site’s main layout, with the header, menu and footer every page shares.
• @section(‘content’) marks the part of the layout this page fills in.
• {{ $branch->name }} prints the branch name. The data comes from the database, usually through Eloquent models.
• @foreach repeats the paragraph once for each service, so a new treatment added in the admin area appears on the page without anyone touching the template.

When the Oxford branch adds a service, the Oxford page changes. When the business changes its footer, it is changed once in the layout and every page follows.

Layouts and components

Most Blade projects are built from two kinds of reusable pieces, both described in the Blade documentation:

• Layouts hold the frame of the page: the head section, header, navigation and footer.
• Components are smaller blocks used many times, such as a service card, a price table, a button or a form field. A component is written once and placed wherever it is needed.

For a business, this is what keeps a site consistent as it grows. Every service card looks and behaves the same way, and a design change to the card is one edit. It also makes later work cheaper, because new pages are assembled from parts that already exist and have been tested.

How Blade protects a site from XSS

Content shown with double curly braces, {{ }}, is passed through PHP’s htmlspecialchars function before it reaches the page. That turns characters such as < and > into harmless text, so a review or form entry containing a script cannot run in other visitors’ browsers. This type of attack is called cross-site scripting (XSS).

Blade also has a second syntax, {!! !!}, which prints content without that protection. It exists for HTML you trust, such as text formatted in your own admin editor. The documentation warns developers to be very careful with it whenever the content comes from users. If you inherit a Laravel site, a quick check of where {!! !!} is used on user-submitted content is a sensible part of any code review.

Blade, Livewire or a JavaScript front end

Laravel’s frontend documentation describes two approaches to the pages visitors see: PHP with Blade, optionally with Livewire, or a JavaScript framework connected through Inertia. In practice that gives three common setups:

• Blade on its own. Pages are built on the server and arrive in the browser as complete HTML. This suits company websites, service pages, blogs and many online shops.
• Blade with Livewire. Parts of the page update without a full reload, such as a live price calculator or a filter, while the code stays in PHP and Blade.
• Inertia with React, Svelte or Vue. The interface is a JavaScript application that uses Laravel for routing, data and logins. It suits app-like screens with a lot of interaction, such as dashboards and booking tools.

Many projects mix them: Blade for public pages, and a more interactive approach for the client area. The choice affects cost and who can maintain the site later, so it belongs in the technical specification for a project.

From design to Blade templates

The usual route is wireframes, then the visual design, then templates. On our projects, wireframes and clickable prototypes are made in Figma before design and development start. Developers turn each approved page design into a Blade layout, components and page templates, and connect them to the data. The cleaner the design system, with repeated elements drawn the same way each time, the fewer components are needed and the faster the build. More on the earlier stages in our entries on wireframes and user interface design.

On our Laravel website development projects, the code, including the templates, belongs to you, and we provide documentation.

FAQ