{"id":20397627,"url":"https://github.com/jwdeveloper/temel","last_synced_at":"2026-01-28T17:34:57.043Z","repository":{"id":253621863,"uuid":"844047503","full_name":"jwdeveloper/Temel","owner":"jwdeveloper","description":" Html elements server side renderer","archived":false,"fork":false,"pushed_at":"2024-08-18T12:15:58.000Z","size":82,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-28T03:11:09.538Z","etag":null,"topics":["html","html-css-javascript","html-python","jinja","jinja2","python-serverside-rendering","renderer","serverside-rendering","templates"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jwdeveloper.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-18T08:05:49.000Z","updated_at":"2025-09-17T06:24:18.000Z","dependencies_parsed_at":"2024-08-18T09:24:51.885Z","dependency_job_id":"3cb6014e-b8cd-44d1-85ce-9e97325c0900","html_url":"https://github.com/jwdeveloper/Temel","commit_stats":null,"previous_names":["jwdeveloper/temel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jwdeveloper/Temel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwdeveloper%2FTemel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwdeveloper%2FTemel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwdeveloper%2FTemel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwdeveloper%2FTemel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwdeveloper","download_url":"https://codeload.github.com/jwdeveloper/Temel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwdeveloper%2FTemel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28847875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["html","html-css-javascript","html-python","jinja","jinja2","python-serverside-rendering","renderer","serverside-rendering","templates"],"created_at":"2024-11-15T04:15:50.928Z","updated_at":"2026-01-28T17:34:56.513Z","avatar_url":"https://github.com/jwdeveloper.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\" \u003e\n\u003ca target=\"blank\" \u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/bc3f7094-ffa8-4d6d-aadd-7a51fa5aaf69\" width=\"15%\" \u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\" \u003e\n\u003ch1\u003eTemel\u003c/h1\u003e\n\n\n\n🚀 *Html elements server side renderer* ️🚀\n\n\u003cdiv align=\"center\" \u003e\n\u003ca href=\"https://pypi.org/project/temel/\" target=\"blank\" \u003e\n\u003cimg src=\"https://img.shields.io/badge/pip_install-temel-blue\" width=\"20%\" \u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://discord.gg/e2XwPNTBBr\" target=\"blank\" \u003e\n\u003cimg src=\"https://img.shields.io/badge/Discord-%235865F2.svg?style=for-the-badge\u0026logo=discord\u0026logoColor=white\" \u003e\n\u003c/a\u003e\n\n\u003ca target=\"blank\" \u003e\n\u003cimg src=\"https://img.shields.io/badge/python-3670A0?style=for-the-badge\u0026logo=python\u0026logoColor=ffdd54\" \u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n# Introduction\n\nHave you ever felt that `Jinja` templates are too harsh to work with, however\nmaking frontend in `JavaScript` frameworks makes you 🤮? If so, you’ve come to the right place!\n\n\n\n\u003cbr\u003e\n\nTemel is hybrid combines the flexibility of React-like components with the simplicity of Jinja templates.\nIt allows you to define elements as HTML files, and then use those elements as custom HTML tags named according to their respective file names.\n[Check out an example to see how it works!](#define-templates)\n\n\u003cbr\u003e\n\n\nJoin the support [discord](https://discord.gg/2hu6fPPeF7) and visit the `#programming` channel for questions,\ncontributions and ideas. Feel free to make pull requests with missing/new features, fixes, etc\n\n## Getting started\n\n1. #### Install the dependencie\n\n```xml\npip install temel\n```\n\n\u003cbr\u003e\n\n2. #### Define templates\n\n`CustomButton.html`\n\n```html\n\u003cdiv id=\"custom-button\" style=\"background-color: green\"\u003e\n    \u003cbutton\u003e{{name}}\u003c/button\u003e\n\u003c/div\u003e\n```\n\n`Layout.html`\n\n```html\n\u003cdiv id=\"layout\"\u003e\n    \u003cheader\u003e\n        Header section\n        \u003cslot.header/\u003e\n    \u003c/header\u003e\n    \u003carticle\u003e\n        \u003cslot.content/\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n```\n\n`Page.html`\n\n```html\n\u003clayout\u003e\n    \u003clayout.header\u003e\n        Page Header Message\n    \u003c/layout.header\u003e\n\n    \u003clayout.content\u003e\n        {{% for button in buttons %}}\n            \u003cCustomButton name={{button.name}}/\u003e\n        {{% endfor %}}\n    \u003c/layout.content\u003e\n\u003c/layout\u003e\n```\n\n\u003cbr\u003e\n\n3. Call the renderer. Let's render `Page.html`\n\n```python\n\nimport temel\n\nif __name__ == '__main__':\n    context = {\n        'buttons': [\n            {\n                'name': 'Home'\n            },\n            {\n                'name': 'Settings'\n            },\n            {\n                'name': 'Profile'\n            }]\n    }\n   \n    temel.load_templates('C:\\\\templates')\n    output = temel.parse(\"Page.html\", context)\n    with open('output.html', 'w') as f:\n        f.write(output)\n```\n\n4. See the output file\n\n```html\n\n\u003cdiv id=\"layout\"\u003e\n    \u003cheader\u003e\n        Header section\n        \u003clayout.header\u003e\n            Page Header Message\n        \u003c/layout.header\u003e\n    \u003c/header\u003e\n    \u003carticle\u003e\n        \u003clayout.content\u003e\n            \u003cdiv id=\"custom-button\" style=\"background-color: green\"\u003e\n                \u003cbutton\u003eHome\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"custom-button\" style=\"background-color: green\"\u003e\n                \u003cbutton\u003eSettings\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"custom-button\" style=\"background-color: green\"\u003e\n                \u003cbutton\u003eProfile\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/layout.content\u003e\n    \u003c/article\u003e\n\u003c/div\u003e\n```\n\n## Contributing\n\n[Library documentation for contributors](https://github.com/jwdeveloper/Temel)\n\nYour improvements are welcome! Feel free to open an \u003ca href=\"https://github.com/jwdeveloper/Temel/issues\"\u003eissue\u003c/a\u003e\nor \u003ca href=\"https://github.com/jwdeveloper/Temel/pulls\"\u003epull request\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwdeveloper%2Ftemel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwdeveloper%2Ftemel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwdeveloper%2Ftemel/lists"}