https://github.com/caolan/pithy
An internal DSL for generating HTML in JavaScript
https://github.com/caolan/pithy
Last synced: about 1 year ago
JSON representation
An internal DSL for generating HTML in JavaScript
- Host: GitHub
- URL: https://github.com/caolan/pithy
- Owner: caolan
- License: mit
- Created: 2013-03-27T21:11:25.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2016-07-19T19:14:26.000Z (almost 10 years ago)
- Last Synced: 2025-03-30T21:10:00.548Z (about 1 year ago)
- Language: JavaScript
- Size: 134 KB
- Stars: 436
- Watchers: 13
- Forks: 22
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pithy.js
An internal DSL for generating HTML in JavaScript.
## Examples
#### Basic elements
```javascript
html.div('#main', [
html.h1(null, 'Hello, world!'),
html.img({src: 'foo.jpg'})
]);
```
```html
Hello, world!
```
#### Loops etc.
Using [Underscore.js](http://underscorejs.org) or similar:
```javascript
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'}
]);
```
```html
-
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':
```javascript
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.