{"id":14965909,"url":"https://github.com/springtype-org/springtype","last_synced_at":"2025-10-25T13:30:52.918Z","repository":{"id":34903866,"uuid":"188552598","full_name":"springtype-org/springtype","owner":"springtype-org","description":"~1k TypeScript/TSX nano-framework for the web","archived":false,"fork":false,"pushed_at":"2023-01-06T20:36:26.000Z","size":16845,"stargazers_count":20,"open_issues_count":38,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-28T07:34:33.730Z","etag":null,"topics":["development","fast","framework","functional","functional-programming","micro","performance","pwa-apps","simplicity","springtype","testable","tiny","tsx","typescript","vdom","web","websites","zero-dependency"],"latest_commit_sha":null,"homepage":"https://springtype.org","language":"TypeScript","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/springtype-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-25T10:30:38.000Z","updated_at":"2022-09-27T12:56:47.000Z","dependencies_parsed_at":"2023-01-15T10:15:33.634Z","dependency_job_id":null,"html_url":"https://github.com/springtype-org/springtype","commit_stats":null,"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fspringtype","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fspringtype/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fspringtype/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fspringtype/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springtype-org","download_url":"https://codeload.github.com/springtype-org/springtype/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237754137,"owners_count":19360654,"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":["development","fast","framework","functional","functional-programming","micro","performance","pwa-apps","simplicity","springtype","testable","tiny","tsx","typescript","vdom","web","websites","zero-dependency"],"created_at":"2024-09-24T13:35:33.188Z","updated_at":"2025-10-25T13:30:52.561Z","avatar_url":"https://github.com/springtype-org.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eSpringType\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n„Everything should be made as simple as possible, but no simpler.” - Albert Einstein\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/springtype\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/springtype.svg?style=flat-square\" alt=\"SpringType NPM version\"/\u003e\u003c/a\u003e \n  \u003ca href=\"https://lgtm.com/projects/g/springtype-org/springtype/context:javascript\"\u003e\u003cimg src=\"https://img.shields.io/lgtm/grade/javascript/g/springtype-org/springtype.svg?logo=lgtm\u0026logoWidth=18\" alt=\"LGTM Code Quality Rating\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://lgtm.com/projects/g/springtype-org/springtype/alerts\"\u003e\u003cimg src=\"https://img.shields.io/lgtm/alerts/g/springtype-org/springtype.svg?logo=lgtm\u0026logoWidth=18\" alt=\"LGTM Total alerts\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/springtype-org/springtype/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/github/license/springtype-org/springtype.svg\" alt=\"License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/springtype-org/springtype\"\u003e\u003cimg src=\"https://circleci.com/gh/springtype-org/springtype.svg?style=svg\" alt=\"Circle CI\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://gitter.im/springtype-official/springtype?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\"\u003e\u003cimg src=\"https://badges.gitter.im/springtype-official/springtype.svg\" alt=\"Gitter Chat\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eExample code\u003c/h2\u003e\n\nSpringType combines the best parts of the React API with the simplicity of jQuery:\n\n```tsx\nimport { tsx, render, Ref } from \"springtype\";\nimport { $ } from \"st-query\";\n\ninterface HelloMessageProps {\n  text: string;\n}\n\n// a functional component, just like in React\n// but it only renders one time\nconst HelloMessage = ({ text }: HelloMessageProps) =\u003e {\n\n  // reference is stored when the element is created\n  const messageRef: Ref = {};\n\n  // because there is no magic re-rendering,\n  // we can safely use setInterval() and can also\n  // safely wave goodbye to fancy hooks like useCallback() or useEffect()!\n  setInterval(() =\u003e {\n\n    // in case we want to change the rendering,\n    // we just do this programmatically, where it's needed\n    $(messageRef.current).html(\u003cp\u003eSpringType \u003c/p\u003e);\n\n  }, 1000 /* 1 sec */);\n\n  return (\n    \u003cdiv ref={messageRef}\u003e\n      Hello, {text}!\n    \u003c/div\u003e\n  )\n}\n\n// SpringType renders to document.body by default\n// but you can just provide a second argument to change this\nrender(\u003cHelloMessage text=\"World\" /\u003e);\n```\n\nFor a more complex demo, see: \n\u003ca href=\"https://github.com/springtype-org/springtype/tree/main/e2e/todo-list/src/component/TodoList.tsx\"\u003eTODO list demo\u003c/a\u003e\n\n\u003ch2 align=\"center\"\u003eFeatures\u003c/h2\u003e\n\n- ✅ React-like VDOM supporting native DOM access via `ref`\n- ✅ HTML/SVG-compatible `TSX` - supports standard `class`\n- ✅ ~1k bundle size: `1008 byte` (best, brotli) - `1319 byte` (worst, umd, gz)\n- ✅ Zero dependencies\n- ✅ Purely functional\n- ✅ First class TypeScript support\n- ✅ 100% Unit Test coverage\n- ✅ TestCafé smoke tests\n\n\u003ch2 align=\"center\"\u003ePhilosophy\u003c/h2\u003e\n\n\u003cb\u003eLess is more! Complexity is the devil!\u003c/b\u003e  SpringType does render the TSX structure only one-time.\n\nSpringType does NOT update the DOM. This takes away tons of complexity and performance headaches.\n\nAfter initial rendering, you can basically go with pure TypeScript/DOM APIs to mutate the DOM wherever and whenever it is actually needed - not when the framework *thinks* it's needed. \n\nHowever there is...\n\n- \u003ca href=\"https://github.com/springtype-org/st-query\"\u003est-query\u003c/a\u003e - a jQuery-like nano library for runtime DOM manipulation (+~`500 byte`)\n- \u003ca href=\"https://github.com/springtype-org/st-route\"\u003est-route\u003c/a\u003e - an Expess-like nano library for client-side DOM routing (+~`400 byte`)\n- \u003ca href=\"https://github.com/springtype-org/st-bus\"\u003est-bus\u003c/a\u003e - a socket.io-like nano library for application/component eventing (+~`150 byte`)\n- \u003ca href=\"https://github.com/springtype-org/st-state\"\u003est-state\u003c/a\u003e - a map-like nano library for client-side state management and persistency (+~`200 byte`)\n- \u003ca href=\"https://github.com/springtype-org/st-i18n\"\u003est-i18n\u003c/a\u003e - a i18next-like nano library for translation and string interpolation (+~`500 byte`)\n- \u003ca href=\"https://github.com/springtype-org/st-jss\"\u003est-jss\u003c/a\u003e - a JSS-like nano library for working with CSS in TS/JS (+~`600 byte`)\n\n...to make your life easier :-)\n\n\u003ch2 align=\"center\"\u003eBackers\u003c/h2\u003e\n\nThank you so much for supporting us financially! 🙏🏻😎🥳👍\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars2.githubusercontent.com/u/17221813?v=4\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/jsdevtom\"\u003eTom\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\u003ch2 align=\"center\"\u003eMaintainers\u003c/h2\u003e\n\nSpringType is brought to you by:\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars3.githubusercontent.com/u/454817?v=4\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/kyr0\"\u003eAron Homberg\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars2.githubusercontent.com/u/17221813?s=150\u0026v=4\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/jsdevtom\"\u003eTom\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars2.githubusercontent.com/u/12079044?s=150\u0026v=4\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/mansi1\"\u003eMichael Mannseicher\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\u003ch2 align=\"center\"\u003eContributing\u003c/h2\u003e\n\nPlease help out to make this project even better and see your name added to the list of our\n[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fspringtype","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringtype-org%2Fspringtype","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fspringtype/lists"}