Modern component model for ES6


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @lpghatguy/armature in KB



npm install @lpghatguy/armature --save

Armature is a modern component model targeted at TypeScript and ES2015+ workflows. It runs in browsers and servers alike, allowing for a full-featured isomorphic view system without the complexity of larger frameworks.

Armature leverages the power of classes, decorators, and template strings to reduce API surface and improve interoperability.


Armature releases are compiled to ES5 and should run on any compliant ES5 runtime.


ES6 and TypeScript

import { Component } from "armature";

console.log(Component) // yay

CommonJS (Node and Browserify)

const armature = require("armature");
const Component = armature.Component;

console.log(Component) // yay


Armature is exposed as armature when no module system is detected.

console.log(armature.Component); // yay


All examples are written in ES2015 plus decorators, which is also valid TypeScript

Components start with classes that extend Armature's base Component. They're decorated to include data about the component.

import { Component, TagName, Template } from "@lpghatguy/armature";

const template = (component) => `
    We have this name: ${ component.$data.name }
    <button class="alert">Alert!</button>

class HelloWorld extends Component {
    $hydrate() {

        const button = this.$element.querySelector("button.alert");
        button.addEventListener("click", e => {
            alert("The alert button was pressed!");

We can then instantiate and use the component:

const hello = new HelloWorld({
    name: "Hello, world!"

// reify: manifest this component as an HTML element


Download the source, and then install dependencies and their typings using typings:

npm install
typings install

Use npm run build to build the source once, or use npm run dev to continuously rebuild the source as it changes.

Tests can be run on both Node.js and via Karma using npm test.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.