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>