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).
- HAX Slack - where HAX core developers talk web components / all our projects
- HAX Issue Queue - Unified issue queue for all of our projects
- HAXCamp: Uncode - Friday 3-5pm EST weekly recorded hang out to discuss web components, hax and answer community questions. Join our slack to confirm air dates. Watch past episodes here
- Web components Slack - A very popular open hang out for web component developers. (Named polymer but not polymer specific)
- HAXTheWeb YouTube playlist - all things hax the web, presentations, development efforts, etc.
- #HAXTheWeb on twitter - We microblog there a lot
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 Webcomponents.
- 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.
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!