Dilla Engine

Share your design systems in a tiny universal package.

Dilla is a fast but minimal WebAssembly builder based on the syntax and behavior of the Jinja2 implemented on top of Minijinja. The goal is to be able to pack your design system into a universal package, executable through a simple declarative API, for both server side and headless rendering.

To know more about Dilla visit our website dilla.io.

---

• Local WASM build
  • Requirements
  • Build WASM from a repository
  • Build WASM from local
    • Validate the templates
  • View and test created WASM
• Rust build
  • Requirements for dev
  • Installation
  • Build and run locally

Local WASM build

No need to install Rust or any toolchain!

Requirements

• Bash, Git, Docker

Clone this project.

Init the .env and set a DS if working with only one Design System.

cp .env.dist .env

Build WASM from a repository

Next command will populate ./var/run_ds_src/_DS_NAME_ content with repository cloned, and run prebuild in ./var/run/_DS_NAME_, then create WASM files in ./dist/bindgen/_DS_NAME_:

make init DS=_DS_NAME_ REPO=_REPO_GIT_URL_
# Example:
make init DS=bootstrap_5 REPO=git@gitlab.com:dilla-io/ds/bootstrap_5.git

Build WASM from local

Assuming there is a Design System code available in ./var/run_ds_src/_DS_NAME_.

To Build the wasm from a modified source in ./var/run_ds_src/_DS_NAME_:

make build DS=_DS_NAME_
# Example:
make build DS=bootstrap_5
# Build component and/or extism versions:
make build-component DS=bootstrap_5
make build-extism DS=bootstrap_5

Validate the templates

make check DS=_DS_NAME_

View and test created WASM

You can run a local server from the ./dist/_DS_NAME_ folder created, then visit bindgen/browser or component/browser.

Rust build

Requirements for dev

• Cargo
• Just

See all commands:

just

Installation

just install

Build and run locally

Payload is loaded from a file ./payload.json by default for Just commands.

Design system used is by default test, as it's the only internal design system, other design systems must be set in ./var/run folder and can be used setting a variable in the shell, ie:

just build bootstrap_5
just run bootstrap_5