Sugar Templates

Appearance

Sugar (template engine)Write PHP templates that compile into... PHP

Context-aware escaping, without the template noise.

Get Started
What Is Sugar
Sugar cube
🧩

Directive Attributes

Use `s:` attributes for control flow without PHP noise.

🛡️

Context-Aware Escaping

Auto-escapes HTML, attributes, URLs, JS, and CSS with no extra syntax.

🧱

Component Composition

Props, slots, and attribute merging with zero runtime cost.

WARNING

Don't worry: This Sugar is safe for diabetics. 🥁

A Taste of the Syntax ​

html
<ul s:forelse="$orders as $order">
  <li s:class="['paid' => $order->isPaid, 'unpaid' => !$order->isPaid]">
    #<?= $order->number ?>
    <span><?= $order->customerName ?></span>
    <a href="/orders/<?= $order->id ?>">View</a>
  </li>
</ul>
<p s:empty>No orders yet</p>
php
<?php if (!empty($orders)): ?>
  <ul>
    <?php foreach ($orders as $order): ?>
      <li class="<?= $order->isPaid ? 'paid' : 'unpaid' ?>">
        #<?= htmlspecialchars($order->number, ENT_QUOTES, 'UTF-8') ?>
        <span><?= htmlspecialchars($order->customerName, ENT_QUOTES, 'UTF-8') ?></span>
        <a href="/orders/<?= urlencode($order->id) ?>">View</a>
      </li>
    <?php endforeach; ?>
  </ul>
<?php else: ?>
  <p>No orders yet</p>
<?php endif; ?>
php
<?php if (!\Sugar\Runtime\EmptyHelper::isEmpty($orders)): ?>
  <ul>
    <?php foreach ($orders as $order): ?>
      <li class="<?= \Sugar\Runtime\HtmlAttributeHelper::classNames(['paid' => $order->isPaid, 'unpaid' => !$order->isPaid]) ?>">
        #<?= \Sugar\Escape\Escaper::html($order->number) ?>
        <span><?= \Sugar\Escape\Escaper::html($order->customerName) ?></span>
        <a href="/orders/<?= \Sugar\Escape\Escaper::url($order->id) ?>">View</a>
      </li>
    <?php endforeach; ?>
  </ul>
<?php else: ?>
  <p>No orders yet</p>
<?php endif; ?>

Built For Real Templates ​

html
<s-template s:extends="../layouts/base.sugar.php"></s-template>
<title s:block="title">Dashboard</title>
<div s:block="content">
  <s-template s:include="partials/header"></s-template>
  <s-template s:include="partials/stats"></s-template>
</div>
html
<!-- template -->
<a href="/search?q=<?= $query ?>">Search</a>
<div data-user="<?= $userName ?>"></div>
<style>.badge::before { content: '<?= $label ?>'; }</style>
<p><?= $summary ?></p>

<!-- compiled -->
<a href="/search?q=<?= \Sugar\Escape\Escaper::url($query) ?>">Search</a>
<div data-user="<?= \Sugar\Escape\Escaper::attr($userName) ?>"></div>
<style>.badge::before { content: '<?= \Sugar\Escape\Escaper::css($label) ?>'; }</style>
<p><?= \Sugar\Escape\Escaper::html($summary) ?></p>