[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3330":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":14,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":14,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":15,"starSnapshotCount":15,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},3330,"riot","riot\u002Friot","Simple and elegant component-based UI library","https:\u002F\u002Friot.js.org",null,"JavaScript",14914,955,363,3,0,1,12,73.64,"Other",false,"main",[23,24,25,26,27,28,29,30,31,32,33,34],"client-side","customelement","customelements","customtags","elegant","framework","javascript","lite","minimal","simple","view","webcomponents","2026-06-12 04:00:17","[![Riot logo](https:\u002F\u002Friot.js.org\u002Fimg\u002Flogo\u002Friot-logo.svg)](https:\u002F\u002Friot.js.org)\n\n## Simple and elegant component-based UI library\n\n[![Build Status][ci-image]][ci-url]\n[![MIT License][license-image]][license-url]\n[![Join the discord community channel][discord-image]][discord-url]\n[![Join the chat (ja) at https:\u002F\u002Friot-jp-slackin.herokuapp.com\u002F][slack-ja-image]][slack-ja-url]\n[![OpenCollective Backers][backer-badge]][backer-url] [![OpenCollective Sponsors][sponsor-badge]][sponsor-url]\n\n[![NPM version][npm-version-image]][npm-url]\n[![NPM downloads][npm-downloads-image]][npm-url]\n[![jsDelivr Hits][jsdelivr-image]][jsdelivr-url]\n[![Coverage Status][coverage-image]][coverage-url]\n![Riot Size][lib-size]\n[![Code Quality][qlty-image]][qlty-url]\n\n[![Sauce Test Status][saucelabs-image]][saucelabs-url]\n\n### Custom components • Concise syntax • Simple API • Tiny Size\n\nRiot brings custom components to all modern browsers. It is designed to offer you everything you wished the native web components API provided.\n\n#### Tag definition\n\n```html\n\u003Ctimer>\n  \u003Cp>Seconds Elapsed: { state.time }\u003C\u002Fp>\n\n  \u003Cscript>\n    export default {\n      tick() {\n        this.update({ time: ++this.state.time })\n      },\n      onBeforeMount(props) {\n        \u002F\u002F create the component initial state\n        this.state = {\n          time: props.start,\n        }\n\n        this.timer = setInterval(this.tick, 1000)\n      },\n      onUnmounted() {\n        clearInterval(this.timer)\n      },\n    }\n  \u003C\u002Fscript>\n\u003C\u002Ftimer>\n```\n\n[Open this example on Plunker](https:\u002F\u002Friot.js.org\u002Fexamples\u002Fplunker\u002F?app=timer)\n\n#### Mounting\n\n```javascript\n\u002F\u002F mount the timer with its initial props\nriot.mount('timer', { start: 0 })\n```\n\n#### Nesting\n\nCustom components let you build complex views with HTML.\n\n```html\n\u003Ctimetable>\n  \u003Ctimer start=\"0\">\u003C\u002Ftimer>\n  \u003Ctimer start=\"10\">\u003C\u002Ftimer>\n  \u003Ctimer start=\"20\">\u003C\u002Ftimer>\n\u003C\u002Ftimetable>\n```\n\nHTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.\n\n### Performant and predictable\n\n- Absolutely the smallest possible amount of DOM updates and reflows.\n- Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks.\n- One way data flow: updates and unmounts are propagated downwards from parent to children.\n- No \"magic\" or \"smart\" reactive properties or hooks\n- Expressions are pre-compiled and cached for high performance.\n- Lifecycle methods for more control.\n\n### Close to standards\n\n- No proprietary event system.\n- Future proof thanks to the javascript module syntax.\n- The rendered DOM can be freely manipulated with other tools.\n- No extra HTML root elements, `data-` attributes or fancy custom attributes.\n- No new syntax to learn.\n- Plays well with any frontend framework.\n\n### Use your dearest language and tools\n\n- Create components with CoffeeScript, Jade, LiveScript, Typescript, ES6 or [any pre-processor](https:\u002F\u002Friot.js.org\u002Fcompiler\u002F#pre-processors) you want.\n- Build with [@riotjs\u002Fcli](https:\u002F\u002Fgithub.com\u002Friot\u002Fcli), [webpack](https:\u002F\u002Fgithub.com\u002Friot\u002Fwebpack-loader), [Rollup](https:\u002F\u002Fgithub.com\u002Friot\u002Frollup-plugin-riot), [parcel](https:\u002F\u002Fgithub.com\u002Friot\u002Fparcel-plugin-riot), [Browserify](https:\u002F\u002Fgithub.com\u002Friot\u002Friotify).\n- Test however you like; you can [load your riot tags directly in node](https:\u002F\u002Fgithub.com\u002Friot\u002Fssr#render---to-render-only-markup)\n\n### Powerful and modular ecosystem\n\nThe Riot.js ecosystem is completely modular, it's designed to let you pick only the stuff you really need:\n\n- [@riotjs\u002Fcli](https:\u002F\u002Fgithub.com\u002Friot\u002Fcli) - CLI to locally compile your tags to javascript\n- [@riotjs\u002Fssr](https:\u002F\u002Fgithub.com\u002Friot\u002Fssr) - Super simple server side rendering\n- [@riotjs\u002Fhydrate](https:\u002F\u002Fgithub.com\u002Friot\u002Fhydrate) - Hydration strategy for your SPA\n- [@riotjs\u002Froute](https:\u002F\u002Fgithub.com\u002Friot\u002Froute) - Isomorphic router\n- [@riotjs\u002Flazy](https:\u002F\u002Fgithub.com\u002Friot\u002Flazy) - Lazy components loader\n- [@riotjs\u002Fhot-reload](https:\u002F\u002Fgithub.com\u002Friot\u002Fhot-reload) - Live reload plugin\n- [@riotjs\u002Fcompiler](https:\u002F\u002Fgithub.com\u002Friot\u002Fcompiler) - Advanced tags compiler\n- [@riotjs\u002Fparser](https:\u002F\u002Fgithub.com\u002Friot\u002Fparser) - HTML parser\n- [@riotjs\u002Fdom-bindings](https:\u002F\u002Fgithub.com\u002Friot\u002Fdom-bindings) - Expressions based template engine\n- [@riotjs\u002Fcustom-elements](https:\u002F\u002Fgithub.com\u002Friot\u002Fcustom-elements) - native custom elements implementation\n\n### CDN hosting\n\n- [unpkg](https:\u002F\u002Funpkg.com\u002Friot\u002Friot.js)\n- [jsDelivr](https:\u002F\u002Fwww.jsdelivr.com\u002Fprojects\u002Friot)\n- [cdnjs](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Friot)\n\n### How to contribute\n\nIf you are reading this it's already a good sign and I am thankful for it! I try my best working as much as I can on riot but your help is always appreciated.\n\nIf you want to contribute to riot helping the project maintenance please check first the list of [open issues](https:\u002F\u002Fgithub.com\u002Friot\u002Friot\u002Fissues) to understand whether there is a task where you could help.\n\nRiot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our [Makefile](Makefile). If you are on a Microsoft machine it could be harder to set up your development environment properly.\n\nFollowing the steps below you should be able to properly submit your patch to the project\n\n#### 1) Clone the repo and browse to the riot folder\n\n```shell\ngit clone git@github.com:riot\u002Friot.git && cd riot\n```\n\n#### 2) Set up your git branch\n\n```shell\ngit checkout -b feature\u002Fmy-awesome-patch\n```\n\n#### 3) Install the npm dependencies\n\n```shell\nnpm i\n```\n\n#### 4) Build and test riot using the Makefile\n\n```shell\n# To build and test riot\n$ make riot\n\n# To build without testing\n$ make raw\n```\n\n#### 5) Pull request only against the `main` branch making sure you have read [our pull request template](.github\u002FPULL_REQUEST_TEMPLATE.md)\n\n#### 6) Be patient\n\n### Credits\n\nRiot is actively maintained with :heart: by:\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd valign=\"top\">\n        \u003Cimg width=\"125\" height=\"125\" src=\"https:\u002F\u002Fgithub.com\u002FGianlucaGuarini.png?s=125?s=125\">\n        \u003Cbr>\n        \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGianlucaGuarini\">Gianluca Guarini\u003C\u002Fa>\n      \u003C\u002Ftd>\n     \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\nMany thanks to all smart people from all over the world who helped improving it.\n\n## Official Website\n\n\u003Chttps:\u002F\u002Friot.js.org>\n\n## Backers\n\nSupport us with a monthly donation and help us continue our activities. [Become a backer][support-url]\n\n[![Backers][backers-image]][support-url]\n\n## Sponsors\n\nBecome a sponsor to get your logo on our README. [Become a sponsor][support-url]\n\n[![Sponsors][sponsors-image]][support-url]\n\n## Thanks\n\nSpecial thanks to Browserstack for their support\n\n\u003Ctable cellpadding=\"8\">\n    \u003Ctr>\n        \u003Ctd>\n          \u003Ca href='https:\u002F\u002Fwww.browserstack.com\u002F?from=riotjs'>\n            \u003Cimg width='70px' src=\"https:\u002F\u002Fcdn.worldvectorlogo.com\u002Flogos\u002Fbrowserstack.svg\" alt=\"browser stack\">\n          \u003C\u002Fa>\n        \u003C\u002Ftd>\n    \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n[ci-image]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Friot\u002Friot\u002Ftest.yml?style=flat-square\n[ci-url]: https:\u002F\u002Fgithub.com\u002Friot\u002Friot\u002Factions\n[license-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-000000.svg?style=flat-square\n[license-url]: LICENSE.txt\n[npm-version-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Friot.svg?style=flat-square\n[npm-downloads-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Friot.svg?style=flat-square\n[npm-url]: https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Friot\n[saucelabs-image]: https:\u002F\u002Fsaucelabs.com\u002Fbrowser-matrix\u002Ftestsriotjs.svg?1\n[saucelabs-url]: https:\u002F\u002Fsaucelabs.com\u002Fu\u002Ftestsriotjs\n[coverage-image]: https:\u002F\u002Fqlty.sh\u002Fgh\u002Friot\u002Fprojects\u002Friot\u002Fcoverage.svg\n[coverage-url]: https:\u002F\u002Fqlty.sh\u002Fgh\u002Friot\u002Fprojects\u002Friot\n[discord-url]: https:\u002F\u002Fdiscord.gg\u002FPagXe5Y\n[discord-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDISCORD-JOIN_CHANNEL_%E2%86%92-7289da.svg?style=flat-square\n[slack-ja-image]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSLACK_(ja)-JOIN_CHAT_%E2%86%92-551a8b.svg?style=flat-square\n[slack-ja-url]: https:\u002F\u002Friot-jp-slackin.herokuapp.com\u002F\n[qlty-image]: https:\u002F\u002Fqlty.sh\u002Fgh\u002Friot\u002Fprojects\u002Friot\u002Fmaintainability.svg\n[qlty-url]: https:\u002F\u002Fqlty.sh\u002Fgh\u002Friot\u002Fprojects\u002Friot\n[jsdelivr-image]: https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002Friot\u002Fbadge\n[jsdelivr-url]: https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Friot\n[backer-url]: #backers\n[backer-badge]: https:\u002F\u002Fopencollective.com\u002Friot\u002Fbackers\u002Fbadge.svg?color=blue\n[sponsor-url]: #sponsors\n[sponsor-badge]: https:\u002F\u002Fopencollective.com\u002Friot\u002Fsponsors\u002Fbadge.svg?color=blue\n[support-url]: https:\u002F\u002Fopencollective.com\u002Friot#support\n[lib-size]: https:\u002F\u002Fimg.badgesize.io\u002Fhttps:\u002F\u002Funpkg.com\u002Friot\u002Friot.min.js?compression=gzip\n[backers-image]: https:\u002F\u002Fopencollective.com\u002Friot\u002Fbackers.svg\n[sponsors-image]: https:\u002F\u002Fopencollective.com\u002Friot\u002Fsponsors.svg\n","Riot.js 是一个基于组件的简洁优雅的UI库。它提供了自定义组件、精简语法和简单API等核心功能，同时保持了极小的体积。Riot.js 的设计目标是为现代浏览器提供原生Web组件API所期望的一切特性。其特点包括高性能且可预测的数据流处理、最小化的DOM更新与回流以及对标准技术的高度兼容性。适合用于构建需要高度定制化但又希望保持代码简洁性的Web应用界面，特别是在那些追求轻量级解决方案的场景下。此外，Riot.js 支持多种前端开发语言及工具，使得开发者可以根据个人喜好选择最合适的编程方式。",2,"2026-06-11 02:53:35","top_language"]