{"id":21304765,"url":"https://github.com/kyr0/defuss","last_synced_at":"2025-07-28T22:40:32.313Z","repository":{"id":263482444,"uuid":"890124669","full_name":"kyr0/defuss","owner":"kyr0","description":"Build web frontends with async JSX components w/o VDOM and reactivity madness. Update real DOM jQuery-like using atomic DOM mutations in co-routines. Vite and Astro integration. Isomorphic SSR - also for data packages (state, webstorage, db). Works with web components. Compatible with everything - even static/pre-SPA/mixed-framework websites/apps.","archived":false,"fork":false,"pushed_at":"2025-07-01T18:43:29.000Z","size":37334,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T09:01:34.983Z","etag":null,"topics":["framework","jquery","jsx","library","nano","react-like","react-like-library","vdom","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyr0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-18T03:02:48.000Z","updated_at":"2025-06-29T15:45:04.000Z","dependencies_parsed_at":"2025-06-15T02:33:47.651Z","dependency_job_id":null,"html_url":"https://github.com/kyr0/defuss","commit_stats":null,"previous_names":["kyr0/defuss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kyr0/defuss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyr0%2Fdefuss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyr0%2Fdefuss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyr0%2Fdefuss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyr0%2Fdefuss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyr0","download_url":"https://codeload.github.com/kyr0/defuss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyr0%2Fdefuss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264902018,"owners_count":23680975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","jquery","jsx","library","nano","react-like","react-like-library","vdom","web"],"created_at":"2024-11-21T16:15:52.965Z","updated_at":"2025-07-11T21:30:45.862Z","avatar_url":"https://github.com/kyr0.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n\n\u003cimg src=\"assets/defuss_mascott.png\" width=\"100px\" /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ccode\u003edefuss\u003c/code\u003e\n\u003c/p\u003e\n\n\u003csup align=\"center\"\u003e\n\nSimplify \u0026 Succeed\n\n\u003c/sup\u003e\n\n\u003c/h1\u003e\n\nDefuss is a modern, minimalist web framework designed to bring simplicity back to web development. Here's what makes it special:\n\n## 🎯 Core Philosophy\nDefuss follows the principle of \"explicit simplicity\" - it provides powerful tools while keeping complexity low and giving developers full control. The framework motto is \"Simplify \u0026 Succeed.\"\n\n## 🔧 What Defuss Is\nDefuss is a tiny, modern web framework that:\n\n- **Eliminates complexity** in modern web development\n- Promotes **explicit code** over _hidden magic_\n- Brings back the *joy of building* for the web\n- Works with **native DOM APIs** and **vanilla JavaScript**\n  - (It can be load in a `\u003cscript\u003e`-tag to enhance websites, just like jQuery back in the day)\n- Provides **React-like JSX components**, without any overhead or boilerplate, but **with** native \u003ccode\u003easync\u003c/code\u003e rendering\n- **No mental load** caused by implicit reactivity \n- Offers a **modern jQuery-like API** for **atomic** DOM manipulation\n- Comes with a DOM diff'ing algorithm for efficient UI updates (**no** `innerHTML` or `innerText` usage)\n- Supports **TypeScript** out of the box, providing excellent type safety and developer experience (DX)\n- Is **fully isomorphic**, working seamlessly in both **browser** and **Node.js** environments\n- Integrates with modern build tools like **Vite** and **Astro**\n- **Compatible** with any vanilla TypeScript/JavaScript/WebAssembly library, Web Components-based UI library or CSS framework allowing you to use your favorite tools without any restrictions\n- **Official 3rd-party UI framework support**: Explicit support for: **Tailwind**, **Bootstrap**, **Ionic**, **Franken UI (shadcn)**, **Material UI** and our own UI toolkits: **Windows XP Desktop UI** and **Squeezy**\n- **Batteries included:** Has a rich ecosystem of packages for UI, state management, database access, and more (see below).\n\n## ⚡ Key Features\n- **No Implicit Reactivity**: Components render once, giving you full control at runtime\n- **Tiny Bundle Size**: Core framework is \u003c ~4 KiB compressed\n- **Zero Dependencies**: Minimal external dependencies, most are optional dev dependencies or very well maintained foundation packages (like `happy-dom`, `mongodb`, `dexie`, etc.)\n- **Isomorphic**: Works in browser and Node.js (SSR)\n- **Modern Tooling**: Integrates with Vite and Astro\n- **TypeScript First**: Built with TypeScript, excellent type support to boost developer experience\n- **Security**: Strong focus on security to prevent vulnerabilities, no `innerHTML` or `innerText` usage\n\n## 📦 Package Ecosystem\n\n### Core Framework (`defuss`)\n- **Isomorphic, bi-directional, asynchronous DOM-diffing JSX Renderer**: Renders JSX to DOM and HTML/SVG back to JSX in just ~520 LoC, **no virtual DOM (VDOM)**. JSX is tuned into JSON at compile time, and rendered/hydrated at runtime. In SSR-mode, HTML is shipped to the client, and the client-side code hydrates the DOM based on the same JSON-based JSX representation, not keeping any other VDOM state in-between (partial) re-rendering. Rendering is truly atomic and asynchronous using `async` and `queueMicrotask`.\n- **Dequery**: A powerful, modern take on a jQuery-like API for DOM manipulation (because in *defuss* _YOU_ decide when, what and how to update the DOM in just 1 LoC in contrast to 100s of lines of reactvity-taming code in other frameworks that try to hide the DOM from you)\n- **Cache System**: Isomorphic storage (`localStorage`, `sessionStorage`, `memory`)\n- **i18n Support**: Internationalization utilities\n\n### Build Tool Integrations\n- **`defuss-vite`**: Vite plugin for JSX transpilation and optimization\n- **`defuss-astro`**: Astro integration with SSR support and image optimization\n\n### Database Layer (`defuss-db`)\n- **Isomorphic Database API**: Works with Dexie (IndexedDB), MongoDB, and LibSQL\n- **Simple CRUD Operations**: Unified API across different databases\n- **Client/Server Support**: Same code works in browser and Node.js\n\n### UI \u0026 Styling\n- **`defuss-ui`**: Component library with desktop, mobile, and common components\n- **`defuss-squeezy`**: CSS framework with responsive design\n- **`defuss-squeezy-reset`**: CSS reset and normalization\n- **`defuss-windy`**: Tailwind-compatible utility classes\n\n### Specialized Tools\n- **`desktop`**: Dequery extensions Shell and Window Manager for creating fully functional, themed desktop environments in-browser\n- **`dson`**: Definitely-typed Serialized Object Notation (preserves original JS types including DOM elements and binary data)\n- **`lightningimg`**: WebAssembly-based image optimization\n- **`runtime`**: Provides `lodash`-like utilities for common tasks.\n- **`transval`**: Runtime type validation with TypeScript support\n- **`rpc`**: Type-safe remote procedure calls - runs reflection on server-side classes and generates the same API for client-side calls. This allows you to transparently call server-side functions as if they were implemented on client-side.\n\n### Developer Experience\n- **`create-defuss`**: Project scaffolding tool\n- **Examples**: Multiple example projects (Astro, Vite, PWA, etc.)\n\n## 🎨 Design Principles\n- **Trust the programmer** - Don't hide functionality behind abstractions but still reduce complexity though elegant APIs\n- **Don't prevent the programmer** from doing what needs to be done\n- **Keep it small and simple** - Minimize bundle size, write concise code using smart algorithms\n- **Don't make programmers repeat themselves** - every feature should fulfill one responsibility and be reusable (like a Lego brick)\n- **Make it work, make it fast, make it beautiful** - Focus on pragmatism, performance, and elegance; \n  don't over-engineer, rabbit-hole or add unnecessary features \n\n## 🚀 What You Can Build\n\nDefuss is perfect for:\n\n* **E-commerce sites**\n* **Content management systems (CMS)**\n* **Enterprise web applications**\n* **Dashboards and admin panels**\n* **Single Page Applications (SPAs)**\n* **Server-side rendered (SSR) applications**\n* **Static sites with dynamic features**\n* **Hybrid applications (server- and client-side rendering)**\n* **Progressive Web Apps (PWAs) / mobile apps**\n* **Proof-of-Concepts (POCs) and Minimum Viable Products (MVPs)**\n* **Data visualization tools**\n* **Interactive web applications and marketing experiences**\n* **Real-time applications with WebSockets**\n* **AI-driven applications and chatbots**\n* **Portfolio websites and blogs**\n* **Custom web components and UI libraries/frameworks**\n* **WebAssembly applications**\n* **Desktop-like applications in the browser**\n* **Browser extensions**\n* **Browser-based games**\n* **Tauri/Electron native desktop apps built with Web Technologies, Node.js or Rust backends**\n\n## 💡 Why Choose Defuss?\n\nWell, `defuss` is not just another framework. It's really fun and easy to use, but for the CTO you need to convince, here are some key points:\n\n- **Simplicity**: No complex abstractions, no hidden magic, just explicit code\n- **Developer Experience**: TypeScript support, modern tooling, and a familiar API's - all designed to make development, debugging and deployment really enjoyable\n- **Code Quality and Test Coverage**: High code quality with \u003e90% test coverage overall, ensuring reliability and maintainability\n- **Learning Curve**: Familiar JSX syntax (React-like), jQuery-like DOM API\n- **Performance**: Tiny bundle size, efficient rendering (when done like in the examples, provides you a 100% score on Lighthouse using `defuss-astro`)\n- **Control**: No hidden reactivity, explicit state management\n- **Flexibility**: Works with any vanilla JavaScript/TypeScript libraries\n- **Modern**: TypeScript, ESM, modern build tools\n- **Stable**: Simple API surface that won't break\n\n## 🎯 Target Audience\nDefuss is ideal for:\n\n- Junior developers who want to learn web development without getting overwhelmed (and learn the fundamentals, not just some framework's API's)\n- Senior developers who are fed up with complexity, dependency hells and endless abstractions layers\n- Therefore, teams that prefer explicit over implicit behavior and want to maintain control over their codebase\n- Teams focussed on security - favoring minimalism and simplicity for a better security posture\n- Projects where bundle size matters\n- Developers who enjoyed the simplicity of jQuery but want modern features\n- Anyone tired of complexity in general and looking for a framework that respects their intelligence and creativity\n\n **Defuss** embodies the \"original hacker philosophy\" - encouraging developers to understand how things work, learn continuously, and build elegant solutions without unnecessary complexity.\n\n```tsx\n// we need a few imports from the library (TypeScript-only)\nimport { type Props, type Ref, $, render, createRef } from \"defuss\"\n\n// When using TypeScript, interfaces come in handy\n// They help with good error messages!\nexport interface CounterProps extends Props {\n\n  // what the button displays\n  label: string;\n}\n\n// Component functions are called once! \n// No reactivity means *zero* complexity!\nexport function Counter({ label }: CounterProps) {\n\n  // References the DOM element once it becomes visible.\n  // When it's gone, the reference is gone. Easy? Yeah.\n  const btnRef: Ref = createRef()\n\n  // A vanilla JavaScript variable. No magic here!\n  let clickCounter = 0\n\n  // A native event handler. Called when the user clicks on the button.\n  // Receives the native DOMs MouseEvent. No magic here either!\n  const updateLabel = (evt: MouseEvent) =\u003e {\n\n    // just increment the counter variable on click. Easy? Yeah.\n    clickCounter++;\n\n    console.log(\"updateLabel: Native mouse event\", evt)\n\n    // partially and atomically update the DOM with a new VDOM  \n    $(btnRef).update(\u003cem\u003e{`Count is: ${clickCounter}`}\u003c/em\u003e)\n  }\n\n  // When the code builds, this JSX is turned into a virtual DOM (JSON).\n  // At runtime, the JSON-based virtual DOM is rendered (SSR or CSR) and eventually displayed.\n  // When using the defuss Astro adapter, passing down hydration state is as simple as passing one prop.\n  return (\n    \u003cbutton type=\"button\" ref={btnRef} onClick={updateLabel}\u003e\n      {/* This label is rendered *once*. It will never change reactively! */}\n      {/* Only with *explicit* code, will the content of this \u003cbutton\u003e change. */}\n      {label}\n    \u003c/button\u003e\n  )\n}\n\n// whereever you place the Component markup, it is displayed...\nrender(\u003cCounter label=\"Don't. You. Dare. 👀\" /\u003e, document.body)\n```\n\nNo time for long introductions? Here is the best way to learn `defuss`:\n\n0. Get familiar with `defuss` [](https://stackblitz.com/github/kyr0/defuss/tree/main/examples/with-astro-ts?file=src%2Fcomponents%2FApp.tsx) *(~3min)*\n1. **Play** with `defuss`' [./examples](examples/) *(~10min)*\n2. [`create-defuss`](https://github.com/kyr0/defuss/tree/main/packages/create-defuss#-getting-started) **your own** `defuss` + `Astro` or `Vite` project  *(~20min)*\n3. Checkout all of other the examples and become a `defuss` intermediate *(~8h)*\n4. Work through the **complete codebase** in [./packages](packages/) and become a **`defuss` expert** *(~24h - 3d depending on experience)*\n5. Build your **dream product** and **have a lot of fun**!\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg src=\"https://raw.githubusercontent.com/kyr0/defuss/refs/heads/main/assets/defuss_comic.png\" width=\"400px\" /\u003e\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e\u003cb\u003eCome visit us on \u003ccode\u003edefuss\u003c/code\u003e Island!\u003c/b\u003e\u003c/i\u003e\n\u003c/p\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyr0%2Fdefuss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyr0%2Fdefuss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyr0%2Fdefuss/lists"}