Skip to content

Instantly share code, notes, and snippets.

@oknoorap oknoorap/
Last active Dec 22, 2015

What would you like to do?
HTMR (HyperText Markup Redesign) Proposal

As an example we have file "index.htmr" :

/* Variable Declarations */
@var {
   assets: "/public/assets/";

/* Global Config */
@charset "utf8";

/* You can set title as string or get variable's value */
/* @title "String Value */
@title @var.titleVar;

@description "This is simple template";
@keywords "html template engine, new template engine";

/* Include CSS */
@css {
   @var.assets + "css/foundation.min";
   @var.assets + "css/main";

/* Include javascripts */
@js {
   @var.assets + "js/foundation.min";
   @var.assets + "js/main";

@content {
   h1 {
      The world need us.
   p {
      This is .htmr (HyperText Markup Redesign);
      a[href="#hello"] {
         is this awesome?
   ul {
      li {
         span {
            Title inside span;
      li*5 {
         a[href="#hello"] {
            <if this.parent.index === 2>
               Hello World;
   span {
      your @var.variableName here;
   <if @var.variableName|isString>
   div.message {
      It's string
   script {
      alert('inline script');

Inside index.js :

new HTMR.render({
   titleVar: "String Value"
   variableName: "Variable"
}, 'index.htmr');

// or
* Using HTMR as variable

   index = new{
      titleVar: "String Value"
      variableName: "Variable"
   }, 'index.htmr'),
   about = new{
      title: "About Us";
   }, 'about.htmr');



It will produce :

<!DOCTYPE html>
      <meta charset="utf-8">
      <title>HTMS (HyperText Markup Sheets) Proposal</title>
      <meta name="description" content="This is simple template">
      <meta name="keywords" content="html template engine, new template engine">
      <link rel="stylesheet" href="/public/assets/foundation.min.css">
      <link rel="stylesheet" href="/public/assets/main.css">
      <h1>The world need us.<h1>
      <p>This is .htmr (HyperText Markup Redesign). <a href="#hello">this is awesome?</a></p>
          <li><a href="#hello">Hello World</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
      <span>your Variable here</span>
      <div class="message">It's String</div>
      <script>alert('inline script');</script>
      <script type="text/javascript" src="/public/assets/js/foundation.min.js"></script>
      <script type="text/javascript" src="/public/assets/js/main.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.