{{ props.small }}
{{/if}}examples ⋅ lib ⋅ GitHub repo ⋅ AI Guide ⋅ Benchmark
Fez brings a familiar component-based approach you know from Vue or React, but strips away the build complexity. It lets you write components naturally, right in your HTML, without needing a compilation step. Think of it as a jQuery for modern component development, with the simplicity of dropping a script tag into your page. You get to use your components as if they were native HTML elements, making the development experience straightforward and intuitive.
<ui-clock>
, place them anywhere in your HTML, and they just work. (Try it now in dev tools - instant magic!).fez
HTML files, not JavaScript. Your markup stays readable and approachable for designers and backend developers.<template>
tags. Perfect for micro-frontends and progressive enhancement.Fez.pub()
and Fez.sub()
.getFormData()
- serialize forms to JSON in one line, no libraries needed.connect
, onMount
, and onPropsChange
- no useEffect confusion or dependency arrays.With reactive state and custom style.
Or load via HTTP (as in this case)
That is it! Add then as regular DOM nodes.
You will learn all Fez features, just by inspecting these examples. You can edit and update both HTML and Fez code.
Basic Usage |
|
With Change Handler |
|
Disabled State |
|
change
events and supports onchange
callbacksonPropsChange()
value monitor.
value
attribute for initial color and disabled
attribute{{block ...}}
this.fezHide()
will remove fez node from dom, and set this.root
to first parent node and return initial child nodes.Click to flip!
Click to flip!
Click to flip!
Click to see
this.state
object triggers re-render.this.setStyle(key, value)
- set style to base nodeonDestroy() { ... }
- execute code when component is removed from DOMsetInterval() { ... }
to set interval on a instance. No need to clear it, it will be auto cleared on component destroy.fez.
pointerFez.head(...)
that will safely insert script tags in the page headerFez.untilTrue(...)
that will execute code every 100 milliseconds until it returns trueonPropsChange
:
(in this example :size=
this.formData()
. Get form data as object.this.onSubmit()
. If present, auto bind form and get form data as object:
if you want to calculate attribute value. Same as in Vue, current example :ping="..."
FORM
instead of default DIV
Fez(tagName, class { ... })
this.find()
to find node in template, shortcut for this.root.querySelector()
this.beforeRender()
to prepare vars before render (clean alternative to svelte $: {...}
this.onResize()
to execute code on window resized. Auto cleared when node is removed.:mobile { ...
shortcut.Fez.styleMacro
- define style shortcuts.First tab
second tab
second tab
this.childNodes()
FEZ instance helper function, get all first level child nodes, excluding #text nodes.:fez { ... }
is present, anything inside is local, anything outside is global.
If no class :fez
is present, style is considered local.
To enable, add add tooltip="..."
to any node.
fez-bind
- two way binding of input elementfez-use
- when node is added to dom, call described function and pass node as reference (inspired by Svelte)Fez was created by @dux in 2024.