Get started

What is Valyrian.js?Installation Hyperscript/JSX Components Lifecycle methodsDirectives

Built in directives v-model Custom directives

Plugin system Router plugin Request plugin Service worker plugin Node plugin Store plugin Hooks plugin Signals plugin

Hyperscript/JSX

Hyperscript

Like many other frameworks, Valyrian, in its core, makes use of Hyperscript to compose a virtual dom for the view layer, and it follows the minimal way of hyperscript, so you can write any dom by calling Valyrian this way:

// v(tagName, properties[, childnodes]) 
return v('div', {id: 'valyrian'}, [
    'An awesome framework',
    v('small', null, 'It will surprise you')
]);

The latest code will create the next view

<div id="valyrian">
    An awesome framework <small>It will surprise yousmall>
div>

An awesome framework It will surprise you

JSX

If you use it with a compiler like Webpack or Rollup you can and we encorage you to use JSX.
This way you can create the previous dom the way it is finally represented:

// You write 
return <div id="valyrian">
    An awesome framework <small>It will surprise yousmall>
div>;

// And you get 
<div id="valyrian">
    An awesome framework <small>It will surprise yousmall>
div>

An awesome framework It will surprise you

Babel

With Babel you need to install the babel-plugin-transform-react-jsx plugin
Then in your .babelrc file:

{
    "presets": ["..."],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "v"
        }]
    ]
}

Buble

With Buble you only need to pass jsx: 'v' in the configuration object:

{
    input: '...',
    plugins: [
        buble({
            jsx: 'v'
        })
    ]
  }

Multiple root elements

Unlike many other frameworks, when you are working with the view layer with Valyrian, you are not limited to return only one root node. You can return an array of nodes without any trouble and without adding any sugar syntax, example:

return [ 
    <span>Hellospan>, 
    <span>Worldspan>
];