JSX in plain HTML. No build step.

Write JSX and reactive attributes in a .html file, open it in the browser, and it runs.

Website · Learn in 10 minutes · Playground · Docs · Examples · Português

A first page

Save this as index.html and open it. There is nothing to install and nothing to build.

<!doctype html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/voodoojs@1.1.0/dist/voodoo.full.min.js" defer></script>
</head>
<body>

{
  const user = 'Ana';
  const fruits = ['apple', 'pear', 'grape'];
}

<h1>Hello, {user}!</h1>

<ul>
  {fruits.map((fruit) => (
    <li>{fruit}</li>
  ))}
</ul>

</body>
</html>

The same runtime reads attributes, and the two styles mix freely on one page:

<div v-data="{ count: 0 }">
  <button @click="count--">-</button>
  <strong>{ count }</strong>
  <button @click="count++">+</button>
</div>

New to it? The 10 minute lesson walks through state, events, v-model, v-if, v-for, JSX and fetching data in a live editor.

What it is

• No toolchain. The file you edit is the file the browser runs, even straight from your disk.
• Fine-grained reactivity. A change updates only the DOM nodes that read it. There is no virtual DOM.
• No eval. Expressions go through a parser and an interpreter, so pages run under a strict Content Security Policy.
• In the box. Components, HTTP, forms and validation, masks, a router, i18n, animation, charts and ready-made UI components, with no runtime dependencies.
• TypeScript. The source is TypeScript and every entry point ships declarations.

The honest cost. A compiler turns JSX into DOM calls ahead of time; Voodoo reads it at runtime, so a compiled framework is faster at raw updates and ships less code. The benchmarks show where and by how much. Voodoo suits server-rendered pages, admin panels, content sites, prototypes, and pages where a build step costs more than it gives.

Install

From a CDN:

<script src="https://cdn.jsdelivr.net/npm/voodoojs@1.1.0/dist/voodoo.full.min.js" defer></script>

The library starts itself once the page is ready.

From npm, for a bundler or a server-rendered app:

npm install voodoojs

import V from 'voodoojs'
V.start()

Which file?

File	What it has
voodoo.core.min.js	Reactivity, expressions, directives, components and declarative requests
voodoo.min.js	Adds forms, validation, masks, UI directives and drag and drop
voodoo.full.min.js	Adds JSX in HTML, charts, motion, the router, i18n and 29 ready-made components

JSX in HTML needs the full build. Sizes are in the bundle report.

A bit more

A request with its loading and error state, and a form that validates and submits, with no script:

<div v-resource="users: /api/users">
  <p v-if="users.loading">Loading...</p>
  <p v-else-if="users.error">{ users.error.message }</p>
  <ul v-else>
    <li v-for="user in users.data" :key="user.id">{ user.name }</li>
  </ul>
</div>

<form v-submit="/api/users" v-method="POST" v-validate v-toast-success="User created">
  <input name="email" type="email" v-required v-email>
  <button type="submit" :disabled="$form.loading">Save</button>
</form>

When HTML is not enough, the V object offers the same from JavaScript: V.reactive, V.component, V.http, V.store and V.router.

Command line

npx voodoojs-cli init my-page                          # a ready-to-open page
npx voodoojs-cli add card                              # copy a component into your project
npx voodoojs-cli build --modules=core,directives,http  # a bundle with only what you use

Every command: packages/cli/README.md.

Documentation

• The documentation site: the guide, the reference and live examples.
• The playground: five starters and more than a hundred examples to edit in the browser.
• In this repository: docs/, ARCHITECTURE.md, CHANGELOG.md and ROADMAP.md.

Contributing

git clone https://github.com/kwy404/Voodoo.js.git
cd Voodoo.js && npm install
npm test            # the test suite
npm run typecheck   # types
npm run build       # every bundle
npm run serve       # the website and examples on a local server

Every bug fix ships with a regression test. The details are in CONTRIBUTING.md, and everyone is expected to follow the CODE_OF_CONDUCT.md.

More from kwy404

Monsoon, breakhound, vueleap, graphemely, numberparrot, edgegoat, cookieowl, installkite, a11ymedic, fontsketch and kastor.

Author

Made by Alexandre Kohler (GitHub, LinkedIn). The website is built with Monsoon, and its interactive parts are built with Voodoo.js.

License

MIT