10

Jade is indeed very neat, but I personally dislike the syntax and look of it. Yeah, being able to write just :

body
  h1 Hello
  p This is 
    b bold

Thats cool and all, but I prefer the look and feel of HTML/XML still. It was made to be human and machine readable and overall I think it's easier to glance at and understand.

Are there any templating engines that work more like:

<body>
  <h1>{title}</h1>
  <p>{content}</p>
</body>

Using the same Jade like concept of:

res.render('index', {
  title:pageTitle,
  content:pageContent
});

8 Answers 8

4

Take a look at EJS. Allows you to use regular HTML and embed Javascript code.

For example:

<div>
<% if (foo) { %>
foo
<% }else { %>
bar
<% } %>
</div>

Also, what you're looking for is an "Express-compatible" templating engine, and EJS is Express-compatible. It's made by one of the main guys behind Express.

4

You can use straight HTML in Jade, give this a try:

<body>
  <h1>#{title}</h1>
  <p>#{content}</p>
</body>
0
3

Something that specifically looks like that would probably be Mustache for Node.js. Check the demo.

3
  • also, Handlebars. Similar syntax to Mustache, but slightly more powerful.
    – MartinodF
    Sep 11, 2011 at 15:14
  • Im liking this so far. Someone below said you can use Jade with HTML tho. so checking that out also. Sep 13, 2011 at 22:42
  • I second Handlebars. It builds on Mustache, but the addition of helpers is irreplaceable in my opinion.
    – Mike
    Oct 25, 2013 at 18:36
1

Consider jQuery templates. You can provide your data in JSON and apply it to a template.

1

If you're already using underscore.js

var compiled = _.template("hello: <%= name %>");
compiled({name : 'moe'});
=> "hello: moe"
0

Templates can be only a matter of taste. I don't like Jade either and favouring HTML is a better option. Most of times, webdesign layouts cannot be easily converted to those templates.

the sample provided moustache:

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

It can be mixed with Angular.js syntax... could be a problem for people using it.

0

I recommend a new template engine: Saker, it enables fluid coding workflow, unlike most template syntaxes, you do not need to interrupt your coding to explicitly denote server blocks within your HTML.
Github: https://github.com/eshengsky/saker

The code looks like:

<body>
    <h1>@title</h1>
    <p>@content</p>
</body>
0

I personally use Nunjucks with all of my Node JS projects for a few years now and still loving it. I switched from Swig because Swig was lacking in some of extensibility when a project became more complex.

I, too, am not a fan of Jade / Pug. I prefer normal HTML syntax and inject some custom templating schemes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.