Put h-scope on an element and a scope starts there. The attributes inside it bind values to the screen. You start with one script tag and no build step.
Expressions are plain Vue, and only the prefix is h-. Reactivity comes from Vue's own core library (@vue/reactivity). You write it straight into markup, with no component files and no build.
You do not need to write values down in advance. The input value the server rendered becomes the initial value as is. {{ }} in text is read only directly under the element where h-text-inline is set. Here, that is the button.
Related h-scope h-model :disabled h-text-inline
<div h-scope="{ count: 0 }">
<button @click="count++">+1</button>
<span h-text="count"></span>
</div>hyper-scope adds behavior to pages the server rendered.
@click, :class and h-for as they areunsafe-eval Projects where security matters may not allow this configurationThe server renders the page, and the browser only adds behavior on top. A fragment inserted later comes alive on its own if it carries a scope. All there is to learn: 22 attributes, 12 properties, and 2 functions.
If you have used Vue or Alpine, the table below and a few examples are enough. There are 22 attributes, 12 properties, and 2 functions in all, and each one is explained in the docs.
| What it does | Vue | Alpine | hyper-scope |
|---|---|---|---|
| Where values live | data() · setup() | x-data | h-scope |
| Text | {{ }} · v-text | x-text | h-text · h-text-inline |
| Attributes · events | :class · @click | :class · @click | :class · @click |
| Input | v-model | x-model | h-model |
| Conditions · loops | v-if · v-for | x-if · x-for | h-if · h-for |
| Show and hide | v-show | x-show | h-show |
| Computed value | computed | getter | h-computed · getter |
| Work to run when a value changes | watchEffect | x-effect | h-effect |
| Watching one value | watch | $watch | None |
| Pointing at an element | ref | x-ref · $refs | h-ref · $refs |
| Notifying upward | $emit | $dispatch | $emit · $dispatch |
| Handing down | provide · inject | the outer x-data is visible | h-provide · h-inject |
| Receiving server values | props | written in x-data | h-props (JSON) |
h-inherit or h-inject.{{ }} is read only in the elements you mark. User text rendered by the server is mixed in, so only the text of an element with h-text-inline is read.h-scope. The only doors are scopes and components.h-scope opens a scope. Values from the server are received with h-props and only read through $props. h-state creates a separate reactive value space inside that element without creating a scope host. Use it to give each row its own values.
Text is h-text. To put a value inside text, use h-text-inline and {{ }}. Attributes are :, showing and hiding is h-show, adding and removing is <template h-if>, and repeating is h-for.
h-model keeps an input and a value in sync, and @ listens for events. Modifiers (.prevent, .trim) are the same as in Vue. Name an element with h-ref and reach it through $refs.
Write what you hand down with h-provide, and what you receive with h-inject. A received name is read-only. You can change the inside of a received object. If the value itself must be replaced, ask the providing side with $emit.
h-computed:name is a computed value read inside that element. h-effect runs again whenever the values it reads change. With a modifier it follows a moment, not values: .mounted, .unmounted, .sealed.
Even when the server sends a fragment again, h-keep carries over the values being typed. h-cloak hides the element until it is mounted, h-await shows based on the state of an async task, and h-pre leaves everything inside untouched.
There are two functions. start() mounts the scopes in the document, and plugin() adds names, attributes, and components. Form validation $v and the turbo-frame handle $tf are plugins too.