{"id":32238573,"url":"https://github.com/giann/zappa","last_synced_at":"2025-10-22T14:03:10.830Z","repository":{"id":19816470,"uuid":"23077071","full_name":"giann/zappa","owner":"giann","description":"A tiny javascript only templating library for the browser","archived":true,"fork":false,"pushed_at":"2014-08-22T07:43:51.000Z","size":272,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-11T14:04:02.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-18T15:49:16.000Z","updated_at":"2023-01-28T19:26:59.000Z","dependencies_parsed_at":"2022-08-25T21:40:33.712Z","dependency_job_id":null,"html_url":"https://github.com/giann/zappa","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/giann/zappa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giann%2Fzappa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giann%2Fzappa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giann%2Fzappa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giann%2Fzappa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giann","download_url":"https://codeload.github.com/giann/zappa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giann%2Fzappa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280448834,"owners_count":26332533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-22T14:01:52.374Z","updated_at":"2025-10-22T14:03:10.821Z","avatar_url":"https://github.com/giann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://raw.githubusercontent.com/giann/zappa/master/logo.png\" alt=\"Zappa\" height=\"25\"\u003e Zappa\n\n*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 !\n\n*Zappa* uses actual `HTMLElement`s internally. You can directly use them and avoid the parsing step of string based template systems. The generated HTML is always valid.\n\n*Zappa* is javascript only: no pseudo-language to learn or special delimiters to use, only javascript code.\n\n## Getting Started\n\n### Installation\n\n```shell\nbower install zappa\n```\n\n### Overview\n\n```javascript\nvar context = {\n    name: 'Zappa',\n    things: ['very', 'much', 'easy']\n};\n\nz('body')\n    .elements([\n        z.h1().text('This is ' + context.name + ' !'),\n        z.section({class: 'content'})\n            .elements([\n                z.p().text('It\\'s easy to write a zappa template.'),\n                z.ul()\n                    .elements(\n                        context.things.map(function (item) {\n                            return z.li().text(item); \n                        })\n                    )\n            ])\n    ]);\n```\n\nwill append to `\u003cbody\u003e`:\n\n```html\n\u003ch1\u003eThis is Zappa !\u003c/h1\u003e\n\u003csection class=\"content\"\u003e\n    \u003cp\u003eIt's easy to write a zappa template.\u003c/p\u003e\n    \u003cul\u003e\n        \u003cli\u003every\u003c/li\u003e\n        \u003cli\u003emuch\u003c/li\u003e\n        \u003cli\u003eeasy\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/section\u003e\n```\n\n### Zappa's functions\n\nThere is a function for every HTML5 tag:\n\n```javascript\nz.div();\nz.span();\nz.ul();\nz.form();\n...\n```\n\nIf you miss one or you want to use [web components](http://www.polymer-project.org/), you can use `element`:\n\n\n```javascript\nz.element('newtag');\n```\n\nwill generate\n\n```html\n\u003cnewtag\u003e\u003c/newtag\u003e\n```\n\nTo add text inside an element, use `text`:\n\n```javascript\nz.div().text('this text is in the div.');\n```\n\nwill generate\n\n```html\n\u003cdiv\u003ethis text is in the div\u003c/div\u003e\n```\n\n### Root expression\n\n###### You can call any element function (div, span, etc.) directly on `z`:\n\n```javascript\nz.div();\n```\n\nwill generate a lone `div`:\n\n```html\n\u003cdiv\u003e\u003c/div\u003e\n````\n\n###### You can wrap an element from the DOM:\n\n```javascript\nz(document.body)\n    .div().text('this is appended to the body');\n```\n\nAny subsequent element function will append the generated HTML to the wrapped element:\n\n```html\n\u003cbody\u003e\n    \u003cdiv\u003ethis is appended to the body\u003c/div\u003e \n\u003c/body\u003e\n````\n\n###### You can wrap the result of a query:\n\n```javascript\nz('.container')\n    .div().text('this is appended to the .container');\n```\n\nAny subsequent element function will append the generated HTML to the wrapped element found by the query:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv\u003ethis is appended to the .container\u003c/div\u003e \n\u003c/div\u003e\n````\n\n### Attributes\n\nTo add attributes to an element, simply pass an object to the function:\n\n```javascript\nz.form({\n    'class': 'container',\n    'name': 'aForm',\n    'action': '/gothere'\n});\n```\n\nwill generate\n\n```html\n\u003cform class=\"container\" name=\"aForm\" action=\"/gothere\"\u003e\n\u003c/form\u003e\n```\n\n###### You can use functions instead of `attributes` values:\n\n```javascript\nz.div({\n    class: function () {\n        if (document.documentElement.clientWidth \u003c 768) {\n           return 'mobile';\n        } else {\n           return 'desktop';\n        }\n    }\n});\n```\n\nwill generate:\n\n```html\n\u003cdiv class=\"desktop\"\u003e\u003c/div\u003e\n```\n\nor if you're on a tiny screen:\n\n```html\n\u003cdiv class=\"mobile\"\u003e\u003c/div\u003e\n```\n\n### Multiple children\n\nTo append several elements to the same root, use `elements`:\n\n```javascript\nz.ul().elements([\n    z.li().text('one'),\n    z.li().text('two'),\n    z.li().text('three')\n]);\n```\n\nwill generate:\n\n```html\n\u003cul\u003e\n    \u003cli\u003eone\u003c/li\u003e\n    \u003cli\u003etwo\u003c/li\u003e\n    \u003cli\u003ethree\u003c/li\u003e\n\u003c/ul\u003e\n````\n\n###### You can use a function instead of `elements` array argument:\n\n```javascript\nvar things = ['one', 'two', 'three']\n\nz.ul().elements(function () {\n    return things.map(function (item) {\n        return z.span().text(item + ' ' + item);\n    });\n});\n```\n\nwill generate:\n\n```html\n\u003cul\u003e\n    \u003cli\u003eone one\u003c/li\u003e\n    \u003cli\u003etwo two\u003c/li\u003e\n    \u003cli\u003ethree three\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Get the result\n\nThe preferred way to use zappa's result is `value` which returns the `HTMLElement` generated:\n\n```javascript\nz.div().text('get me !').value();\n```\n\nwill return the root `HTMLElement` of the generated HTML.\n\nBut you can still work with strings, if you are required to, with `html`:\n\n```javascript\nz.div().text('get me !').html();\n```\nwill return the `outerHTML` of the generated HTML.\n\n## License\nThis library is free software; you can redistribute it and/or modify it under\nthe terms of the MIT license. See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiann%2Fzappa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiann%2Fzappa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiann%2Fzappa/lists"}