I Built Voodoo.js to Bring TSX and Reactivity Directly Into Plain HTML
kwy404Dev.to (EN Zone)
2 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
I wanted to see whether the extra brightness range on modern HDR displays could be useful for ordinary webpages, not just video. The result is Brightpixels, a dependency-free library built around two custom elements: ```html <bright-text intensity="12">Important words</bright-text> <b
Pretty happy with the overall design , especially how it handle on mobile. I plan to add more features, like weather layers and, of course, real time flight display. submitted by /u/CYRIAQU3 [link] [留言]
Over the past few days, I was trying out gov.uk prototype system for my static website. Like every night owl, the unbranded template's white background was hurting my eyes. I googled for some sort of dark mode, found The National Archives Design System. It suits my purpose, has the dark mode, and i