blue header line

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="{}" 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)=""> </div>