by Before Semicolon

Why HTML+?

In short, it is familiar, fast, simple and allows you to write less and powerfully. Here is more:

It is just HTML

The syntax is of HTML so you already know this language.

<h2>{title}</h2>
<ul #if="$data.list">
	<li #repeat="$data.list">item {$item}</li>
</ul>
<p #attr="id, desc, $data.visible">
	{description}
</p>
learn more

Small learning curve

There are only few new tags and attributes with amazing capabilities to learn about.

// Attributes
#if, #repeat, #fragment,
#attr, #ignore

// Tags
include, variable, inject,
fragment, log, ignore
learn more

Support for SASS, LESS, STYLUS and Typescript out of the box

Simply link your SASS, LESS, STYLUS and Typescript files.

#CSS preprocessor files
<link href="style1.scss" rel="stylesheet">
<link href="style2.less" rel="stylesheet">
<link href="style3.styl" rel="stylesheet">

#typescript files
<script src="app.ts"></script>
learn more

Write Future CSS

HTML+ engine allows you to write modern CSS that works in any browser.

@import "normalizer.css";
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
	--color: #900;

	&:hover {
		color: var(--color);
	}
}
learn more

Powerful data binding and data contextualization

It allows you to reference data in separate files and create data context for specific parts of the page.

<variable name="total" value="$data.list.reduce((acc, n) => acc + n.price)">
</variable>

<h2>{title}</h2>
<p>Total: {total}</p>
learn more

Create your custom HTML tags and attributes

You can create custom tags and attributes to handle a specific situation of your project.

class MyTag {
	render() {
		return '<p>My Tag</p>'
	}
}
<my-tag></my-tag>
learn more

Static and Dynamic SSR website

Create faster website by rendering on the Server with static or dynamic pages.

learn more

A site builder

HTML+ builder takes care of exporting production ready site files to be hosted anywhere.

learn more

Page file directory as route

You can creat your website router by simply using the pages file structure. The rest is taken care by the engine.

learn more

Generates optimal code for production

The site builder will only export optimal and needed CSS, Javascript and HTML for production.

learn more

Get Started Quickly

The following code creates an Express server with template, page routes, CSS(pre and post processors) and Typescript files setup ready to go.

const express = require('express');
const http = require('http');
const path = require('path');
const {engine} = require('@beforesemicolon/html-plus');

const app = express();

(async () => {
	// wait for engine to finish setting upt the routes
	// and all files
	await engine(app, path.resolve(__dirname, './pages'));

	const server = http.createServer(app);

	server.listen(3000, () => {
		console.log('server live on port 3000')
	})
})()
Quick Start