Scriptable Markup

rml.md

I'm getting tired of writing documents to then parse and rebuild in JavaScript. HTML is not a markup language for complex interactive applications. rml is. Chekk-it.

// html
<img src="http://google.com/logo.png" />

Same thing in simple rml.

// rml
img('http://google.com/logo.png');

Yawn... How is this different?

var img = img('logo.png');

// settings allow for DRY markup
root('http://google.com/');

Scripting out your markup allows for much easier manipulation among other things.

img.center();

Since rml is executed when and how we want, we can be both semantic and functional. The above code will center the image in its container.

Here is the google homepage in rml

var logo = img('http://google.com/logo.png'),
	input = input();
	buttons = [button('google search'), button('i am feeling lucky')]
;

layout(logo, input, buttons).margins(5);

div(
	a('you', '/you'),
	a('web', '/web'),
	a('maps', 'maps.google.com'),
	div(
		a('Sign In'),
		img('/imgs/cog.png')
	).right()
)
.top(0)
.fill('horizontal')

So far we've only seen static HTML. The point of rml is that it is designed to be dynamic. HTML was originally designed only to be static.

var images = div(
		img('a.jpg'),
		img('b.jpg'),
		img('c.jpg')
	).root('/assets/lib/')
;

settings.images = '/images/foo/bar/baz/';

images
	.center()
	.clip(250, 100)
;

button('next')
	.center()
	.below(images)
	.click(function(e) {
		images.animate.left(-images.clip().width);
	})
	.icn('next.jpg')
;

The above snippet is a simple image gallery. This mixes functionality, style and content, which should always be avoided. The point is that rml lets you quickly reference and change your content without querying a document. This leads to a much more performant and reactive layout.

Bindings allow you to map data to elements or elements to other elements.

var tweets = [
	{u: 'joe', says: 'hey', img: 'a.jpg'}
	{u: 'bob', says: 'word'}
];

var list = ul({
	u: div,
	says: span,
	img: img({alt: '{u}'}).src
});

var counter = span()
			.label('displaying {length} tweets')
			.below(list)
			.right()
;

list.render(tweets);
counter.render(tweets);

// outputs:
<ul>
	<li>
		<div>joe</div>
		<span>hey</span>
		<img src="a.jpg" alt="joe" />
	</li>
	<li>
		<div>bob</div>
		<span>word</span>
	</li>
</ul>
<span>displaying 2 tweets</span>

Manipulating content no longer needs to go through a query layer (ie: $('ul li.selected')), since you have access to everything that you are laying out.