boxwood

Server side templating engine written in JavaScript

boxwood was created to achieve the following design goals:

templates can be split into components
css is hashed per component
css is automatically minified
critical css is inlined
templates can import other dependencies
inline images or svgs
i18n support
server side
good for seo
small (1 file, 700 LOC~)
easy to start, familiar syntax
easy to test

The template starts with a standard js file, which builds a tree of nodes, that get rendered to html.

Install
Usage
Syntax
Maintainers
Contributing
License

Install

npm install boxwood

Usage

const { compile } = require("boxwood")
const { join } = require("path")
// ...
const path = join(__dirname, "index.js")
const { template } = await compile(path)
// ...
const html = template({ foo: "bar" })
console.log(html)

Syntax

// example/index.js
const layout = require("./layout")
const banner = require("./banner")

module.exports = () => {
  return layout([
    banner({
      title: "Hello, world!",
      description: "Lorem ipsum dolor sit amet",
    }),
  ])
}

// example/layout/index.js

const { component, css, html, head, body } = require("boxwood")
const head = require("./head")

const styles = css.load(__dirname)

module.exports = component(
  (children) => {
    return html([head(), body({ className: styles.layout }, children)])
  },
  { styles }
)

// example/head/index.js
const { head, title } = require("boxwood")

module.exports = () => {
  return head([title("example")])
}

// example/banner/index.js
const { component, css, h1, p, section } = require("boxwood")

const styles = css.load(__dirname)

module.exports = component(
  ({ title, description }) => {
    return section({ className: styles.banner }, [
      h1(title),
      description && p(description),
    ])
  },
  { styles }
)

// example/banner/index.test.js
const test = require("node:test")
const assert = require("node:assert")
const { compile } = require("boxwood")

test("banner renders a title", async () => {
  const { template } = await compile(__dirname)
  const html = template({ title: "foo" })
  assert(html.includes("<h1>foo</h1>"))
})

test("banner renders an optional description", async () => {
  const { template } = await compile(__dirname)
  const html = template({ title: "foo", description: "bar" })
  assert(html.includes("<h1>foo</h1>"))
  assert(html.includes("<p>bar</p>"))
})

Maintainers

@emilos

Contributing

All contributions are highly appreciated. Please feel free to open new issues and send PRs.

License

MIT

triptych / boxwood