Show HN: WebJSX – A tiny Web Components and JSX library
WebJSX is a minimal library for building web applications using Web Components and JSX, featuring createElement and applyDiff functions, supporting custom elements, and available for installation via npm.
Read original article
WebJSX is a minimal library designed for building web applications using Web Components and JSX, emphasizing simplicity with two main functions: createElement and applyDiff. The library allows developers to write HTML markup using JSX, which returns Virtual Nodes, and efficiently merges these Virtual Nodes into the real DOM. As Web Components have matured, WebJSX aims to combine their capabilities with JSX/TSX for type safety, providing a modern approach to web development while adhering to web standards. The library supports event handling, fragments, and custom elements, making it versatile for various applications. Installation is straightforward via npm, and examples are available on StackBlitz for quick reference. Additionally, WebJSX is open-source under the MIT license, welcoming contributions and community support.
- WebJSX combines Web Components with JSX for modern web development.
- It features two core functions: createElement for JSX markup and applyDiff for DOM updates.
- The library supports custom elements, event handling, and fragments.
- Installation is simple via npm, with examples available on StackBlitz.
- WebJSX is open-source and encourages community contributions.
Related
Execute JavaScript in a WebAssembly QuickJS Sandbox
QuickJS is a secure JavaScript execution tool in a WebAssembly sandbox. It includes security features, file system access, custom node modules, a fetch client, and a test runner. Find detailed documentation and examples in the repository. Users can seek further assistance for inquiries.
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
VanillaJSX.com
The article highlights using vanilla JSX for creating reusable DOM elements, featuring examples like a click counter and todo list, and discusses the "imlib" library for efficient application development.
WelsonJS: Build a Windows app on the Windows built-in JavaScript engine
WelsonJS is a framework for building Windows desktop applications using JavaScript and other languages, featuring built-in transpilers, compatibility with web standards, and integration with Windows services and development tools.
Show HN: Tiny JS – A Tiny JavaScript Library for Easy DOM Creation
Tiny JS is a lightweight JavaScript library that simplifies DOM manipulation, allowing dynamic HTML creation, deep property assignment, easy content appending, and straightforward installation, while encouraging community contributions.
5 commentsOne example: if I want to use tailwindcss, then adopting web components comes at a cost/risk. While there are techniques like in this tutorial [1], you end up getting cut by the bleeding edge if you are not using Lit, you are using vite (based on comments), etc etc. (And the space moves so fast, I'd be afraid that any architectural differences between Tailwind and Web Components, might start to hurt me further in the future.)
I must have used around 50 prompts for this. The source code is here: https://github.com/webjsx/webjsx
This was the first prompt: https://chatgpt.com/share/66f0307c-e0f8-800d-873c-beb65abd7f...
Related
Execute JavaScript in a WebAssembly QuickJS Sandbox
QuickJS is a secure JavaScript execution tool in a WebAssembly sandbox. It includes security features, file system access, custom node modules, a fetch client, and a test runner. Find detailed documentation and examples in the repository. Users can seek further assistance for inquiries.
Show HN: Plain Vanilla – a tutorial website for vanilla web development
The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.
VanillaJSX.com
The article highlights using vanilla JSX for creating reusable DOM elements, featuring examples like a click counter and todo list, and discusses the "imlib" library for efficient application development.
WelsonJS: Build a Windows app on the Windows built-in JavaScript engine
WelsonJS is a framework for building Windows desktop applications using JavaScript and other languages, featuring built-in transpilers, compatibility with web standards, and integration with Windows services and development tools.
Show HN: Tiny JS – A Tiny JavaScript Library for Easy DOM Creation
Tiny JS is a lightweight JavaScript library that simplifies DOM manipulation, allowing dynamic HTML creation, deep property assignment, easy content appending, and straightforward installation, while encouraging community contributions.