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

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
{products
.filter(p => p.stock > 0)
.sort((a, b) => b.stock - a.stock)
.map((p, i) => (
{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
Read original: https://dev.to/kwy404/i-built-voodoojs-to-bring-tsx-and-reactivity-directly-into-plain-html-5g24
PreviousI built this fullscreen flip clock as a side project, would love feedback.NextI built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps
Related posts

115 Blog Posts To Learn About Movies
0HackerNoon
Music Through Your Cheekbones: How Bone-Conduction Headphones Work and Why They Sound Different
0HackerNoon
Turning elementary arithmetic into an enterprise-wide operational capability
0Hacker News New
Anthropic's growth just flattened
0Hacker News New
h1: A Taste of the Bitter Lesson in Automated Theorem Proving
0Hacker News New
The Beer Wars: Inside the scramble to control Central Africa's liquid gold
0Hacker News New