{"id":13515,"library":"maverick.js","title":"Maverick.js UI Framework & Signals","description":"Maverick.js is a collection of JavaScript/TypeScript libraries designed for building fast, type-safe, and highly reactive UI component libraries and web applications. Its core is the `@maverick-js/signals` package, a lightweight (~1KB minzipped) and extremely performant reactivity system inspired by SolidJS and Svelte. This signals library provides primitives like `signal`, `computed`, and `effect` for fine-grained, lazy, and batched updates, working seamlessly across browsers and Node.js. The ecosystem also includes `@maverick-js/elemental` for creating reactive Web Components with JSX and Server-Side Rendering (SSR) support, and `@maverick-js/maverick` as the main UI component library which leverages these foundations. The project is actively developed, with version 0.43.2 being the current stable release, demonstrating frequent patch and minor updates. Its key differentiators include minimal bundle size, strong TypeScript support, and a focus on web standards while providing a highly efficient reactive programming model.","status":"active","version":"0.43.2","language":"javascript","source_language":"en","source_url":"https://github.com/maverick-js/maverick","tags":["javascript","typescript"],"install":[{"cmd":"npm install maverick.js","lang":"bash","label":"npm"},{"cmd":"yarn add maverick.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add maverick.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `signal` primitive is the cornerstone of reactivity, creating an observable value. ESM-only for modern usage.","wrong":"const signal = require('@maverick-js/signals').signal;","symbol":"signal","correct":"import { signal } from '@maverick-js/signals';"},{"note":"Used to create derived reactive values that only re-evaluate when their dependencies change. Prefer named imports.","wrong":"import * as Maverick from '@maverick-js/signals'; const myComputed = Maverick.computed(...);","symbol":"computed","correct":"import { computed } from '@maverick-js/signals';"},{"note":"`effect` runs side effects reactively. `onDispose` is used for cleanup in reactive scopes.","wrong":"import { Effect } from '@maverick-js/signals';","symbol":"effect","correct":"import { effect, onDispose } from '@maverick-js/signals';"}],"quickstart":{"code":"import { signal, effect, onDispose } from '@maverick-js/signals';\n\n// A basic custom element definition using the reactive core\nclass MyReactiveCounter extends HTMLElement {\n  private count = signal(0);\n  private disposeEffect: Function | undefined;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot!.innerHTML = `\n      <style>\n        :host { display: block; padding: 10px; border: 1px solid #ccc; }\n        button { padding: 8px 12px; cursor: pointer; }\n        span { margin-left: 10px; font-weight: bold; }\n      </style>\n      <button>Increment</button>\n      <span>Count: 0</span>\n    `;\n\n    const button = this.shadowRoot!.querySelector('button');\n    const span = this.shadowRoot!.querySelector('span');\n\n    button?.addEventListener('click', () => {\n      this.count.set(this.count() + 1);\n    });\n\n    // Establish a reactive effect to update the DOM\n    this.disposeEffect = effect(() => {\n      if (span) {\n        span.textContent = `Count: ${this.count()}`;\n      }\n    });\n  }\n\n  connectedCallback() {\n    // Re-establish effects if the element is re-connected, though often not needed for simple cases\n    // The effect in constructor runs immediately and will be alive as long as instance is alive.\n  }\n\n  disconnectedCallback() {\n    // Clean up the reactive effect when the element is removed from the DOM\n    if (this.disposeEffect) {\n      this.disposeEffect();\n    }\n  }\n}\n\ncustomElements.define('my-reactive-counter', MyReactiveCounter);\n\n// To use this in an HTML file:\n// <my-reactive-counter></my-reactive-counter>","lang":"typescript","description":"Demonstrates creating a reactive Web Component using `@maverick-js/signals` to manage and display an incrementing counter, including proper lifecycle cleanup."},"warnings":[{"fix":"Access and update signal values via `signal()` for reading and `signal.set(newValue)` or `signal.update(prev => ...)` for writing.","message":"When working with signals, directly assigning a new value to the signal function (e.g., `mySignal = 10;`) will break reactivity. Always use the `.set()` method (e.g., `mySignal.set(10);`) or `.update()` for derived values.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For synchronous updates, `import { tick } from '@maverick-js/signals'; tick();`. Otherwise, rely on the default microtask scheduling.","message":"Effects in `@maverick-js/signals` are batched by default and run on the microtask queue. If you need to force an immediate re-evaluation (e.g., for testing or specific timing-critical updates), you can call the `tick()` function.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always use `@maverick-js/signals`, `@maverick-js/elemental`, or `@maverick-js/maverick` for imports and documentation. Double-check npm package names.","message":"The `maverick.js` project has a similar name to an older, unrelated Java MVC framework and a historical JavaScript MVC framework. Ensure you are referencing the `@maverick-js` scoped npm packages for the modern UI framework.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"search_vec":"'/elemental':82 '/maverick':101 '/signals':35 '0.43.2':119 '1kb':39 'across':71 'activ':115 'also':77 'applic':27 'batch':67 'browser':72 'build':14 'bundl':136 'collect':8 'compon':23,87,106 'comput':58 'core':29 'creat':84 'current':122 'demonstr':125 'design':12 'develop':116 'differenti':133 'ecosystem':76 'effect':60 'effici':151 'extrem':42 'fast':15 'fine':63 'fine-grain':62 'focus':143 'foundat':111 'framework':3 'frequent':126 'grain':64 'high':20,150 'includ':78,134 'inspir':46 'javascript':155 'javascript/typescript':10 'js':34,81,100 'jsx':89 'key':132 'lazi':65 'leverag':109 'librari':11,24,53,107 'lightweight':38 'like':56 'main':104 'maverick':33,80,99 'maverick-j':32,79,98 'maverick.js':1,5 'minim':135 'minor':129 'minzip':40 'model':154 'node.js':74 'packag':36 'patch':127 'perform':43 'primit':55 'program':153 'project':113 'provid':54,148 'reactiv':21,44,85,152 'releas':124 'render':94 'safe':18 'seamless':70 'server':92 'server-sid':91 'side':93 'signal':4,52,57 'size':137 'solidj':48 'ssr':95 'stabl':123 'standard':146 'strong':138 'support':96,140 'svelt':50 'system':45 'type':17 'type-saf':16 'typescript':139,156 'ui':2,22,105 'updat':68,130 'version':118 'web':26,86,145 'work':69","created_at":"2026-04-20T01:54:53.784119+00:00","updated_at":"2026-04-20T01:54:53.784119+00:00","problems":[{"fix":"Verify that the variable `signal` is correctly imported and instantiated with `const mySignal = signal(initialValue);` and is accessible in the current scope.","cause":"Attempting to call `.set()` on a non-signal variable or a signal that hasn't been properly initialized or is out of scope.","error":"TypeError: Cannot read properties of undefined (reading 'set')"},{"fix":"Ensure your `tsconfig.json` has `\"jsx\": \"react-jsx\"` or `\"jsxFactory\": \"h\"` and that your bundler/compiler is set up to transpile JSX using the appropriate factory function for Maverick.js/Elemental.","cause":"When using JSX with `@maverick-js/elemental` or similar, the JSX factory function (`h` or `createElement`) is not correctly configured in your build setup (e.g., TypeScript `tsconfig.json` or Babel/Vite configuration).","error":"ReferenceError: h is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://maverick-js.com","github":"https://github.com/maverick-js/maverick","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/maverick.js","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}