Need help with pithy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

caolan
436 Stars 27 Forks MIT License 14 Commits 4 Opened issues

Description

An internal DSL for generating HTML in JavaScript

Services available

!
?

Need anything else?

Contributors list

# 54,122
SQL
postgre...
Flask
flask-s...
1 commit

Pithy.js

An internal DSL for generating HTML in JavaScript.

Examples

Basic elements

html.div('#main', [
    html.h1(null, 'Hello, world!'),
    html.img({src: 'foo.jpg'})
]);

Hello, world!

Loops etc.

Using Underscore.js or similar:

function todoItem(item) {
    return html.li({rel: item.id}, [
        html.div('.title', item.title),
        html.button('.destroy', 'delete')
    ]);
}

function todoList(list) { return html.ul('.todo-list', _.map(list, todoItem)); }

todoList([ {id: 1, title: 'item one'}, {id: 2, title: 'item two'}, {id: 3, title: 'item three'} ]);

  • item one
    delete
  • item two
    delete
  • item three
    delete
  • Why use an internal DSL?

    • It's a more convenient and safer alternative to string contatenation
    • Very flexible, you can use all the power of JavaScript functions and control structures
    • For small bits of HTML you might not want to switch contexts from code to a template
    • Easier to debug than a templating engine
    • You get full tool-chain support:
      • editor support: syntax highlighting, code tools etc etc
      • code analyzers: jslint, jshint
      • testing/coverage tools

    When to use?

    • Consider using where you might currently use string concatenation
    • Avoid using for large HTML documents or in places where speed is critical
    • Good for small snippets used for client-side page updates
    • Bad for generating huge amounts of HTML on the server

    Usage

    I like to alias the 'pithy' library as 'html':

var html = require('pithy');

You can then just use html.

tagname
as a function to create the appropriate element. Please note, you actually get a html.SafeString object back, not a native JavaScript String. This might mess up your isString() tests. If you have a workaround please send a pull-request.

There is also a html.escape() function for escaping HTML (returns a html.SafeString). It will not escape a value that is already a html.SafeString object.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.