THT is in early Beta. We welcome contributors & feedback.

THTML Shortcuts

THTML is a superset of HTML that can be used within HTML templates.

It adds shortcuts to make reading and writing HTML easier, by reducing repetition and visual noise.

Slash Tags </>

It’s not necessary to include the tag name in closing tags. A single slash is fine.

<p>
    This is a <em>special message</> just for you!
</>

Double-Arrow Tags <...>>

Double-arrow tags automatically close at the end of the line.

<h2>> Look at these bullets
<ul>
  <li>> This is bullet 1
  <li>> This is bullet 2
  <li>> This is bullet 3
</>
Nesting Double-Arrow Tags

You can use more than one double-arrow tag per line. They will be closed in the correct order.

// THT template:
<h2>> Unread Messages: <strong>> 2

// will translate to...
<h2>Unread Messages <strong>2</strong></h2>

Triple-Arrow Tags <...>>>

Content inside of triple-arrow tags is passed through verbatim.

Extra indentation and surrounding whitespace is trimmed.

This is useful for <pre> and <textarea> tags.

<pre>>>

    if (condition) {
        // run code here
    }

</>

ImportantContent inside triple-arrow tags must be indented.

Dotted Tags <.class>

At the start of the tag, you can include CSS-style selectors to specify the class or classes.

If no tag name is included, it will default to div.

<.sidebar>
    <.message>> Make sure you <span.callout>do it</>:
    <.button.button-primary>> Press the Button
</>

// will translate to...

<div class='sidebar'>
   <div class='message'>Make sure you <span class='callout'>do it</span>:</div>
   <div class='button button-primary'>Press the Button</div>
</div>