{"id":19251353,"url":"https://github.com/springtype-org/st-query","last_synced_at":"2026-05-18T07:04:46.449Z","repository":{"id":57369105,"uuid":"334774906","full_name":"springtype-org/st-query","owner":"springtype-org","description":"~500 byte nano DOM manipulation library that feels like jQuery","archived":false,"fork":false,"pushed_at":"2021-02-04T01:02:26.000Z","size":247,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-05T07:17:56.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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":"2021-01-31T22:57:34.000Z","updated_at":"2023-01-30T02:04:12.000Z","dependencies_parsed_at":"2022-09-15T21:31:12.253Z","dependency_job_id":null,"html_url":"https://github.com/springtype-org/st-query","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springtype-org","download_url":"https://codeload.github.com/springtype-org/st-query/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240347764,"owners_count":19787231,"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":[],"created_at":"2024-11-09T18:22:01.824Z","updated_at":"2026-05-18T07:04:41.421Z","avatar_url":"https://github.com/springtype-org.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSpringType: st-query\u003c/h1\u003e\n\n\u003e DOM manipluation API that feels like jQuery\n\n[![Gitter](https://badges.gitter.im/springtype-official/springtype.svg)](https://gitter.im/springtype-official/springtype?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n\u003ch2 align=\"center\"\u003ePurpose\u003c/h2\u003e\n\nThis is a tiny library to augment the SpringType v3 JSX/TSX microframework with a jQuery-like API for programmatic runtime DOM manipulation.\n\n\u003ch2 align=\"center\"\u003eFeatures\u003c/h2\u003e\n\n- ✅ Supports JSX/TSX for runtime DOM mutations\n- ✅ Ultra-fast: Uses SpringType `ref` instead of DOM CSS selector queries\n- ✅ Supports the most important jQuery methods\n- ✅ Tiny: `431 bytes` (best, brotli) - `605 bytes` (worst, umd, gz)\n- ✅ Zero dependencies\n- ✅ First class TypeScript support\n- ✅ Unit Test coverage almost 100%\n- ✅ TestCafé smoke tests\n\n\u003ch2 align=\"center\"\u003eAPI docs\u003c/h2\u003e\n\nThis is how using `st-query` looks like:\n\n```tsx\nimport { tsx, render, Ref } from \"springtype\";\nimport { $ } from \"st-query\";\n\ninterface SomeCustomInputProps {\n  name: string;\n}\n\nconst SomeCustomInput = ({ name }: SomeCustomInputProps) =\u003e {\n\n  const inputRef: Ref = {};\n  \n  const onBlur = () =\u003e {\n    $(inputRef.current).val(Math.random());\n    console.log('Value after blur:', $(inputRef.current).val());\n  }\n  return \u003cinput ref={inputRef} name={name} onBlur={onBlur} /\u003e\n}\nrender(\u003cSomeCustomInput name=\"firstname\" /\u003e);\n```\n\n\u003ch3 align=\"center\"\u003eDOM manipulation\u003c/h3\u003e\n\nMethod        | Examples        \n------------- |------------- \n`attr` | Get an attribute of a checkbox: `$(formInputRef).attr('tabIndex')`\n`attr` | Set an attribute of an input element: `$(formInputRef).attr('tabIndex', '2')`\n`val` | Get a value of a checkbox: `$(formInputRef).val()`\n`val` | Set the value of an input element: `$(formInputRef).val(2)`\n`html` | Render VDOM and replace the DOM *children* of an element: `$(formInputRef).html(\u003cdiv\u003eSomething else\u003c/div\u003e)`\n`replaceWith` | Render DOM and replace the DOM element *itself* with it: `$(formInputRef).replaceWith(\u003cdiv\u003eSomething else\u003c/div\u003e)`\n`empty` | Remove all children of an element: `$(formInputRef).empty()`\n`remove` | Remove the element itself from it's DOM parent node: `$(formInputRef).remove()`\n\n\u003ch3 align=\"center\"\u003eDOM events\u003c/h3\u003e\n\nMethod        | Examples        \n------------- |------------- \n`on` | Add a DOM event listener programmatically: `$(formInputRef).on('click', (evt: MouseEvent) =\u003e { console.log('clicked on', evt.target) })`\n`off` | Remove a DOM event listener programmatically: `$(window).on('resize', (evt: ResizeEvent) =\u003e { console.log('browser resized!', window.innerWidth) })`\n\n\u003ch3 align=\"center\"\u003eCSS\u003c/h3\u003e\n\nMethod        | Examples        \n------------- |------------- \n`addClass` | Add one CSS class: `$(formInputRef).addClass('outlined')`\n`addClass` | Add many CSS classes: `$(formInputRef).addClass(['button', 'mobile'])`\n`removeClass` | Remove one CSS class: `$(formInputRef).removeClass('outlined')`\n`removeClass` | Remove many CSS classes: `$(formInputRef).removeClass(['button', 'mobile'])`\n`toggleClass` | Toggles a CSS class: `$(formInputRef).toggleClass('button')`\n`hasClass` | Returns `true` if the CSS class can be found on the element: `$(formInputRef).hasClass('button')`\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\n`st-query` 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    \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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fst-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringtype-org%2Fst-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fst-query/lists"}