About Enyo

For the impatient...

Core Concepts

At the heart of Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.

Each piece of an Enyo application is a Component, and Components are constructed out of other Components.

For example, it’s easy to combine an <input> tag and a <label> tag into a LabeledInput Component, which you can use (and reuse) as one atomic piece. But that’s just the beginning. Larger pieces of functionality — a color picker, a fancy report generator, or an entire painting application — can also be packaged as reusable components.

Use the Enyo encapsulation model to divide and conquer large projects. No particular piece of an application need be especially complex. Because combining Components is central to Enyo’s design, it’s natural to factor complex code into smaller pieces. And because Enyo is modular, all these pieces tend to be reusable — within one project, across your projects, or even by other Enyo developers, if you choose.

This is all part of our strategy to allow developers to focus on creativity and Avoid Repeating Themselves.

A Quick Overview

But enough talk. Here is an Enyo Hello World:

<!DOCTYPE html>
    <script src="enyo-2.2.0/enyo.js" type="text/javascript"></script>
    <script type="text/javascript">
        new enyo.Control({content: "Hello From Enyo"}).renderInto(document.body);

This example loads an enyo.js build from the latest release. If you downloaded the SDK you have a versioned build file. If you pulled from GitHub, you can either make your own build using a minify script in enyo/source/minify (requires Node), or you can load directly from the source (enyo/source/enyo.js). Loading from source is also called ‘debug loading’ because the modules are loaded as individual files, which is easier for debugging, but much less efficient.

The base enyo.Control works much like an HTML tag. You can assign classes and attributes and give it a style. E.g.

var Control = require('enyo/Control');
new Control({content: 'Hello From Enyo', classes: 'foo',
	style: 'color: red', attributes: {tabIndex: 0}}).renderInto(document.body);


<div class="foo" style="color: red;" tabIndex="0">Hello From Enyo</div>

Now, the good part comes when you combine more than one Control, e.g.

new Control({
    components: [
        {content: 'Hello From Enyo'},
        {tag: 'hr'}

This Control now encapsulates two Controls into one scope (we can encapsulate any type of Component, that’s why the property is called components. Controls are one kind of Component.) The outer Control is responsible for the encapsulated components: it manages their lifecycle, listens to their messages, and maintains references to them. For example:

new Control({
    components: [
        {name: 'hello', content: 'Hello From Enyo', ontap: 'helloTap'},
        {tag: 'hr'}
    helloTap: function () {
        this.$.hello.addStyles('color: red');

Here we’ve given one of the components a name (‘hello’) and told it to send a ‘helloTap’ message when it’s tapped (tap is basically the same as the DOM click event, but it works in both mouse and touch environments). The $ property is a hash that references all the sub-components (we don’t store these references directly on this to avoid name conflicts). Notice there is no add/remove machinery to listen to this event, that’s all taken care of.

The main point is that ‘hello’ and the ‘hr’, their references and behavior, are completely contained inside the outer control. Now, to re-use this, we need to make it a prototype.

Enyo contains a constructor/prototype-generator that we call enyo.kind. Constructors that enyo.kind produces are called kinds. Kinds are not magic, they are just regular old JavaScript constructors. However, kinds simplify our lives (and our syntax) by allowing us to avoid repeating the same boilerplate code each time we create a prototype (DRY). We can convert the Control above to a kind like so:

var kind = require('enyo/kind');
var Hello = kind({
    name: 'Hello',
    kind: Control,
    components: [
        {name: 'hello', content: 'Hello From Enyo', ontap: 'helloTap'},
        {tag: 'hr'}
    helloTap: function () {
        this.$.hello.addStyles('color: red');

new Hello().renderInto(document.body);

The code above creates a new kind called “Hello” derived from enyo.Control. It contains some components and some behavior. I can create as many “Hello” objects as I want, each instance is independent, and the user of a “Hello” doesn’t need to know anything about its internals. This ability to define encapsulated objects and behavior (Components) and to re-use those encapsulations as prototypes (kinds) is money.

To get started with Enyo, grab Enyo Bootplate and then head over to the Developer Guide to find everything you need to know to get started.


Enyo 2 has its roots in the framework developed to power the applications on HP’s TouchPad, an innovative device powered by webOS that embraced the web stack as its primary application environment. Over a thousand apps, including the stock applications that shipped with the TouchPad, were built using Enyo 1. Although Enyo was conceived from the start as platform-independent framework, Enyo 1 out of necessity targeted webOS and the TouchPad specifically.

In January 2012, along with open-sourcing Enyo under the Apache 2.0 license, we refocused our efforts on porting Enyo to work with all modern web environments, including iOS, Android, Safari, Firefox, Chrome, and IE8+. Enyo 2.0 exited beta and was released widely in July 2012, sporting a beautiful cross-platform UI toolkit, a layout library supporting multi-form factor application designs, and lots of other goodies you can use today to build first-class apps for the web or mobile with native look and feel.

In March 2013, the core Enyo team was acquired along with the entire webOS team by LG Electronics, and our cross-platform mission was extended even further, most notably to supporting Smart TV app development. In February 2014, the Enyo team open-sourced the Moonstone and Spotlight libraries, which provide a rich, modern toolkit for building beautiful large-screen app experiences.


Enyo is available under the Apache License, Version 2.0.