Use Feathers UI with JavaScript in web browsers

While Feathers UI and OpenFL are written in the Haxe programming language, both projects are available on the npm package registry, allowing JavaScript developers to create projects without Haxe.

• Feathers UI on npm
• OpenFL on npm

Installation

Option 1: Install with npm

In a JavaScript project, you can install Feathers UI using npm install. OpenFL will be installed automatically as a dependency.

npm install feathersui-openfl

Option 2: Load from a CDN

If you prefer, you can load Feathers UI and OpenFL directly from the unpkg CDN in any HTML file.

<script src="https://unpkg.com/openfl@9.3.4/dist/openfl.min.js"></script>
<script src="https://unpkg.com/actuate@1.9.0/dist/actuate.min.js"></script>
<script src="https://unpkg.com/feathersui-openfl@1.3.0/dist/feathersui-openfl.min.js"></script>

The following sample code demonstrates a simple Hello World project:

class HelloWorld extends feathers.controls.Application {
  constructor() {
    super();

    this.layout = new feathers.layout.AnchorLayout();

    this.button = new feathers.controls.Button();
    this.button.layoutData = feathers.layout.AnchorLayoutData.center();
    this.button.text = "Click Me";
    this.button.addEventListener(
      feathers.events.TriggerEvent.TRIGGER,
      this.button_triggerHandler
    );
    this.addChild(this.button);
  }

  button_triggerHandler = (event) => {
    feathers.controls.TextCallout.show("Hello World", this.button);
  };
}

var stage = new openfl.display.Stage(0, 0, null, null, {
  allowHighDPI: true,
});
document.body.appendChild(stage.element);
stage.addChild(new HelloWorld());