https://github.com/dhbmarcos/elementa
Elementa – Lightweight and Minimal HTML Microframework
https://github.com/dhbmarcos/elementa
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
Last synced: 4 months ago
JSON representation
Elementa – Lightweight and Minimal HTML Microframework
- Host: GitHub
- URL: https://github.com/dhbmarcos/elementa
- Owner: dhbmarcos
- License: mit
- Created: 2025-07-18T21:27:27.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-17T20:40:32.000Z (5 months ago)
- Last Synced: 2025-08-17T22:21:25.053Z (5 months ago)
- 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
- Language: JavaScript
- Homepage: http://elementa.js.org/
- Size: 54.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Elementa
Elementa – Lightweight and Minimal HTML Microframework
Is a lightweight and extensible client-side template engine for rendering custom HTML tags based on `` elements.
It makes creating reusable, nested UI components in plain HTML and JavaScript simple and elegant—no build tools or frameworks required.
## Features of Elementa
- Declarative custom tags with data binding
- Supports nested components
- Ultra-light, dependency-free **(1kB minified)**
- Simple integration—just include the script
## How Elementa Works
- Templates are defined with `` elements in your HTML.
- Each template's root element tag name (e.g., card) becomes the custom tag you can use.
- Attributes on your custom tags are automatically mapped to elements inside the template with matching id attributes.
- Child elements are rendered recursively.
## Hello World Elementa!
1. Create a simple HTML file.
2. Add content below to the file:
```html
Elementa Example
card {
display: block;
border: 1px solid #999;
border-radius: 8px;
padding: 1rem;
margin: 0.5rem;
background: #f8f8f8;
}
card card {
background: #e4f2ff;
border-color: #3399cc;
}
by Elementa
```
3. Open the file in your web browser.
## How to Install Elementa
### Online CDN
Use the CDN link for quick setup:
```html
```
Replace `0.4.0` with the desired version number. See GitHub repository for available versions.
### Offline
Download [elementa-0.4.0.min.js](dist/elementa-0.4.0.min.js) to your project and include it in your HTML, for example:
```html
```
## How to Use Elementa
1. Include the Script
```html
```
2. Define a Template in HTML:
```html
by Elementa
```
3. Use Declarative Syntax
```html
```
When the page loads, elementa.js automatically replaces every custom tag (like ``) matching a template with the rendered DOM. Use the `id` attribute in the `` to define your custom tag name, like `card` in the example above.
Use the `id` attributes in your template to bind properties from the custom tag attributes. For example, the `title` attribute of `` will populate the `
` element inside the template.
Use the `tag` attributes in your template to define the root element of the template.
Use 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.
## JavaScript API
You can also generate cards programmatically using JavaScript:
```js
window.addEventListener("load", function() {
// Create a child card
let child = elementa.render.tag("card", {
title: "JS Child",
text: "Created in JavaScript"
});
// Create a parent card and nest the child inside
let parent = elementa.render.tag("card", {
title: "JS Parent",
text: "Includes another card"
}, [child]);
document.body.appendChild(parent);
});
```
# Elementa API
## Rendering Templates
> **elementa.render.tag**(*tag*, *properties*, *children*)
Renders a component by template tag name.
Parameters:
- *string* **tag**: (required) The tag name of your custom element, e.g. "card".
- *Object* **properties**: (optional) Object mapping property names to values.
- *Array* **children**: (optional) Array of child Nodes or custom content.
Returns: The rendered DOM Element or *null*.
# About Elementa
## Versioning
> Currently, Elementa is in **unstable** state. It is ready for testing and production in limited scope, but not recommended for critical applications yet.
Elementa 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:
- **undefided**: Have a indefinitions in code, product or market. Not ready for production.
- **unstable**: In development. Ready for tests or production in limited scope.
- **stable**: Ready for production in general use.
## License
### MIT License
Copyright (c) 2025 D. H. B. Marcos. Deo omnis gloria.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.