Skip to content
forked from Marak/HTML

HTML is The BEST JavaScript templating language EVER

Notifications You must be signed in to change notification settings

pratima320/HTML

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML is The BEST JavaScript templating language EVER

HTML was heavily inspired by Jade from Visionmedia

Features

  • HTML is valid (X) HTML 4.01 and HTML5!
  • HTML is Insanely Fast !
  • Safari, Internet Explorer, Chrome, and Firefox are all specifically optimized for rendering HTML!
  • HTML is highly portable ( Even tested it in Microsoft Frontpage and Macromedia Dreamweaver )
  • HTML is < 4 bytes in size!
  • It's not possible to write logic in HTML
  • I'm pretty annoyed I had to build this.

Note: I have no fucking clue how to successfully use Weld or Plates.

Core Concepts

  • You already know HTML
  • JSON data automatically maps to CSS classes
  • You cannot define any custom logic or maps with HTML
  • That's it.

Examples

Rendering basic data

var html = require('html-lang');
console.log(html.render({ name: "Bob" }, tmpl));
<p class="name">name placeholder</p>

outputs:

<p class="name">Bob</p>

Rendering an Object

var html = require('html-lang');

var user = { user: { name: "Bob", email: "[email protected]" }};

console.log(html.render(user, tmpl));
<div class="user">
  <p class="name">name placeholder</p>
  <p class="email">email placeholder</p>
</div>

outputs:

<div class="user">
  <p class="name">Bob</p>
  <p class="email">[email protected]</p>
</div>

Rendering an Array of Objects ( collection )

var html = require('html-lang');

var users = [ 
  { name: "Bob", email: "[email protected]"}, 
  { name: "Marak", email: "[email protected]"}
];

console.log(html.render(users, tmpl));
<div class="users">
  <div class="user">
    <p class="name">name placeholder</p>
    <p class="email">email placeholder</p>
  </div>
</div>

outputs:

<div class="users">
  <div class="user">
    <p>Bob</p>
    <p>[email protected]</p>
  </div>
  <div class="user">
    <p>Marak</p>
    <p>[email protected]</p>
  </div>
</div>

XML Node Attributes

<p class="name"><a href="" class="link"></a></p>
var html = require('html-lang');

var data = { 
  'link': "The big website", 
  'link.href': "http://big.vc" 
};

console.log(html.render(data, tmpl));

outputs:

<p class="name"><a href="http://big.vc" class="link">The big website</a></p>

That's it. I challenge you to find a use-case that isn't covered by HTML.

About

HTML is The BEST JavaScript templating language EVER

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%