{"id":17842856,"url":"https://github.com/8tentaculos/rasti","last_synced_at":"2025-12-28T05:15:38.716Z","repository":{"id":38239815,"uuid":"144063684","full_name":"8tentaculos/rasti","owner":"8tentaculos","description":"Rasti is a minimalistic JavaScript library for building user interfaces.","archived":false,"fork":false,"pushed_at":"2024-09-28T21:39:57.000Z","size":1184,"stargazers_count":24,"open_issues_count":3,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-28T21:55:24.713Z","etag":null,"topics":["backbonejs","component","es6","javascript","javascript-library","lightweight","minimalistic","mvc","ui"],"latest_commit_sha":null,"homepage":"http://rasti.js.org","language":"JavaScript","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/8tentaculos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2018-08-08T20:22:02.000Z","updated_at":"2024-09-28T21:39:38.000Z","dependencies_parsed_at":"2024-03-30T02:29:55.325Z","dependency_job_id":"fb43fee7-8f00-48b6-815f-99265c9b8124","html_url":"https://github.com/8tentaculos/rasti","commit_stats":{"total_commits":111,"total_committers":2,"mean_commits":55.5,"dds":0.1351351351351351,"last_synced_commit":"b58fc63a217ad8cbb8b9cca21b230ea375b44ee7"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/8tentaculos%2Frasti","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/8tentaculos%2Frasti/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/8tentaculos%2Frasti/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/8tentaculos%2Frasti/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/8tentaculos","download_url":"https://codeload.github.com/8tentaculos/rasti/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221734430,"owners_count":16872097,"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":["backbonejs","component","es6","javascript","javascript-library","lightweight","minimalistic","mvc","ui"],"created_at":"2024-10-27T21:18:25.979Z","updated_at":"2025-12-28T05:15:38.705Z","avatar_url":"https://github.com/8tentaculos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cpicture\u003e\n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0/docs/logo-dark.svg\"\u003e\n        \u003cimg alt=\"Rasti.js\" src=\"https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v4.0.0/docs/logo.svg\" height=\"120\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cb\u003eModern MVC for building user interfaces\u003c/b\u003e\n\u003c/p\u003e\n\n**Rasti is a lightweight MVC library for building fast, reactive user interfaces.**  \nIt provides declarative, composable **components** for building state-driven UIs.  \nIts low-level MVC core, inspired by **Backbone.js**’s architecture, provides **models**, **views** and **event emitters** as the fundamental building blocks.\n\n[![Travis (.com)](https://img.shields.io/travis/com/8tentaculos/rasti)](https://app.travis-ci.com/8tentaculos/rasti)\n[![npm version](https://img.shields.io/npm/v/rasti.svg)](https://www.npmjs.com/package/rasti)\n[![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/rasti)](https://unpkg.com/rasti/dist/rasti.min.js)\n[![npm downloads](https://img.shields.io/npm/dm/rasti.svg)](https://www.npmjs.com/package/rasti)\n[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/rasti)](https://www.jsdelivr.com/package/npm/rasti)\n\n## Key Features  \n\n- **Declarative Components** 🌟  \n  Build dynamic UI components using intuitive template literals.  \n- **Event Delegation** 🎯  \n  Simplify event handling with built-in delegation.  \n- **Model-View Binding** 🔗  \n  Keep your UI and data in sync with ease.  \n- **Server-Side Rendering** 🌐  \n  Render as plain text for server-side use or static builds.  \n- **Lightweight and Fast** ⚡  \n  Minimal overhead with efficient rendering.  \n- **Legacy Compatibility** 🕰️  \n  Seamlessly integrates into existing **Backbone.js** legacy projects.  \n- **Standards-Based** 📐  \n  Built on modern web standards, no tooling required.  \n\n## Getting Started\n\n### Installing via npm\n\n```bash\n$ npm install rasti\n```\n\n```javascript\nimport { Model, Component } from 'rasti';\n```\n\n### Using ES modules via CDN\n\n```javascript\nimport { Model, Component } from 'https://esm.run/rasti';\n```\n\n### Using a UMD build via CDN\n\nInclude **Rasti** directly in your HTML using a CDN. Available UMD builds:\n\n- [https://cdn.jsdelivr.net/npm/rasti/dist/rasti.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.js)\n- [https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js](https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/rasti\"\u003e\u003c/script\u003e\n```\n\nThe UMD build exposes the `Rasti` global object:\n\n```javascript\nconst { Model, Component } = Rasti;\n```\n\n### Create a `Component`\n\n```javascript\n// Define a Timer component that displays the number of seconds from the model.\nconst Timer = Component.create`\n    \u003cdiv\u003e\n        Seconds: \u003cspan\u003e${({ model }) =\u003e model.seconds}\u003c/span\u003e\n    \u003c/div\u003e\n`;\n\n// Create a model to store the seconds.\nconst model = new Model({ seconds : 0 });\n\n// Mount the Timer component to the body and pass the model as an option.\nTimer.mount({ model }, document.body);\n\n// Increment the `seconds` property of the model every second.\n// Only the text node inside the \u003cspan\u003e gets updated on each render.\nsetInterval(() =\u003e model.seconds++, 1000);\n```\n\n[Try it on CodePen](https://codepen.io/8tentaculos/pen/gOQxaOE?editors=0010)\n\n### Adding sub components\n\n```javascript\n// Define the routes for the navigation menu.\nconst routes = [\n    { label : 'Home', href : '#' },\n    { label : 'Faq', href : '#faq' },\n    { label : 'Contact', href : '#contact' },\n];\n\n// Create a Link component for navigation items.\nconst Link = Component.create`\n    \u003ca href=\"${({ props }) =\u003e props.href}\"\u003e\n        ${({ props }) =\u003e props.renderChildren()}\n    \u003c/a\u003e\n`;\n\n// Create a Navigation component that renders Link components for each route.\nconst Navigation = Component.create`\n    \u003cnav\u003e\n        ${({ props, partial }) =\u003e props.routes.map(\n            ({ label, href }) =\u003e partial`\u003c${Link} href=\"${href}\"\u003e${label}\u003c/${Link}\u003e`\n        )}\n    \u003c/nav\u003e\n`;\n\n// Create a Main component that includes the Navigation and displays the current route's label as the title.\nconst Main = Component.create`\n    \u003cmain\u003e\n        \u003c${Navigation} routes=\"${({ props }) =\u003e props.routes}\" /\u003e\n        \u003csection\u003e\n            \u003ch1\u003e\n                ${({ model, props }) =\u003e props.routes.find(\n                    ({ href }) =\u003e href === (model.location || '#')\n                ).label}\n            \u003c/h1\u003e\n        \u003c/section\u003e\n    \u003c/main\u003e\n`;\n\n// Initialize a model to store the current location.\nconst model = new Model({ location : document.location.hash });\n\n// Update the model's location state when the browser's history changes.\nwindow.addEventListener('popstate', () =\u003e model.location = document.location.hash);\n\n// Mount the Main component to the body, passing the routes and model as options.\nMain.mount({ routes, model }, document.body);\n```\n\n[Try it on CodePen](https://codepen.io/8tentaculos/pen/dyBMNbq?editors=0010)\n\n### Adding event listeners\n\n```javascript\n// Create a model to store the counter value.\nconst model = new Model({ count : 0 });\n\n// Create a Counter component with increment and decrement buttons.\nconst Counter = Component.create`\n    \u003cdiv\u003e\n        \u003cdiv\u003eCounter: ${({ model }) =\u003e model.count}\u003c/div\u003e\n        \u003cbutton onClick=${function() { this.model.count++; }}\u003eIncrement\u003c/button\u003e\n        \u003cbutton onClick=${function() { this.model.count--; }}\u003eDecrement\u003c/button\u003e\n    \u003c/div\u003e\n`;\n\n// Mount the Counter component to the body and pass the model as an option.\nCounter.mount({ model }, document.body);\n\n// Event listeners are bound to 'this' and use delegation from the root element.\n// When buttons are clicked, only the text node gets updated, not the entire component.\n```\n\n[Try it on CodePen](https://codepen.io/8tentaculos/pen/XJXVQOR?editors=0010)\n\n## Why Choose **Rasti**?  \n\n**Rasti** is built for developers who want a simple yet powerful way to create UI components without the complexity of heavy frameworks. Whether you're building a high-performance dashboard, or embedding a lightweight widget, **Rasti** lets you:  \n\n- **Skip the Setup**  \n  No installations, no build tools—just load it and start coding.  \n- **Lightweight and Efficient**  \n  Minimal footprint with optimized performance, ensuring smooth updates.  \n- **Just the Right Abstraction**  \n  Keeps you close to the DOM with no over-engineering. Fully hackable—if you're curious about how something works, just check the source code.  \n\n## Example\n\nYou can find a sample **TODO application** in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo) of the **Rasti** [GitHub repository](https://github.com/8tentaculos/rasti). This example serves as a great starting point for your own projects. Try it live [here](https://rasti.js.org/example/todo/index.html).\n\n## API Documentation\n\nFor detailed information on how to use **Rasti**, refer to the [API documentation](/docs/api.md).\n\n## Working with LLMs\n\nFor those working with LLMs, there is an [AI Agents reference guide](/docs/AGENTS.md) that provides API patterns, lifecycle methods, and best practices, optimized for LLM context. You can share this guide with AI assistants to help them understand **Rasti**'s architecture and component APIs.\n\n## Version History\n\nWe strive to minimize breaking changes between major versions. However, if you're migrating between major versions, please refer to the release notes below for details on any breaking changes and migration tips.\n\n- **[v4.0.0](https://github.com/8tentaculos/rasti/releases/tag/v4.0.0)**\n- **[v3.0.0](https://github.com/8tentaculos/rasti/releases/tag/v3.0.0)**\n- **[v2.0.0](https://github.com/8tentaculos/rasti/releases/tag/v2.0.0)**\n- **[v1.0.0](https://github.com/8tentaculos/rasti/releases/tag/v1.0.0)**\n\n## License\n\n**Rasti** is open-source and available under the [MIT License](LICENSE).\n\n## Contributing\n\nContributions are welcome! Share feature ideas or report bugs on our [GitHub Issues page](https://github.com/8tentaculos/rasti/issues).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F8tentaculos%2Frasti","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F8tentaculos%2Frasti","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F8tentaculos%2Frasti/lists"}