H.A.S.T.E

HTML Awesomely Simple Templating Engine

Codeberg Page Latest Release

Haste is a simple command-line tool that brings templating and variables to HTML through the use of simple, ease-to-learn, syntax.

-+

Download Links

Downloading & Running

Simply expand the download links above or visit the Codeberg releases page and download the correct release for your platform: haste.exe for windows, haste-osx for MacOS or haste-linux for linux platforms. Rename this to haste if on linux or MacOS.

Once downloaded, move this file into your haste build directory. Open a command/terminal window in the same folder and you can run haste like so: 

./haste

By default haste will recursively look for any *.haste.html files in your currently working directory and build them to a ./dist folder.

You can run haste in watch mode. This will auto-build haste files on change and also serves the files on an auto-reloading webserver. To run in watch mode simply add the -w option: 

./haste -w
-+

Command Line Options

Flag Default Description
-w Watch file for changes and auto-compile on change.
Outputs to <filename>.gen.html.
Starts a http server for file serving and opens the browser automatically.
-l Disable livereload (When watching)
-p 8081 Port to listen on (When watching)
-d ./dist/ Output folder for generated content
-r ./ Relative root folder for template references
-v Show verbose output

Template Syntax

Haste uses custom HTML tags for it's templating system. These define the path of the HTML file to be included. If haste parsed the HTML tag <t:parts.hello/> it will look for a parts/hello.html file, Relative to the root build directory. For Example:

Input
Output
index.haste.html
<div>
  <t:parts.hello-world/>
</div>

parts/hello-world.html
<p>Hello World!</p>

dist/index.html
<div>
  <p>Hello World!</p>
</div>

Variable Syntax

Within haste you have variables which are used with curly braces. The value of the variable hello could be printed by placing {{hello}} in your HTML file. Variables can be defined at the top of your HTML in the format @hello=Well hello there. For Example:

Input
Output
index.haste.html
@greeting=Hello there fellow Human!
<p>{{greeting}}</p>

dist/index.html
<p>Hello there fellow Human!</p>