{"id":15319163,"url":"https://github.com/zoontek/graphiql-explorer","last_synced_at":"2025-10-09T05:30:36.594Z","repository":{"id":166362184,"uuid":"641813706","full_name":"zoontek/graphiql-explorer","owner":"zoontek","description":"Explorer plugin for GraphiQL","archived":false,"fork":true,"pushed_at":"2023-10-19T12:36:38.000Z","size":492,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-27T02:34:14.645Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"OneGraph/graphiql-explorer","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoontek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-17T08:12:52.000Z","updated_at":"2023-05-17T08:35:44.000Z","dependencies_parsed_at":"2023-10-11T14:49:39.442Z","dependency_job_id":"326fb5c7-32c9-4b04-a383-42b899b13ae6","html_url":"https://github.com/zoontek/graphiql-explorer","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/zoontek/graphiql-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Fgraphiql-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Fgraphiql-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Fgraphiql-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Fgraphiql-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoontek","download_url":"https://codeload.github.com/zoontek/graphiql-explorer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Fgraphiql-explorer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000745,"owners_count":26082932,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-01T09:03:59.186Z","updated_at":"2025-10-09T05:30:36.288Z","avatar_url":"https://github.com/zoontek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Interactive explorer plugin for GraphiQL.\n\nTry it live at [https://www.onegraph.com/graphiql](https://www.onegraph.com/graphiql).\n\n[OneGraph](https://www.onegraph.com) provides easy, consistent access to the APIs that underlie your business--all through the power of GraphQL.\n\nSign up at [https://www.onegraph.com](http://www.onegraph.com).\n\n[![npm version](http://img.shields.io/npm/v/graphiql-explorer.svg?style=flat)](https://npmjs.org/package/graphiql-explorer \"View this project on npm\")\n\n\n## Example usage\n\nSee the [example repo](https://github.com/OneGraph/graphiql-explorer-example) for how to use OneGraph's GraphiQL Explorer in your own GraphiQL instance.\n\n![Preview](https://user-images.githubusercontent.com/476818/51567716-c00dfa00-1e4c-11e9-88f7-6d78b244d534.gif)\n\n[Read the rationale on the OneGraph blog](https://www.onegraph.com/blog/2019/01/24/How_OneGraph_onboards_users_new_to_GraphQL.html).\n\n\n## Customizing styles\n\nThe default styling matches for the Explorer matches the default styling for GraphiQL. If you've customized your GraphiQL styling, you can customize the Explorer's styling to match.\n\n### Customizing colors\n\nThe Explorer accepts a `colors` prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. `cm-def`, `cm-variable`, `cm-string`, etc.) use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the names of the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs).\n\nExample style map:\n\n```javascript\n\u003cExplorer colors={{\n  keyword: '#B11A04',\n  // OperationName, FragmentName\n  def: '#D2054E',\n  // FieldName\n  property: '#1F61A0',\n  // FieldAlias\n  qualifier: '#1C92A9',\n  // ArgumentName and ObjectFieldName\n  attribute: '#8B2BB9',\n  number: '#2882F9',\n  string: '#D64292',\n  // Boolean\n  builtin: '#D47509',\n  // Enum\n  string2: '#0B7FC7',\n  variable: '#397D13',\n  // Type\n  atom: '#CA9800',\n}} /\u003e\n```\n\n### Customizing arrows and checkboxes\n\nThe explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields).\n\nThe props are `arrowOpen`, `arrowClosed`, `checkboxChecked`, and `checkboxUnchecked`. You can pass any react node for those props.\n\nThe defaults are\n\narrowOpen\n```javascript\n  \u003csvg width=\"12\" height=\"9\"\u003e\n    \u003cpath fill=\"#666\" d=\"M 0 2 L 9 2 L 4.5 7.5 z\" /\u003e\n  \u003c/svg\u003e\n```\n\narrowClosed\n```javascript\n  \u003csvg width=\"12\" height=\"9\"\u003e\n    \u003cpath fill=\"#666\" d=\"M 0 0 L 0 9 L 5.5 4.5 z\" /\u003e\n  \u003c/svg\u003e\n```\n\ncheckboxChecked\n```\n  \u003csvg\n    style={{marginRight: '3px', marginLeft: '-3px'}}\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 18 18\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\u003e\n    \u003cpath\n      d=\"M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM16 16H2V2H16V16ZM14.99 6L13.58 4.58L6.99 11.17L4.41 8.6L2.99 10.01L6.99 14L14.99 6Z\"\n      fill=\"#666\"\n    /\u003e\n  \u003c/svg\u003e\n  ```\n\ncheckboxUnchecked\n```\n  \u003csvg\n    style={{marginRight: '3px', marginLeft: '-3px'}}\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 18 18\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\u003e\n    \u003cpath\n      d=\"M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z\"\n      fill=\"#CCC\"\n    /\u003e\n  \u003c/svg\u003e\n```\n\n### Customizing the buttons to create new operations\n\nYou can modify the styles for the buttons that allow you to create new operations.\n\nPass the `styles` prop when you create the component. It's an object with two keys, `explorerActionsStyle` and `buttonStyle`.\n\nExample styles map:\n```javascript\n\u003cExplorer\n  styles={{\n    buttonStyle: {\n      fontSize: '1.2em',\n      padding: '0px',\n      backgroundColor: 'white',\n      border: 'none',\n      margin: '5px 0px',\n      height: '40px',\n      width: '100%',\n      display: 'block',\n      maxWidth: 'none',\n    },\n\n    explorerActionsStyle: {\n      margin: '4px -8px -8px',\n      paddingLeft: '8px',\n      bottom: '0px',\n      width: '100%',\n      textAlign: 'center',\n      background: 'none',\n      borderTop: 'none',\n      borderBottom: 'none',\n    },\n  }}\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Fgraphiql-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoontek%2Fgraphiql-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Fgraphiql-explorer/lists"}