Skip to content

Latest commit

 

History

History
22 lines (18 loc) · 3.36 KB

HAXDocs.md

File metadata and controls

22 lines (18 loc) · 3.36 KB

HAX

HAX (Headless Authoring eXperience) is a web components driven editing experience that works across platforms. To add new "bricks" to HAX either pick from the 100 or so that the HAX core team has developed or create your own web components and add a callback method to it to static get haxProperties() (docs).

Getting help

Developers

You can run and build assets local to your project as opposed to using one of the zero-config CDNs (or use your own!). CDN providers are created using the following tools:

  • Unbundled Webcomponents repo - Using this can you can make your own build that works in HAX and any other website with relative ease. The tooling is all preconfigured, all you need to do is install new assets from NPM (use yarn to do this) and
  • OpenWC - While not HAX related, this is a great community tooling repo to get started with web components and front end development using best practices.
  • WCFactory - This can be used to build and manage a web components repo at scale. This is a meta tooling which can be used to build a monorepo using best practices of managing and deployment hundreds of elements. This is what the HAX core team uses to build and manage LRNWebComponents.
  • lit-element docs - While not required, LitElement is a very popular base case for development web components that provides better DX than "VanillaJS" while still being extremely small.

Wiring custom elements to HAX

All you need to do for your element to work with HAX is add a static get haxProperties() function on your element which returns HAXSchema. You can read up on HAXschema on HAXTheWeb.org. Schema is relatively simple to construct (honestly we usually copy and paste from existing elements and tweak values).

The HAX core team builds in a mix of LitElement and VanillaJS and recommends everyone start at LitElement when working with HAXSchema though because of the web component standard HAX works with ANY web component library!