Voodoo.js 0.13.0

Documentation

Voodoo.js puts the behaviour of the page inside the HTML itself. You write attributes, the library binds each one to reactive state, and the screen updates on its own. No build step, no eval, no dependencies at all.

<div v-data="{ name: '' }">
  <input v-model="name" placeholder="Your name">
  <p v-show="name">Hello, { name }!</p>
</div>

The block above is not a picture and not a video: it is really running, inside this page, with the same library you are about to download. The whole documentation works like that.

Where to start

If you have never used the library, follow the guide in order. It is twenty-four short pages, each one solving a concrete problem, and each one carrying on from where the previous one stopped. In two hours you go from an empty file to a page with server data, a validated form and components of your own.

• Step 1What it is and when to use it What it is for, when something else is the better choice, and what the library does differently.
• Step 2Installation and your first file Download one file, point a tag at it, write HTML. From nothing to something working on screen.
• Step 3The two modes Attributes over the HTML you already have, or createApp().mount('#app'), in Vue's shape.
• Step 4State and scope v-data, what a scope is, how one scope sees another, and where to keep each thing.

I already know it, take me to the reference

The reference is the part you consult in a hurry, in the middle of a problem. It lists everything that exists, without narrative: names, arguments, accepted values and the exact behaviour.

• ReferenceDirectives Every directive by category, with what each one takes and what it gives back.
• ReferenceThe V object Everything the library publishes on window.V, method by method.
• ReferenceMagic variables The $ names that exist inside any expression, from $el to $toast.
• ReferenceBuilt-in components The 29 components in the full build, and the props of each one.
• ReferenceHTTP client V.http, the interceptors, the cache and the error handling.
• ReferenceUtilities Formatters, array functions, text, dates and the rest of the toolbox.

What comes in the box

The library is published as three files. They are all the same project, cut at different points. You pick one, download it, and that is it.

When in doubt, start with voodoo.min.js. The installation page explains how to choose and how to switch later.

Three rules that avoid almost every problem

They come up again, unhurried, on the pages where they belong. They are here because they answer most of the questions people have when they are starting out.

1. The v-* attributes disappear from the HTML. Once the library has processed an element, it keeps the value in memory and removes the attribute from the document. No CSS rule and no querySelector can depend on [v-tab] or anything like it. Use classes or data-*.
2. Interpolation uses a single brace. { name } is the standard form. {{ name }} is accepted too, for people coming from Vue. Both accept an object inside the expression and a line break; what is not a valid expression stays as text.
3. There is no eval. Expressions go through a parser of the library's own. That is what lets the library run under a restrictive Content Security Policy, and it also explains why an expression accepts less than whole JavaScript. The reference page lists what gets in.

The full map

The menu on the left has everything. If you would rather search, the field at the top searches every page at once — the shortcut is Ctrl + K, or just /.