Headless Authoring eXperience (HAX) is a next generation block editor that frees you of block editor specific code. HAX works by adding a small bit of JSON schema to web components that you author. This keeps your design pure without adding overhead associated with a specific type of editor.

Extending HAX is simple:

  1. Make a new web component in any library you want, or VanillaJS
  2. Add some simple, well documented and flexible HAXSchema
  3. When  HAX is around, it'll know how to edit your element but you can use it anywhere regardless!

HAX is easy for developers to integrate too! Yarn / NPM install the element, place the editable content inside the slot of the h-a-x tag and now you've got an incredible, flexible, future proof editor without platform lock-in! Go forth and HAX the web!

As an example, the video-player at the top of the page was completely designed and worked on without ever thinking about HAX, same with the a11y-gif-player just above here or the code-sample tag. Then when the visual asset is finished, you write some small HAXSchema and now it's editable and able to be placed in HAX! Hit edit below and click on the video about to see for yourself.

In fact the code above is using a tag called < code - sample > to present itself! These elements work anywhere. Dig into the rest of the site for further documentation, integrations and how to get involved in HAX The Web .