Zappa
A tiny javascript only templating library for the browser
Install / Use
/learn @giann/ZappaREADME
<img src="https://raw.githubusercontent.com/giann/zappa/master/logo.png" alt="Zappa" height="25"> Zappa
Zappa is a tiny javascript only templating library for the browser. Instead of writing a mix of HTML and Javascript/Angular Expressions, write only javascript !
Zappa uses actual HTMLElements internally. You can directly use them and avoid the parsing step of string based template systems. The generated HTML is always valid.
Zappa is javascript only: no pseudo-language to learn or special delimiters to use, only javascript code.
Getting Started
Installation
bower install zappa
Overview
var context = {
name: 'Zappa',
things: ['very', 'much', 'easy']
};
z('body')
.elements([
z.h1().text('This is ' + context.name + ' !'),
z.section({class: 'content'})
.elements([
z.p().text('It\'s easy to write a zappa template.'),
z.ul()
.elements(
context.things.map(function (item) {
return z.li().text(item);
})
)
])
]);
will append to <body>:
<h1>This is Zappa !</h1>
<section class="content">
<p>It's easy to write a zappa template.</p>
<ul>
<li>very</li>
<li>much</li>
<li>easy</li>
</ul>
</section>
Zappa's functions
There is a function for every HTML5 tag:
z.div();
z.span();
z.ul();
z.form();
...
If you miss one or you want to use web components, you can use element:
z.element('newtag');
will generate
<newtag></newtag>
To add text inside an element, use text:
z.div().text('this text is in the div.');
will generate
<div>this text is in the div</div>
Root expression
You can call any element function (div, span, etc.) directly on z:
z.div();
will generate a lone div:
<div></div>
You can wrap an element from the DOM:
z(document.body)
.div().text('this is appended to the body');
Any subsequent element function will append the generated HTML to the wrapped element:
<body>
<div>this is appended to the body</div>
</body>
You can wrap the result of a query:
z('.container')
.div().text('this is appended to the .container');
Any subsequent element function will append the generated HTML to the wrapped element found by the query:
<div class="container">
<div>this is appended to the .container</div>
</div>
Attributes
To add attributes to an element, simply pass an object to the function:
z.form({
'class': 'container',
'name': 'aForm',
'action': '/gothere'
});
will generate
<form class="container" name="aForm" action="/gothere">
</form>
You can use functions instead of attributes values:
z.div({
class: function () {
if (document.documentElement.clientWidth < 768) {
return 'mobile';
} else {
return 'desktop';
}
}
});
will generate:
<div class="desktop"></div>
or if you're on a tiny screen:
<div class="mobile"></div>
Multiple children
To append several elements to the same root, use elements:
z.ul().elements([
z.li().text('one'),
z.li().text('two'),
z.li().text('three')
]);
will generate:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
You can use a function instead of elements array argument:
var things = ['one', 'two', 'three']
z.ul().elements(function () {
return things.map(function (item) {
return z.span().text(item + ' ' + item);
});
});
will generate:
<ul>
<li>one one</li>
<li>two two</li>
<li>three three</li>
</ul>
Get the result
The preferred way to use zappa's result is value which returns the HTMLElement generated:
z.div().text('get me !').value();
will return the root HTMLElement of the generated HTML.
But you can still work with strings, if you are required to, with html:
z.div().text('get me !').html();
will return the outerHTML of the generated HTML.
License
This library is free software; you can redistribute it and/or modify it under the terms of the MIT license. See LICENSE for details.
Related Skills
node-connect
346.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
346.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
346.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
