{"id":30770430,"url":"https://github.com/dhbmarcos/elementa","last_synced_at":"2026-04-21T03:31:20.799Z","repository":{"id":305233486,"uuid":"1022330966","full_name":"dhbmarcos/elementa","owner":"dhbmarcos","description":"Elementa – Lightweight and Minimal HTML Microframework","archived":false,"fork":false,"pushed_at":"2025-08-17T20:40:32.000Z","size":56,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T10:32:57.896Z","etag":null,"topics":["client-side","custom-elements","declarative-ui","frontend","html","javascript","lightweight","microframework","minimalist","mit","nested-components","no-dependencies","open-source","template-engine","ui-components","vanilla-js","web-components"],"latest_commit_sha":null,"homepage":"http://elementa.js.org/","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/dhbmarcos.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-18T21:27:27.000Z","updated_at":"2025-08-17T20:40:10.000Z","dependencies_parsed_at":"2025-08-17T22:13:17.586Z","dependency_job_id":"8ce4de3b-a4d4-4490-89eb-4cfa0bb7d242","html_url":"https://github.com/dhbmarcos/elementa","commit_stats":null,"previous_names":["dhbmarcos/elementa"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/dhbmarcos/elementa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhbmarcos%2Felementa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhbmarcos%2Felementa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhbmarcos%2Felementa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhbmarcos%2Felementa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhbmarcos","download_url":"https://codeload.github.com/dhbmarcos/elementa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhbmarcos%2Felementa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32075217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"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":["client-side","custom-elements","declarative-ui","frontend","html","javascript","lightweight","microframework","minimalist","mit","nested-components","no-dependencies","open-source","template-engine","ui-components","vanilla-js","web-components"],"created_at":"2025-09-04T23:05:09.858Z","updated_at":"2026-04-21T03:31:20.783Z","avatar_url":"https://github.com/dhbmarcos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elementa\n\nElementa – Lightweight and Minimal HTML Microframework\n\nIs a lightweight and extensible client-side template engine for rendering custom HTML tags based on `\u003ctemplate\u003e` elements.\nIt makes creating reusable, nested UI components in plain HTML and JavaScript simple and elegant—no build tools or frameworks required.\n\n## Features of Elementa\n\n- Declarative custom tags with data binding\n- Supports nested components\n- Ultra-light, dependency-free **(1kB minified)**\n- Simple integration—just include the script\n\n## How Elementa Works\n\n- Templates are defined with `\u003ctemplate\u003e` elements in your HTML.\n- Each template's root element tag name (e.g., card) becomes the custom tag you can use.\n- Attributes on your custom tags are automatically mapped to elements inside the template with matching id attributes.\n- Child elements are rendered recursively.\n\n## Hello World Elementa!\n\n1. Create a simple HTML file.\n\n2. Add content below to the file:\n\n    ```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n        \u003chead\u003e\n            \u003cmeta charset=\"UTF-8\"\u003e\n            \u003ctitle\u003eElementa Example\u003c/title\u003e\n            \u003cstyle\u003e\n                card {\n                    display:       block;\n                    border:        1px solid #999;\n                    border-radius: 8px;\n                    padding:       1rem;\n                    margin:        0.5rem;\n                    background:    #f8f8f8;\n                }\n                card card {\n                    background:   #e4f2ff;\n                    border-color: #3399cc;\n                }\n            \u003c/style\u003e\n\n            \u003c!-- Script included in the head! --\u003e\n            \u003cscript src=\"https://elementa.js.org/dist/0.4.0.js\"\u003e\u003c/script\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n\n            \u003c!-- Template definition --\u003e\n            \u003ctemplate id=\"card\" class=\"card\"\u003e\n                \u003ch1 id=\"title\"\u003e\u003c/h1\u003e\n                \u003cp id=\"text\"\u003e\u003c/p\u003e\n                \u003cdiv id=\"inner\"\u003e\u003c/div\u003e\n                \u003csmall\u003eby Elementa\u003c/small\u003e\n            \u003c/template\u003e\n\n            \u003c!-- Declarative use of custom elements --\u003e\n            \u003ccard title=\"Header script\" text=\"Elementa.\"\u003e\n                \u003ccard title=\"Nested card\" text=\"It works perfectly!\"\u003e\u003c/card\u003e\n            \u003c/card\u003e\n        \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n3. Open the file in your web browser.\n\n## How to Install Elementa\n\n### Online CDN\n\nUse the CDN link for quick setup:\n\n```html\n\u003cscript src=\"https://elementa.js.org/dist/0.4.0.js\"\u003e\u003c/script\u003e\n```\n\nReplace `0.4.0` with the desired version number. See GitHub repository for available versions.\n\n### Offline\n\nDownload [elementa-0.4.0.min.js](dist/elementa-0.4.0.min.js) to your project and include it in your HTML, for example:\n\n```html\n\u003cscript src=\"elementa-0.4.0.min.js\"\u003e\u003c/script\u003e\n```\n\n## How to Use Elementa\n\n1. Include the Script\n\n    ```html\n    \u003chtml\u003e\n        \u003chead\u003e\n            \u003cscript src=\"https://elementa.js.org/dist/0.4.0.js\"\u003e\u003c/script\u003e\n        \u003c/head\u003e\n    \u003c/html\u003e\n    ```\n\n2. Define a Template in HTML:\n\n    ```html\n    \u003ctemplate id=\"card\" class=\"card\"\u003e\n        \u003ch1 id=\"title\"\u003e\u003c/h1\u003e\n        \u003cp id=\"text\"\u003e\u003c/p\u003e\n        \u003cdiv id=\"inner\"\u003e\u003c/div\u003e\n        \u003csmall\u003eby Elementa\u003c/small\u003e\n    \u003c/template\u003e\n    ```\n\n3. Use Declarative Syntax\n\n    ```html\n    \u003ccard title=\"Hello!\" text=\"This is a declarative card.\"\u003e\n        \u003ccard title=\"Nested\" text=\"This is a nested card!\"\u003e\u003c/card\u003e\n    \u003c/card\u003e\n    ```\n\nWhen the page loads, elementa.js automatically replaces every custom tag (like `\u003ccard\u003e`) matching a template with the rendered DOM. Use the `id` attribute in the `\u003ctemplate\u003e` to define your custom tag name, like `card` in the example above.\n\nUse the `id` attributes in your template to bind properties from the custom tag attributes. For example, the `title` attribute of `\u003ccard\u003e` will populate the `\u003ch1 id=\"title\"\u003e\u003c/h1\u003e` element inside the template.\n\nUse the `tag` attributes in your template to define the root element of the template.\n\nUse the `inner` id to render child elements inside the template at position specified. If you not specify `inner`, the children will be appended to the end of the template.\n\n## JavaScript API\n\nYou can also generate cards programmatically using JavaScript:\n\n```js\n\u003cscript\u003e\n    window.addEventListener(\"load\", function() {\n        // Create a child card\n        let child = elementa.render.tag(\"card\", {\n            title: \"JS Child\",\n            text: \"Created in JavaScript\"\n        });\n\n        // Create a parent card and nest the child inside\n        let parent = elementa.render.tag(\"card\", {\n            title: \"JS Parent\",\n            text: \"Includes another card\"\n        }, [child]);\n\n        document.body.appendChild(parent);\n    });\n\u003c/script\u003e\n```\n\n# Elementa API\n\n## Rendering Templates\n\n\u003e **elementa.render.tag**(*tag*, *properties*, *children*)\n\nRenders a component by template tag name.\n\nParameters:\n\n- *string* **tag**: (required) The tag name of your custom element, e.g. \"card\".\n- *Object* **properties**: (optional) Object mapping property names to values.\n- *Array*  **children**: (optional) Array of child Nodes or custom content.\n\nReturns: The rendered DOM Element or *null*.\n\n# About Elementa\n\n## Versioning\n\n\u003e Currently, Elementa is in **unstable** state. It is ready for testing and production in limited scope, but not recommended for critical applications yet.\n\nElementa uses [Semantic Versioning](https://semver.org/) for releases. The version number is in the format `MAJOR.MINOR.PATCH`. Elementa uses STRL (Simplest Readiness Level) for versioning definitions of maturity level, like below:\n\n- **undefided**: Have a indefinitions in code, product or market. Not ready for production.\n- **unstable**: In development. Ready for tests or production in limited scope.\n- **stable**: Ready for production in general use.\n\n## License\n\n### MIT License\n\nCopyright (c) 2025 D. H. B. Marcos. Deo omnis gloria.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhbmarcos%2Felementa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhbmarcos%2Felementa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhbmarcos%2Felementa/lists"}