One of the distinguishing features of Jade is its clean syntax. Elements are created with CSS selector syntax which makes the template consistent with your style sheet and JavaScript element selector library.
Apart from their functionality all template engines need to be efficient in terms of the time they require to render a page. Jade beats most of its competitors in this area, it is highly optimized to deliver good performance on both the server and client ends.
Custom tags provide a simple mechanism for embedding more complex components into a template by extending the HTML grammar with support for new tags. For example:
<div>
<say-hello name="World"/>
</div>
Custom tags are easy to create since they just map to a JavaScript "renderer" function as shown below:
module.exports = function sayHelloRenderer(input, out) {
out.write('Hello ' + input.name + '!');
}
Custom tags support nested content:
<fancy-overlay title="My Title">
This will be the body content of the overlay
</fancy-overlay>
Custom tags can also have parent/child relationships to support more complex use cases such a "tabs" component with nested "tab" components:
<fancy-tabs>
<fancy-tabs:tab label="Home">
Content for Home
</fancy-tabs:tab>
<fancy-tabs:tab label="Profile">
Content for Profile
</fancy-tabs:tab>
<fancy-tabs:tab label="Messages">
Content for Messages
</fancy-tabs:tab>
</fancy-tabs>