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

我开发了 Voodoo.js，旨在将 TSX 和响应式能力直接引入原生 HTML

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. 如果能在纯 HTML 文件中直接编写响应式界面、映射数组、过滤数据、使用组件，甚至编写 JSX 风格的语法，那会怎样？这就是 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. Voodoo.js 是一个“HTML 优先”的 JavaScript 框架，专为那些希望拥有现代前端能力却不想引入复杂工具链的开发者而设计。你只需一个 <script> 标签即可开始，并直接在 HTML 中进行开发。无需打包器、无需编译器、无需配置、无需项目脚手架。只有 HTML、JavaScript 和响应式能力。

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 )) } 库存中 {products .filter(p => p.stock > 0) .sort((a, b) => b.stock - a.stock) .map((p, i) => ( {i + 1}. {p.name} {p.stock} 件剩余 )) }

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. 有趣的是，这仍然是一个普通的 HTML 文件。你可以在页面内直接生成响应式标记的同时，使用熟悉的 JavaScript 方法（如 filter、sort 和 map）。对于来自 React、Vue、Alpine 甚至原生 JavaScript 的开发者来说，这种语法会感到非常亲切。

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. 但其理念有所不同。HTML 始终处于应用程序的核心。Voodoo.js 在你现有的标记周围添加响应式层，而不是强迫你的 HTML 适应完全不同的应用程序结构。

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. 只需一个脚本标签，入门就像将 Voodoo.js 添加到 HTML 页面一样简单。此后，你就可以使用响应式数据、事件、表达式、组件、HTTP 工具、表单和 JSX 风格的模板。它不需要构建流水线。这也使得 Voodoo.js 非常适合原型设计、小型应用、内部工具、静态网站、实验性项目，以及那些喜欢在浏览器底层工作的开发者。

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 交互式演练场：我还构建了一个交互式演练场，你可以在浏览器中直接体验该框架。你可以编辑 HTML、运行示例，并立即在实时预览中看到结果。点击此处尝试 JSX 映射示例：https://kwy404.github.io/Voodoo.js/playground.html#jsx-map

Project website: https://kwy404.github.io/Voodoo.js 项目网站：https://kwy404.github.io/Voodoo.js

GitHub: https://github.com/kwy404/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. Voodoo.js 是开源的，且仍在不断演进。我非常期待其他 JavaScript 开发者的反馈。你如何看待这种方法？如果能在保持项目简洁并省去构建步骤的前提下，直接在 HTML 文件中使用 JSX 或 TSX 风格的语法，你会使用它吗？如果你觉得这个项目很有趣，欢迎查看仓库、提交 Issue、贡献代码或在 GitHub 上点个星。

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