{"library":"ripple","title":"Ripple UI Framework","description":"Ripple is an elegant TypeScript UI framework, currently at version 0.3.19, designed to facilitate the creation of user interfaces with a strong emphasis on type safety and developer experience. It leverages TypeScript extensively, allowing developers to define components as functions returning JSX elements and manage state reactively. While a precise release cadence isn't explicitly detailed, the frequent patch updates across its comprehensive ecosystem (including a CLI, Vite, Rollup, ESLint, and Prettier plugins, plus a language server) indicate active and ongoing development. Ripple differentiates itself through its integrated, TypeScript-first approach, offering a cohesive environment for modern frontend development that covers everything from component authoring to tooling integration.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install ripple"],"cli":{"name":"ripple","version":null}},"imports":["import { createComponent } from 'ripple';","import { html } from 'ripple';","import { html } from 'ripple'; const count = html.state(0);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createComponent, html } from 'ripple';\n\nconst CounterComponent = createComponent(() => {\n  // Define reactive state using html.state\n  const count = html.state(0);\n\n  // Return JSX using the html tag function\n  return html`\n    <div>\n      <h1>Counter: ${count.value}</h1>\n      <button onclick=${() => count.value++}>\n        Increment\n      </button>\n      <button onclick=${() => count.value--}>\n        Decrement\n      </button>\n    </div>\n  `;\n});\n\n// Mount the component to an element in the DOM\n// Ensure a target element exists in your HTML, e.g., <div id=\"app\"></div>\nconst appRoot = document.getElementById('app');\nif (appRoot) {\n  CounterComponent.mount(appRoot);\n} else {\n  console.error('Target element #app not found in the DOM.');\n}\n","lang":"typescript","description":"Demonstrates defining a reactive counter component and mounting it to the DOM using Ripple's `createComponent`, `html`, and `html.state`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}