You can learn more about the magic script and see the different element exposed by our CDN by going to the hax.cloud playground.
That will get you started with our CLI tools. Keep reading if you are here for more than just building things quickly.
HAX primary audience is to empower no tech and low tech implementations to empower as many voices as possible. That said, it is built on highly sophisticated tools that you can use in your own workflows to build web properties with or without HAX..
Here's a stand alone workshop our team built using Open WC as the foundation that can get you started into the world of Web components. It steps through decent tooling and gives you boilerplate code to fill in and enhance as well as publishing workflows to create static apps on vercel.
Through the magic of CDNs and our "magic script"
for dynamic element hydration, the following code pen is possible
as a way of demonstrating HAX and it's elements stand alone. This DOES NOT
include the CMS capabilities you find discussed in this site as that is a different tag. What you are seeing here is h-a-x
leveraged without a CMS but rest assured the same code powering this is embedded in haxcms-site-builder
which builds the entire website you see now!
Our storybook for all elements we document and provide examples for can be found here: HAXapi visual component doc site . Below is a code sample of how to implement the HTML in order to get HAX to load (it looks a little weird because of limitations with the system it can't be embedded in itself to avoid hax-ception!
<h-a-x>
Any HTML content you want, web components or otherwise. As Long as HAX understands the tags in between then they are editable.
</h-a-x>
<script type="module" src="@haxtheweb/h-a-x/h-a-x.js">
NPM / Yarn can be used to obtain the packages associated with HAX. The following will not get you access to all the blocks we support (HAXcms compiles all of these for end users but developers would need to include them one at a time). The HAX visual component doc site has a lot of the blocks we produce and most of these work with HAX the editor is told to support them
HAX by default supports HTML primitives and a few minor built in ones like a table editor, simple grids, and citations. To obtain the full set often shown in demonstrations you need to feed the hax editor a valid "app store" JSON based API.
HAXcms does this automatically but HAX 'save' event can be captured and then give you access to what HAX sees as HTML rather easily. The following example is scoped for SSR compatibility but works anywhere on window as well.