{"id":13472104,"url":"https://github.com/socketsupply/tonic","last_synced_at":"2026-04-09T17:14:37.300Z","repository":{"id":38456872,"uuid":"141166490","full_name":"socketsupply/tonic","owner":"socketsupply","description":"A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.","archived":false,"fork":false,"pushed_at":"2024-05-26T13:39:52.000Z","size":671,"stargazers_count":879,"open_issues_count":13,"forks_count":25,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-08T05:37:32.410Z","etag":null,"topics":["cba","components","framework","jam","jamstack","local-first","minimalist","offline-first","react","tonic","ui-components","user-interface","zero-dependencies","zero-dependency"],"latest_commit_sha":null,"homepage":"http://tonicframework.dev","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/socketsupply.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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-07-16T16:45:22.000Z","updated_at":"2025-05-06T21:23:21.000Z","dependencies_parsed_at":"2023-07-16T23:17:41.276Z","dependency_job_id":"a7fe050b-0a3b-4d4d-bbc5-1bfe7f00e033","html_url":"https://github.com/socketsupply/tonic","commit_stats":{"total_commits":463,"total_committers":13,"mean_commits":35.61538461538461,"dds":0.5248380129589633,"last_synced_commit":"7ef3e7282aecc9e4f7e984d9ba866c7c3cf541d2"},"previous_names":["optoolco/tonic","heapwolf/tonic","operatortc/tonic"],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Ftonic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Ftonic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Ftonic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Ftonic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/socketsupply","download_url":"https://codeload.github.com/socketsupply/tonic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436949,"owners_count":22070947,"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":["cba","components","framework","jam","jamstack","local-first","minimalist","offline-first","react","tonic","ui-components","user-interface","zero-dependencies","zero-dependency"],"created_at":"2024-07-31T16:00:51.932Z","updated_at":"2026-04-09T17:14:37.267Z","avatar_url":"https://github.com/socketsupply.png","language":"JavaScript","readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic-dark.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic.png\"\u003e\n  \u003cimg alt=\"tonic\" src=\"https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic.png\"\u003e\n\u003c/picture\u003e\n\n\u003cp align=\"center\"\u003e\n  https://tonicframework.dev\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\nTonic is a low profile component framework for the web. It's one file, less than 3kb gzipped and has no dependencies. It's designed to be used with modern Javascript and is compatible with all modern browsers and built on top of the Web Components. It was designed to be similar to React but 100x easier to reason about.\n\n## Installation\n\n```sh\nnpm install @socketsupply/tonic\n```\n\n## Usage\n\n```js\nimport Tonic from '@socketsupply/tonic'\n```\n\nYou can use functions as components. They can be async or even an async generator function.\n\n```js\nasync function MyGreeting () {\n  const data = await (await fetch('https://example.com/data')).text()\n  return this.html`\u003ch1\u003eHello, ${data}\u003c/h1\u003e`\n}\n```\n\nOr you can use classes. Every class must have a render method.\n\n```js\nclass MyGreeting extends Tonic {\n  async * render () {\n    yield this.html`\u003cdiv\u003eLoading...\u003c/div\u003e`\n\n    const data = await (await fetch('https://example.com/data')).text()\n    return this.html`\u003cdiv\u003eHello, ${data}.\u003c/div\u003e`\n  }\n}\n```\n\n```js\nTonic.add(MyGreeting, 'my-greeting')\n```\n\nAfter adding your Javascript to your HTML, you can use your component anywhere.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"my-greeting.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmy-greeting\u003e\u003c/my-greeting\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Useful links\n- [Tonic components](https://github.com/socketsupply/components)\n- [Migration from the early versions of Tonic](./MIGRATION.md)\n- [API](./API.md)\n- [Troubleshooting](./HELP.md)\n\nCopyright (c) 2023 Socket Supply Co.\n\nMIT License\n","funding_links":[],"categories":["JavaScript","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketsupply%2Ftonic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsocketsupply%2Ftonic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketsupply%2Ftonic/lists"}