Skip to main content
Stacks let multiple templates contribute content to the same named slot in a layout — without overwriting each other. Each #push appends to the slot; the layout outputs everything in push order when it renders #stack. This is the standard pattern for injecting page-specific <link> and <script> tags from child templates.

​
Directives

DirectiveUsed inPurpose
#stack('name')LayoutOutputs all content pushed to this slot, in push order.
#stack('name', 'fallback')LayoutOutputs a fallback string if nothing was pushed.
#push('name') … #endpushChild page / componentAppends a block of content to the named stack.

​
Defining stack slots in a layout

Place #stack calls in your layout wherever accumulated content should appear — typically in <head> for stylesheets and before </body> for scripts:
views/layouts/app.lex
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>#yield('title', 'My App')</title>
  <link rel="stylesheet" href="/app.css">
  #stack('styles')
</head>
<body>

  <main>
    #yield('content')
  </main>

  #stack('scripts')
</body>
</html>

​
Pushing content from a child page

Use #push / #endpush in a child template to inject content into the stack:
views/pages/dashboard.lex
#extends('layouts.app')

#push('styles')
  <link rel="stylesheet" href="/dashboard.css">
#endpush

#push('scripts')
  <script src="/chart.js"></script>
#endpush

#push('scripts')
  <script src="/dashboard.js"></script>
#endpush

#section('content')
  <h1>Dashboard</h1>
  <canvas id="chart"></canvas>
#endsection
Both #push('scripts') blocks are appended in order. The rendered <body> closing area will contain: 
<script src="/chart.js"></script>
<script src="/dashboard.js"></script>

​
Stack fallback content

If no template pushes to a stack, pass a second argument to #stack to output a default: 
#stack('scripts', '<script src="/default.js"></script>')
The fallback is a plain string — it is not processed as a Lex template.

​
Practical example

The following example shows a layout with both a styles and a scripts stack, and a page that pushes to each.
views/layouts/app.lex
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>#yield('title', 'My App')</title>
  <link rel="stylesheet" href="/app.css">
  #stack('styles')
</head>
<body>
  <main>
    #yield('content')
  </main>
  #stack('scripts', '<script src="/app.js"></script>')
</body>
</html>

​
Pushing from components

Components can also push to stacks. The pushed content is available in the parent layout, no matter how deeply nested the component is:
views/components/chart.lex
<canvas id="chart-{{ $id }}"></canvas>

#push('scripts')
  <script src="/chart.js"></script>
#endpush
Multiple components of the same type each push their own block — all of them are output. If you push the same <script> tag several times, it will appear multiple times in the output. Deduplicate by managing which components appear on a page, or push only once from the parent page template.

Build docs developers (and LLMs) love

Get started for freeTalk to us