Metayota HTML Engine

Metayota HTML Engine is the missing link between HTML and JavaScript. It is focused on being easy to install, easy to use, easy to extend. Build single-page applications or standard web applications.

Metayota HTML Engine is a JavaScript based template engine. The framework allows you to extend the functionality of HTML (with scripting capabilities, if, for-loop, variables, custom tags, ...) like with Angular or React.

Create your own tags and attributes
Extend the functionality of HTML with your own custom tags.
Leightweight
One file with ~ 12 kb. Only ~ 1.672 lines of code.
Fast
Your website is displayed instantly, downloads all the needed tags on the fly
Preload or load tags on demand
You can choose which tags you want to preload and wich you want to download on demand.
Extendable
Add your own tags and attributes.
Easy to learn
In just a few hours, you know enough to build a webapp using this framework. With sample apps, and online documentation.
Fully Documented
Each function in the framework is documented and has a well defined behavior.
Clean Code
Readable, easy to maintain and clean code. The HTML enginer does not add any helper attributes and elements to your DOM.
Clean HTML
The framework does not add any non-standard HTML elements. Use your HTML like it was intended by the designer.
Pure JavaScript
Use pure JavaScript objects and methods, no need to wrap your object into Observables.
Rendering
The rendering is smooth, only finished elements are added to the DOM.
Render time
Already after 18 milliseconds, your page is ready to be rendered.
Standard
Works with Google Chrome, Safari, Firefox and Microsoft Edge.
Integrated
Works perfectly with the Metayota Editor.

Easy to learn, easy to understand, easy to use and everything is possible!

Easy Syntax

<!-- use variables and functions: -->
<h1>{app$.page.getTitle()} - Welcome</h1>
<!-- here is a loop: -->
<div class="users" for="user of this.users">
   <!-- use custom tags, with dynamic variables: -->
   <text label="Firstname" value="{user.firstname}"></text>
   <text label="Lastname" value="{user.lastname}"></text>
   <dropdown label="State" value="{user.country}" options="{this.countries}"></dropdown>
   <!-- syntax for better overwith with more parameters: -->
   <dropdown>
      <label>Country</label>
      <options array="">
         <option name="Germany" value="de"></option>
         <option name="United States" value="us"></option>
      </options>
   </dropdown>
   <!-- bind events: -->
   <input type="button" (click)="user.save()">
</div>