node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


WieldyMarkup Build Status

Template-agnostic markup that's clean and compiles to HTML

Check out the grunt task for wieldyjs: ( Use it with Yeoman!

Ruby: ( Python: (


  • Use the -g flag for a global installation
cd /path/to/project
npm install wieldyjs
WieldyJS: WieldyMarkup Compiler for Node
    wieldyjs [options]* [(file | dir)* | ((-| --mirror) in-dir out-dir)]
  Usage Syntax:
    `[` and `]` denote optional groups
    `(` and `)` denote semantic groups
    `*` denotes 0 or more of the preceeding entity
    `|` denotes OR relationship between preceeding and proceeding entities
  Global Options:
    -h OR --help        Show this help message.
    -v OR --verbose     Display messages describing compiler behavior.
    -c OR --compress    Output HTML files without whitespace between tags.
    -r OR --recursive   Search recursively inside directories for .wml files.
    -m OR --mirror      Mirror directory tree inside of in-dir into out-dir (paths may be relative or absolute)
    wieldyjs -c -r -m src/ dest/
    wieldyjs -r /Users/user/Projects/project/templates/
    wieldyjs templates/file1.wml templates/file2.wml templates/dir1

Terminal Usage

There are two main ways to use WieldyJS:

  1. List .wml files and directories containing .wml files, and WieldyJS will compile .html versions in the same location.

  2. Use the -m or --mirror option and list an input directory and output directory, in that order. WieldyJS will find all .wml files in the input directory and compile them to .html files in the output directory.

Node Usage

var fs = require('fs')
  , Compiler = require('wieldyjs').Compiler
  // Just a one-off 
  , data = fs.readFileSync('/path/to/file', 'utf8')
  , html = new Compiler(data).output
  , compressed_html = new Compiler(data, true).output
  // Or a little more flexible 
  , c = new Compiler()
  , data = fs.readFileSync('/path/to/file', 'utf8')
  , html = c.compile(data)
  , compressed_html = c.compile(data, true)
  , html_again = c.compile(data, false)


cd /path/to/wieldymarkup

WieldyMarkup Syntax:


`<!DOCTYPE html>
html lang=en
    title <My Website>
          a.brand href=# <Title>
   \-\ a href=#
                span <Home>
              a href=# <Link>
      form enctype=multipart/form-data
        `<% var d = new Date(); %>
        input.underscore-template type=text readonly= value=<%= d.getDate() %> /
        input.mustache-template type=text readonly= value={{ val2 }} /
        p <<%= val %> {{ val }} Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.>


<!DOCTYPE html>
<html lang="en">
    <title>My Website</title>
    <div id="application">
      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" href="#">Title</a>
          <ul class="nav">
            <li class="active">
              <a href="#">
                <i class="icon-pencil">
              <a href="#">Link</a>
      <form enctype="multipart/form-data">
        <% var d = new Date(); %>
        <input class="underscore-template" type="text" readonly="" value="<%= d.getDate() %>" />
        <input class="mustache-template" type="text" readonly="" value="{{ val2 }}" />
        <p><%= val %> {{ val }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


There are five steps to parsing each line of WieldyMarkup:

  1. Leading whitespace
  2. Multi-Tag Delimiter
  3. Selector
  4. Attributes
  5. InnerText or self-closing designation

Leading Whitespace

Each line's Leading whitespace is used to detect it's nesting level. Use either tabs or spaces for indentation, but not both. The number of tabs or spaces that comprises an indentation is determined on the first line with any leading tabs or spaces, and then that is the standard used for the rest of the file.


Tag designations are modelled after CSS selectors. WieldyMarkup currently only supports tag, class, and ID as part of the selector.

  • If you want to specify a tag, then it must come before classes or ID.
  • If there is no ID or class, then you must specify a tag.
  • If there is at least one class or an ID, then no tag will default to a DIV.
  • If multiple IDs are present, only the last one will be used.

Multi-Tag Delimiter

For designating multiple, nested HTML tags on a single line in WieldyMarkup, use the \-\ delimiter between them. This is especially useful in a list of links. For example:

ul \-\ a href=# <Home>
  li \-\ a href=# <Link>
  li \-\ a href=#
      span <Link>
  li \-\ a href=# \-\ span <Link>


  <li class="active">
    <a href="#">Home</a>
    <a href="#">
      <i class="icon-pencil">
    <a href="#">

Be careful nesting inside of an element after it is declared in a multi-tag line. You still have to indent to the proper level for following lines to be nested inside. Note the indentation of i.icon-pencil in the example above.


The list of attributes begins after the first whitespace character after the beginning of the selector. Key-value pairs are identified by three elements:

  1. A key containing no whitespace characters or an equals sign (=)
  2. An equals sign (=)
  3. Either (1) a string starting with <% or {{ and ending with %> or }}, between which all characters are ignored, or (2) a string ending either at the innerText designation, the last whitespace character before the next =, or the end of the line

InnerText and Self-Closing Designation

If the line ends with /, then the tag will be treated as self-closing.

If the line ends with innerText wrapped in < and >, or if the innerText spills over into proceeding lines and eventually ends with >, then everything between < and > will be designated as innerText for the HTML tag. The compiler will leave instances of <% [anything here] %>, as long as each instance is opened and closed on the same line; this restriction does not apply to {{ [anything here] }}. Leading whitespace for continuing lines of innerText is ignored and transformed into a single space.