{"id":13515239,"url":"https://github.com/thoughtbot/superglue","last_synced_at":"2026-05-20T15:04:54.619Z","repository":{"id":40350142,"uuid":"72386994","full_name":"thoughtbot/superglue","owner":"thoughtbot","description":"A productive library for Classic Rails, React and Redux","archived":false,"fork":false,"pushed_at":"2025-03-26T00:40:04.000Z","size":3234,"stargazers_count":500,"open_issues_count":5,"forks_count":16,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-06T08:04:42.208Z","etag":null,"topics":["javascript","npm-module","rails","react-components","react-on-rails","react-rails","react-redux","reactjs","redux","redux-store","ruby","ruby-gem","ruby-on-rails","webpack"],"latest_commit_sha":null,"homepage":"https://thoughtbot.github.io/superglue/","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/thoughtbot.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"thoughtbot"}},"created_at":"2016-10-31T01:24:11.000Z","updated_at":"2025-04-04T06:15:37.000Z","dependencies_parsed_at":"2023-10-03T07:41:05.014Z","dependency_job_id":"ccd1a619-2a48-4c89-83d6-755bd0f97000","html_url":"https://github.com/thoughtbot/superglue","commit_stats":{"total_commits":844,"total_committers":15,"mean_commits":"56.266666666666666","dds":"0.34952606635071093","last_synced_commit":"30a5908995f1b23f87f6c36880889f11bacc2e66"},"previous_names":["jho406/breezy"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fsuperglue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fsuperglue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fsuperglue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fsuperglue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thoughtbot","download_url":"https://codeload.github.com/thoughtbot/superglue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248708618,"owners_count":21149028,"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":["javascript","npm-module","rails","react-components","react-on-rails","react-rails","react-redux","reactjs","redux","redux-store","ruby","ruby-gem","ruby-on-rails","webpack"],"created_at":"2024-08-01T05:01:08.179Z","updated_at":"2025-11-17T03:15:40.011Z","avatar_url":"https://github.com/thoughtbot.png","language":"JavaScript","funding_links":["https://github.com/sponsors/thoughtbot"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\" style=\"padding: 30px 0px 20px 0px;\"\u003e\n  \u003cimg src=\"https://thoughtbot.github.io/superglue/images/superglue.svg\" data-origin=\"images/superglue.svg\" alt=\"Logo\" width=250\u003e\n\u003c/div\u003e\n\n# Superglue\n\nUse classic Rails to build rich React Redux applications with **NO APIs** and\n**NO client-side routing**.\n\n[![Test superglue_js](https://github.com/thoughtbot/superglue/actions/workflows/build_js.yml/badge.svg)](https://github.com/thoughtbot/superglue/actions/workflows/build_js.yml)\n\nSuperglue makes React and Redux as productive as Hotwire, Turbo and Stimulus.\nIts inspired by Turbolinks and designed to feel like a natural extension of\nRails. Enjoy the benefits of Redux state management and React components\nwithout giving up the productivity of Rails form helpers, UJS, tag helpers,\nflash, cookie auth, and more.\n\n### No APIs\n\nInstead of APIs, Superglue leans on Rails' ability to respond to different\n[mime types](https://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to)\non the same route. In a Superglue application, if you direct your browser to\n`/dashboard.html`, you would see the HTML version of the content, and if you\nwent to `/dashboard.json` you would see the JSON version of the exact same\ncontent down to the footer.\n\nThe end result would be something like this:\n\n![No Apis](https://thoughtbot.github.io/superglue/images/no_apis.png)\n\n### Powered by Classic Rails\nSuperglue leans on Rails. Features like the flash, cookie auth, and URL\nhelpers continue to be useful. Here's a look at the directory structure of a\ntypical Rails application with Superglue.\n\n```treeview\napp/\n|-- controllers/\n|-- views/\n|   |-- dashboard/\n|   |   |-- index.jsx # The React page component\n|   |   |-- index.json.props # The json for the page component\n|   |   |-- index.html.erb\n```\n\n### PropsTemplate\nPowering the JSON responses is PropsTemplate, a diggable JSON templating DSL\ninspired by JBuilder. With PropsTemplate you can specify a path of the node you\nwant, and PropsTemplate will walk the tree to it, skipping the execution of nodes\nthat don't match the keypath.\n\n![No Apis](https://thoughtbot.github.io/superglue/images/props_template.png)\n\n### All together now!\nSuperglue comes with batteries that bring all the above concepts together to make\nbuilding popular SPA features easy, painless, and productive.\n\n#### SPA Navigation\nA popular ask of SPAs is page-to-page navigation without reloading. This is\neasily done with Superglue's own UJS attributes inspired by Turbolinks:\n\n```jsx\n  \u003ca href='/posts' data-sg-visit /\u003e\n```\n\nThe above will request for `/posts` with an `accept` of `application/json`, and\nwhen the client receives the response, swap out the current component for the\ncomponent the response asks for, and `pushState` on history.\n\n\n#### Easy Partial updates\nSome features rely on updating some parts of the existing page. Imagine\nimplementing type-ahead search. In traditional applications, you may need a new\ncontroller, routes, a discussion over versioning, JSON serializer, plenty of\nnew JS code, etc.\n\n![haircuts](https://thoughtbot.github.io/superglue/images/haircuts.png)\n\nWith Superglue, this can be done with a simple `onChange`\n\n```js\nimport {NavigationContext} from '@thoughtbot/superglue'\n\nconst {remote} = useContext(NavigationContext)\n\nconst onChange = (e) =\u003e (\n  remote(`/dashboard?qry=${e.target.value}\u0026props_at=data.header.search`)}\n)\n```\n\nWith `props_at`, the above will make a request to `/dashboard?qry=haircut`,\ndig your template for the `data.header.search` node, return it in the response,\nand immutably graft it in the exact same path on the redux store before finally\nletting React re-render.\n\nFor more on what you can do, check out our documentation.\n\n#### Server-Side Rendering\nServer-Side Rendering is supported via [Humid](https://github.com/thoughtbot/humid).\nSee the [documentation for server-side rendering][ssr docs].\n\n  [ssr docs]: ./docs/recipes/ssr.md\n\n## Documentation\n\nDocumentation is hosted on [GitHub pages](https://thoughtbot.github.io/superglue).\n\n## Contributing\n\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md).\n\nThank you, [contributors]!\n\n  [contributors]: https://github.com/thoughtbot/superglue/graphs/contributors\n\n## Special Thanks\n\nThanks to [jbuilder](https://github.com/rails/jbuilder),\n[scour](https://github.com/rstacruz/scour),\n[turbolinks3](https://github.com/turbolinks/turbolinks-classic),\n[turbograft](https://github.com/Shopify/turbograft/),\n[turbostreamer](https://github.com/malomalo/turbostreamer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Fsuperglue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthoughtbot%2Fsuperglue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Fsuperglue/lists"}