Boxwood Logo
Made by

Boxwood
Strong roots means certain growth

Introduction

Boxwood is a server side templating engine. It tries to fill the gap related to lack of other solutions aimed at using components as tags directly in html templates.

The engine is designed for apps and websites that care about speed and seo.

The compiler checks the correctness of templates and shows warnings and errors.

Templates have the html extension.


Simple syntax

HTML syntax is well known and easy to start with. Boxwood extends it with new tags, attributes and expressions.

Example which uses for and if tags

Fast templates

Compiler optimizes and minifies html, speeding up websites.


Introduction

Installation

$ npm install boxwood
bash

Start

const { compile, escape } = require('boxwood')

async function render (html) {
  const { template } = await compile(html)
  return template({ foo: 'bar' }, escape)
}
js

Essential concepts

Partials

<partial from="partials/header.html"/>
html

Slots

<button><slot/></button>
<style scoped>
button {
  color: blue;
}
</style>
html

Conditions

<if foo>
  {bar}
</if>
html

Loops

<for car and index in cars>
  #{index}: {car}
</for>
html

Filters

{category | uppercase}
html

Attributes

<img src="/images/logo.svg" inline>
html

Styles

<button><slot/></button>
<style scoped>
button {
  color: blue;
}
</style>
html

Scripts

<script src="/js/main.js" inline></script>
html

Images

<img src="/images/logo.svg" inline>
html

Translations

<translate hello/>
<data yaml>
i18n:
  hello:
    pl: Cześć
    en: Hello
</data>
html

Tags

case

<switch foo>
  <case is present>bar</case>
</switch>
html

default

<switch number>
  <case is divisible by three and is divisible by five>fizzbuzz</case>
  <case is divisible by three>fizz</case>
  <case is divisible by five>buzz</case>
  <default>{number}</default>
</switch>
html

else

<if foo>
  bar
<else>
  baz
<end>
html

elseif

<if foo>
  bar
<elseif baz>
  qux
<end>
html

elseunless

<unless foo>
  bar
</unless>
<elseunless bar>
  baz
</elseunless>
html

each

<each car and index in cars>
  #{index}: {car}
</each>
html

font

<font CustomFont from="/fonts/CustomFont.woff" />
html

for

<for car of cars>
  {car}
</for>
html

foreach

<foreach car in cars>
  {car}
</foreach>
html

if

<if foo>
  {bar}
</if>
html

import

<import layout from="layouts/default.html"/>
<import header from="components/header.html"/>
html

include

<include partial="./foo.html"/>
html

partial

<partial from="partials/footer.html"/>
html

require

<require layout from="layouts/default.html"/>
<require header from="components/header.html"/>
html

slot

<div class="foo"><slot/></div>
html

style

<style scoped>
.foo {
  color: red;
}
</style>
html

svg

<svg from="/images/logo.svg"/>
html

switch

<switch foo>
  <case is present>bar</case>
</switch>
html

translate

<translate foo/>
<data yaml>
i18n:
  foo:
    pl: bar
    en: baz
</data>
html

unless

<unless foo>{bar}<end>
html

var

<var foo="bar"/>
html

REPL

Arrow Up