{"library":"solid-js","title":"SolidJS","type":"library","description":"SolidJS is a declarative JavaScript library for building user interfaces, currently stable at version 1.9.12, with a 2.0 beta release recently announced. It distinguishes itself from other UI libraries by compiling JSX templates directly to real DOM operations and fine-grained reactive primitives, avoiding a virtual DOM. This approach typically leads to excellent performance characteristics and a smaller bundle size. Solid focuses on explicit reactivity through signals, memos, and effects, providing granular control over updates without component re-renders. The project maintains a regular release cadence, primarily focusing on quality-of-life improvements and performance optimizations within the 1.x line, while actively developing the significant architectural changes and API re-evaluations slated for the upcoming 2.0 release.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install solid-js"],"cli":null},"imports":["import { createSignal } from 'solid-js';","import { render } from 'solid-js/web';","import { For } from 'solid-js';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://solidjs.com","github":"https://github.com/solidjs/solid","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/solid-js","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { createSignal, createEffect, onCleanup } from 'solid-js';\nimport { render } from 'solid-js/web';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  createEffect(() => {\n    console.log(`Current count: ${count()}`);\n    // Example of cleanup logic for an effect\n    onCleanup(() => console.log('Cleaning up effect for count change.'));\n  });\n\n  return (\n    <div>\n      <h1>SolidJS Counter</h1>\n      <p>Count: {count()}</p>\n      <button onClick={() => setCount(c => c + 1)}>Increment</button>\n      <button onClick={() => setCount(c => c - 1)}>Decrement</button>\n    </div>\n  );\n}\n\nconst appRoot = document.getElementById('app');\nif (appRoot) {\n  render(() => <Counter />, appRoot);\n} else {\n  console.error(\"Element with id 'app' not found.\");\n}","lang":"typescript","description":"Demonstrates a basic SolidJS component using `createSignal` for state, `createEffect` for side effects, and `render` to mount the application to the DOM. It shows a simple interactive counter.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}