{"id":17680397,"url":"https://github.com/anykeyh/tinyhtmltemplate","last_synced_at":"2025-03-30T18:48:46.575Z","repository":{"id":69956638,"uuid":"60449975","full_name":"anykeyh/tinyHtmlTemplate","owner":"anykeyh","description":"Smallest and fastest HTML templating library.","archived":false,"fork":false,"pushed_at":"2016-06-05T16:30:04.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-05T21:34:31.526Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anykeyh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-05T08:15:14.000Z","updated_at":"2016-06-05T12:34:50.000Z","dependencies_parsed_at":"2023-04-24T15:47:23.963Z","dependency_job_id":null,"html_url":"https://github.com/anykeyh/tinyHtmlTemplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anykeyh%2FtinyHtmlTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anykeyh%2FtinyHtmlTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anykeyh%2FtinyHtmlTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anykeyh%2FtinyHtmlTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anykeyh","download_url":"https://codeload.github.com/anykeyh/tinyHtmlTemplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246365640,"owners_count":20765546,"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","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":"2024-10-24T09:06:53.435Z","updated_at":"2025-03-30T18:48:46.254Z","avatar_url":"https://github.com/anykeyh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#tinyHtmlTemplate\n\nThis lib provide simple template through DSL like javascript declaration.\n\n## What's the purpose of this lib?\n\nWith it you can create your DOM in a minute, bind events, and create partial\ntemplates (or components). If there's errors, you know where they are\nbecause we trace it!\nBecause you write in Javascript, no more runtime template syntax errors.\n\nI've worked on the size of the lib to reach 2^11 bytes ( I still miss 10% :-( ),\nso it suits for project where page loading speed matters, network is slow etc.\n( e.g. mobile website in third world ).\nMemory footprint is really small also.\n\nIn terms of performance, it beats any parsed template and proceed almost the same\nspeed than native javascript. Get beaten by reactlike software\nif you have a lot of elements to update frequently\n\n## How to install?\n\nUsing browserify:\n\n    $ npm install tinyHtmlTemplate --save\n\nThen:\n\n```javascript\n    var Template = require('tinyHtmlTemplate').tinyHtmlTemplate\n```\n\n\n## How to use it?\n\ntinyHtmlTemplate use a DSL-like structure and is very well suited for any language\nwhich simplify the syntax of the  context `this`.\nFor example with `@` of coffescript, it rocks!\nWell, this lib has been built like this because I work with coffeescript.\n\nSo it's very nice on it.\n\nYou can still use it on Javascript:\n\n```javascript\n\n    // No browserify = using window object\n    var Template = tinyHtmlTemplate;\n\n    // Render into the parent element. Can be anything.\n    var parent = document.getElementById(\"theParent\");\n\n    Template.render(parent, function(){\n      this.div({id: \"template\"},function(){\n        this.text(\"Templating is so easy!\");\n        this.a({href: \"#\"}, function(){\n          this.text(\"Click here to see binded event!\");\n          this.on(\"click\", function(evt){\n            alert(\"This is when I click the \u003ca\u003e element !\");\n          });\n        })\n        this.p(\"You can also write the content like this\", function(){\n          this.ul(function(){\n            this.li({innerHTML: \"You can set html\u003cbr\u003e\u003cstrong\u003elike this\u003c/strong\u003e\"})\n            this.li(function(){\n              this.text(\"Or like\")\n              this.br();\n              this.span({style: { backgroundColor: \"red\", color: \"white\" }}, function(){\n                this.text(\"that.\");\n              });\n            })\n          })\n        });\n      })\n    })\n\n```\n\nOr with coffeescript\n\n```coffeescript\n\n    Template.render document.body, -\u003e\n      @div id: \"todo-list-component\", -\u003e\n        @ul className=\"todo-list\", -\u003e\n          for todo in todoList\n            @TodoView(todo)\n\n```\n\n## Using partials\n\nYou can create subtemplates and call them easily:\n\n```javascript\n\n  Template.register('Important', function(text){\n    this.strong(\"/!\\\\ \" + text);\n  } );\n\n  Template.render(document.body, function(){\n    this.Important(\"This is an important message!\");\n  })\n\n```\n\n## Additional notes\n\nThe properties are directly linked to `HTMLElement`. So if you want to set the\nattribute `class` or `for`, you should use `className` or `htmlFor`\n\nGet a look to the `examples/todo` folder for a ultra simple homemade MVC built\non top of this lib.\n\n## Licence\n\nMIT.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanykeyh%2Ftinyhtmltemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanykeyh%2Ftinyhtmltemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanykeyh%2Ftinyhtmltemplate/lists"}