{"id":19475263,"url":"https://github.com/yunisdev/templatit","last_synced_at":"2026-06-15T11:32:33.448Z","repository":{"id":57376684,"uuid":"329715387","full_name":"yunisdev/templatit","owner":"yunisdev","description":"Lightweight JS library to templating","archived":false,"fork":false,"pushed_at":"2021-01-20T15:17:39.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-12T02:19:37.459Z","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/yunisdev.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":"2021-01-14T19:34:46.000Z","updated_at":"2021-01-20T15:17:42.000Z","dependencies_parsed_at":"2022-08-29T21:21:06.083Z","dependency_job_id":null,"html_url":"https://github.com/yunisdev/templatit","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/yunisdev/templatit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Ftemplatit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Ftemplatit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Ftemplatit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Ftemplatit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunisdev","download_url":"https://codeload.github.com/yunisdev/templatit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Ftemplatit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34358758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","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":"2024-11-10T19:31:20.342Z","updated_at":"2026-06-15T11:32:33.431Z","avatar_url":"https://github.com/yunisdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Templatit\n\n## Installation\n\nAdd Templatit to your HTML File:\n\n```html\n\u003cscript src=\"https://unpkg.com/templatit\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nThere is 2 ways to use Templatit:\n\n-   Functional\n-   Class based\n\n### Functional\n\nFor using functional way, you have to use `template` tag and give it a unique id. For example,\n\n```html\n\u003ctemplate id=\"hello-template\"\u003e Hello {name}! \u003c/template\u003e\n```\n\nTo use this template,\n\n```js\nconsole.log(\n    templatit(\"#alert-template\", {\n        name: \"Yunis\",\n    })\n);\n// it will output rendered template.\n// Hello Yunis!\n```\n\nYou can also use `templatit` function without creating template tag. Like this one.\n\n```js\ntemplatit(\n    null,\n    {\n        name: \"Yunis\",\n    },\n    \"Hello {name}!\"\n);\n// Hello Yunis!\n```\n\nThis way of using `templatit` function is not recommended. There is better way to do it \u0026mdash; class based templates.\n\n### Class based\n\nClass based templates is better for adding template string to your javascript code.\n\n```js\nvar template = new Templatit(\"Hello {name}!\");\ntemplate.render({\n    data: {\n        name: \"Yunis\",\n    },\n    callback: window.alert,\n});\n```\n\nThis will automatically render template and show it in alert box.\nAlso you can use `where` to render template to html element with specific selector.\n\n```js\ntemplate.render({\n    data: {\n        name: \"Yunis\",\n    },\n    where: \"#hello-box\",\n});\n```\n\nYou can also pass array to `data` parameter. It will render all data inside array and join them. It is useful when fetching comments, any type of list or etc.\nWhen using array for data, you are able to use `seperator`. Example, you can use `seperator:'\\n'` or `seperator:'\u003cbr\u003e'` for render each data in new line.\n\n---\n\nBoth ways has its own usage scenario. You can use them in specific situations.\n\nThanks for reading README of this project. Feel free to create an issue if you found any bug. You can also contribute it. Have a good coding!!!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunisdev%2Ftemplatit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunisdev%2Ftemplatit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunisdev%2Ftemplatit/lists"}