<div id="quickdemo">
	<div class="item"><span class="library">Library Name</span></div>

$('#quickdemo')
	.items([
		{library:'Prototype'},
		{library:'jQuery'},
		{library:'Dojo'},
		{library:'MooTools'}
	])
	.chain();

<script src="path/to/your/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="path/to/your/chain.js" type="text/javascript" charset="utf-8"></script>

<div id="contact">
	<div class="name">My Name</div>
	<div class="address">My Address</div>
	<div class="country">Unknown Country</div>

$('#contact')
	.item({
		name: "Rizqi Ahmad",
		address: "Somestrasse 50, Hamburg",
		country: "Germany"
	})
	.chain();

So, the code contains two functions: item() and chain().

You can use item({data}) to insert data to to an element. To get the data simply call item() without arguments.
There are more things you can do with item(), just take a look at the doc.

use chain() to enable the chain data-binding system. Without invoking chain, all chain.js functionalities will be useless. You only have to call chain() once. After that you only need to invoke item({my other data}) to change your data, and the element will be automatically updated.

Using Custom Builder

Actually if you invoke chain() without any argument, it will use the default builder to render the element. The default builder, analyze the data and search nodes that has the same class as the data’s property and fill them with the values. You can pass a custom builder like this: see demo

$('#contact')
	.item({
		name: "Rizqi Ahmad",
		address: "Somestrasse 50, Hamburg",
		country: "Germany"
	})
	.chain({
		'.name': 'Hello, My Name is {name}',
		'.address': 'My address is {address}',
		'.country': 'It is in {country}'
	});

Array of Data with items()

You can do the same as above with an array of data. All you need to do is using items() instead of item(), and create an item wrapper in your HTML like this: see demo

<div id="persons">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>

$('#persons')
	.items([
		{first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'}
	])
	.chain();

Make sure that you don’t forget the item wrapper element (in this case <div class="item">).

Adding & Removing Items

Using items() you can also add or remove items. You don’t need to call chain() again.
Each time the data is altered, the templates will automatically be updated. see demo

// Adding more items
$('#persons').items([
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

// This is the same as above
$('#persons').items('merge', [
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

// Replace with new data
$('#persons').items('replace', [
	{first:'Niels', last:'Bohr'},
	{first:'Albert', last:'Einstein'}
]);

var data = {first:'Stephen', last:'Hawking'};

// Add one item
$('#persons').items('add', data);

// Remove data, data should be THE SAME OBJECT as the data inserted
$('#persons').items('remove', data);

More on items() can be seen here.

Next?

Don’t worry, this is just the beginning. For more Tips and Tricks go to HowTo. And don’t forget to take a look at the API Documentation.