I Built Voodoo.js to Bring TSX and Reactivity Directly Into Plain HTML

kwy404 — Fri, 04 Sep 2026 22:47:57 +0000

What if you could write reactive interfaces, map arrays, filter data, use components, and even write JSX style syntax directly inside a plain HTML file?

That is the idea behind Voodoo.js.

Voodoo.js is an HTML first JavaScript framework designed for developers who want modern frontend capabilities without introducing a complex toolchain.

You can start with a single script tag and keep working directly inside your HTML.

No bundler.

No compiler.

No configuration.

No project scaffolding.

Just HTML, JavaScript, and reactivity.

In stock

{i + 1}. {p.name} {p.stock} left

The interesting part is that this is still a normal HTML file.

You can use familiar JavaScript methods such as filter, sort, and map while generating reactive markup directly inside the page.

For developers coming from React, Vue, Alpine, or even vanilla JavaScript, the syntax should feel immediately familiar.

But the philosophy is different.

HTML stays at the center of the application.

Voodoo.js adds the reactive layer around the markup you already have instead of forcing your HTML into a completely different application structure.

One script tag

Getting started can be as simple as adding Voodoo.js to an HTML page.

From there you can use reactive data, events, expressions, components, HTTP utilities, forms, and JSX style templates.

There is no required build pipeline.

That also makes Voodoo.js interesting for prototypes, small applications, internal tools, static websites, experiments, and developers who simply enjoy working close to the browser.

The Playground

I also built an interactive playground where you can experiment with the framework directly in the browser.

You can edit the HTML, run the example, and immediately see the result in the live preview.

Try the JSX map example here:

https://kwy404.github.io/Voodoo.js/playground.html#jsx-map

Project website:

https://kwy404.github.io/Voodoo.js/

GitHub:

https://github.com/kwy404/Voodoo.js

Voodoo.js is open source and still evolving.

I would really like feedback from other JavaScript developers.

What do you think about this approach?

Would you use JSX or TSX style syntax directly inside an HTML file if it meant keeping the project simple and avoiding a build step?

If you find the project interesting, consider checking the repository, opening an issue, contributing, or giving it a star on GitHub.

JavaScript #TypeScript #TSX #JSX #WebDevelopment #Frontend #FrontendDevelopment #OpenSource #HTML #WebDev #Programming #Coding #DeveloperTools #JavaScriptFramework #VoodooJS

A reactive JS framework for server-rendered apps — no Virtual DOM, no eval(), no build step required. Looking for critical feedback.

kwy404 — Mon, 31 Aug 2026 20:01:48 +0000

I've been building a JavaScript framework called Voodoo.js, and I'd rather get torn apart in the comments than hear that it looks cool.

It started with one question:

How much JavaScript do we actually need to write for everyday interactive interfaces?

For a lot of apps I don't want to build a component tree, configure a bundler, install five libraries, wrap the API, manage state somewhere else, and then wire it all back into HTML.

Sometimes I just want to keep writing HTML.

GitHub: https://github.com/kwy404/Voodoo.js

The 30-second version

A reactive counter:

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

  <strong>{ count }</strong>

  <button @click="count++">+</button>
</div>

No querySelector. No addEventListener. No innerHTML. No Virtual DOM.

Voodoo observes the real DOM and connects HTML directives to a fine-grained reactive system built on Proxy.

"Why another JS framework?"

Fair question. It's the first one I'd ask too.

Voodoo isn't trying to replace React, Vue or Svelte. The target is different: projects where the server already renders the HTML.

Laravel, Django, Rails, PHP, ASP.NET, Node, Go templates — plus small frontends where a full SPA is overkill.

Philosophically it lives somewhere near Alpine.js, HTMX and petite-vue. The difference I was chasing: HTTP, forms, validation, state, components, routing, UI helpers and reactivity should feel like one system, not five glued together.

Declarative HTTP

This is the part I enjoy using most.

Instead of wiring a button by hand:

button.addEventListener('click', async () => {
  if (!confirm('Delete user?')) return

  await fetch('/api/users/42', { method: 'DELETE' })

  showToast('User deleted')
})

You declare the intent:

<button
  v-delete="/api/users/42"
  v-confirm="Delete this user?"
  v-toast-success="User deleted">
  Delete
</button>

The goal isn't to make JavaScript disappear. It's to stop writing JavaScript that only restates what the HTML already says.

Forms

Same idea:

<form
  v-submit="/api/users"
  v-validate
  v-toast-success="User saved">

  <input name="email" type="email" required>

  <button type="submit">Save</button>
</form>

For most CRUD screens, that's the whole thing. When you need more, plain JavaScript is still right there. Voodoo is meant to be progressive, not restrictive.

No `eval()`, no `new Function()`

Take this:

<button @click="count++">

The lazy implementation is new Function(expression) or eval(expression). Voodoo does neither.

There's a full expression engine inside:

Lexer → Pratt Parser → AST → Interpreter

Expressions are parsed and interpreted by Voodoo itself. That gives the framework control over which syntax is supported and what the expression environment can touch — and honestly it's the most interesting engineering in the project.

Fine-grained reactivity

The reactive layer uses Proxy, tracking dependencies per object and per property:

reactive object
    ↓ property accessed
dependency tracked
    ↓ property changed
only dependent effects run

No Virtual DOM diff between updates. The real DOM is patched directly.

The reactivity package exposes a familiar surface:

reactive()   ref()        computed()
watch()      watchEffect() effectScope()
toRaw()      markRaw()

If you've used a modern reactive framework, none of this should surprise you.

Works with or without a build step

Drop it in:

<script src="voodoo.js"></script>

<div v-data="{ open: false }">
  <button @click="open = !open">Toggle</button>

  <div v-show="open">Hello DEV Community 👋</div>
</div>

Or import it like anything else:

import { reactive } from 'voodoojs/reactivity'

Both audiences matter to me: the "paste a script tag" crowd and the "give me proper ESM" crowd.

Where it fits

Server-rendered HTML  +  Voodoo.js  →  Reactive interface

A Laravel view, for example:

@foreach($users as $user)
  <button
    v-delete="/users/{{ $user->id }}"
    v-confirm="Delete user?">
    Delete
  </button>
@endforeach

The backend keeps rendering the app. Voodoo adds the interactive layer. No separate frontend application.

The honest part

What began as an experiment grew into a large framework: reactivity, directives, components, stores, HTTP, forms, validation, persistence, routing, i18n, UI utilities, animation, drag and drop, charts, streaming, devtools, and a CLI.

That growth is now the problem. The project doesn't need another hundred features — it needs stability.

Current focus:

🔒 Security hardening
🧩 Parser edge cases
✅ Test coverage
📐 API stability
📦 Bundle modularity
⚡ Performance benchmarks
📚 Documentation
🚀 Package and release quality

I'd rather ship a small set of features people can trust in production than a huge one nobody can.

What I'm asking for

If you work with Alpine.js, HTMX, Vue, petite-vue, Stimulus, Livewire, server-rendered apps, or plain JS — I want your read on this:

What would stop you from using something like Voodoo.js?
Which parts of the API feel intuitive?
Which parts feel unnecessary?
What would you need to see before calling it production-ready?

And if you like working on JS internals, there's real work available: parsers, reactivity, testing, browser compatibility, TypeScript, performance, security, docs, components.