Valyrian.js 5.0.8

Get started - Built in directives

What is Valyrian.js?InstallationHyperscript/JSXComponentsLifecycle methodsDirectivesServer side jsxPlugins

Built in directives

There are two types of directives in Valyrian.js, Rendering and Reactive directives.
As the most of events trigger a redraw of the view almost all of the directives listed in here are rendering directives. Only the v-model directive is reactive.


Works as Vue's v-if directive or ember if helper. It renders a vnode if the referenced value is thruthy.
let value = true;
v.mount('body', () => <div><span v-if={value}>Hello worldspan>div>); // -> 
Hello world
value = false; v.update(); // ->


Valyrian isn't template based so we can't handle a v-else like directive. Instead of v-else we have a v-unless directive.
Works as ember unless helper. It renders a vnode if the referenced value is falsy.
let value = true;
v.mount('body', () => <div><span v-unless={value}>Hello worldspan>div>); // -> 
value = false; v.update(); // ->
Hello world


Works as Vue's v-show directive. It renders a vnode and only changes it's display style value.
let value = true;
v.mount('body', () => <div><span v-show={value}>Hello worldspan>div>); // -> 
Hello world
value = false; v.update(); // ->
Hello world


v-for directive works like this:
  • On the element set the v-for directive to an array.
  • Put a function as a child to process the elements of the array.
Think of it as a map function that returns a list of vnodes.
let items = ['autem', 'possimus', 'non', 'magnam'];
v.mount('body', () => <ul v-for={items}>{(word, i) => <li>{i} - {word}li>}ul>);
  <li>0 - autemli>
  <li>1 - possimusli>
  <li>2 - nonli>
  <li>3 - magnamli>


v-class directive receives a object with boolean attributes to toggle classes on the dom.
let classes = {
  world: true
v.mount('body', () => <div class="hello" v-class={classes}>div>); // -> = false; v.update(); // ->
classes.hello = false; v.update(); // ->


The v-html directive is used to render raw html. It is just a helper directive and it does not improve performance because Valyrian.js is already very fast with vnodes.
v.mount('body', () => <div v-html="
Hello world
div>); // ->
Hello world
This method helps in situations where you need to render, as an example, a svg string.
For the same reason that Valyrian.js is very fast rendering vnodes, there is no need for a v-text directive to optimize performance, conversely, adding a v-text directive slows down the rendering process.


The v-once directive is used to render just once and skip all subsequent render updates. It is similar to write the lifecycle onbeforeupdate={() => false}
let Store = {hello: 'world'};
v.mount('body', () => <div v-once>Hello {Store.hello}div>); // -> 
Hello world
Store.hello = 'John Doe'; v.update(); // ->
Hello world