{"id":13727092,"url":"https://github.com/wundergraph/hopper","last_synced_at":"2025-10-27T17:30:29.568Z","repository":{"id":55839337,"uuid":"320266488","full_name":"wundergraph/hopper","owner":"wundergraph","description":"Modern GraphQL IDE, similar to GraphiQL and GraphQL Playground. Based on Monaco Editor (vscode).","archived":false,"fork":false,"pushed_at":"2020-12-11T15:45:25.000Z","size":320,"stargazers_count":67,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-09-28T21:22:28.595Z","etag":null,"topics":["graphiql","graphiql-editor","graphql","graphql-api","graphql-client","graphql-ide","graphql-playground","monaco-editor"],"latest_commit_sha":null,"homepage":"https://hopper.wundergraph.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wundergraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-10T12:31:36.000Z","updated_at":"2024-04-15T16:36:26.000Z","dependencies_parsed_at":"2022-08-15T07:40:47.819Z","dependency_job_id":null,"html_url":"https://github.com/wundergraph/hopper","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/wundergraph%2Fhopper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fhopper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fhopper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fhopper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wundergraph","download_url":"https://codeload.github.com/wundergraph/hopper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860932,"owners_count":16556009,"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":["graphiql","graphiql-editor","graphql","graphql-api","graphql-client","graphql-ide","graphql-playground","monaco-editor"],"created_at":"2024-08-03T01:03:39.172Z","updated_at":"2025-10-27T17:30:24.224Z","avatar_url":"https://github.com/wundergraph.png","language":"TypeScript","readme":"# WunderGraph Hopper - Open Source GraphQL IDE\n\n## Live Demo\n\nhttps://hopper.wundergraph.com/\n\n## Why WunderGraph Hopper?\n\nGraphiQL always felt a bit dated. GraphQL Playground is not maintained anymore. Both GraphiQL \u0026 Playground are not based on Monaco Editor (vscode).\n\nApollo started their efforts to build a GraphQL IDE on top of Monaco Editor. Unfortunately, their IDE is closed source. This makes it impossible for us to embed it into our own product.\n\nWe believe that an Open Source Monaco-based GraphQL IDE will help drive adoption and strengthen the ecosystem.\n\n## Roadmap\n- [x] Autocompletion\n- [x] Introspection\n- [x] Variables\n- [ ] Headers\n- [ ] GraphQL Schema Viewer\n- [ ] Visual Schema Explorer\n- [ ] Visual Query Builder\n\n## What is WunderGraph?\n\nWith WunderGraph, you use GraphQL during development and REST in production without even noticing.\n\nThe developer experience of GraphQL combined with the performance \u0026 cacheability of REST.\n\nWe support GraphQL, GraphQL Federation, GraphQL Schema Stitching \u0026 REST as upstreams, OIDC for Authentication and give you HTTP spec compliant Caching by default.\n\nWe're planning to support SOAP, ODATA \u0026 gRPC as upstreams.\n\nOur hyperfast GraphQL Engine uses Compiled Queries. Early tests suggest that we're ~30-150x faster than the Apollo Federation Gateway. Our Engine supports @defer, @stream and Subscriptions for an optimal user experience.\n\nBut performance is not everything. Compiling Queries in production also eliminates a lot of threats like traversal attacks or DOS by using complex Queries, making your GraphQL journey even more secure.\n\nWunderGraph lets you worry about fewer things, so you can focus on building valuable features.\n\nCheck out more at: https://wundergraph.com\n\n## Built with\n\n- Monaco Editor (vscode)\n- graphql.js\n- Tailwind CSS\n\n## Features\n\n- Persisted Variables per Operation. Each Operation has its own Variables. Switching between Operations will always persist the Variables.\n- Variable Extraction\n- Works well without using a Mouse thanks to a rich set of Shortcuts\n\n## Shortcuts\n\n- CMD+Enter - Run currently selected Operation\n- CMD+X - Extracts Variables at cursor position\n- CTRL+Shift+F - Format Document\n- OPTION+TAB - Switch between Operations and Variables  \n\n# Extensibility\n\nStyling implemented using Tailwind CSS which makes it very easy for you to customize styles.\n\nAlthough our \"Wrapper\" around Monaco Editor is implemented using React, we built the core component, the controller, in Vanilla JS.\nThis makes it very easy to port WunderGraph Hopper to Vue, Angular or use it with Vanilla JS.\n\n# Contributing\n\nWe're happy for every contribution. Please first open an issue, so we can have a discussion before you implement something we don't want to merge.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fhopper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwundergraph%2Fhopper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fhopper/lists"}