{"id":14976154,"url":"https://github.com/gossamer-react/lucid","last_synced_at":"2025-04-05T20:08:43.477Z","repository":{"id":33386371,"uuid":"157490354","full_name":"Gossamer-React/Lucid","owner":"Gossamer-React","description":"A developer tool for engineers working with React and GraphQL.","archived":false,"fork":false,"pushed_at":"2023-03-04T02:58:50.000Z","size":39295,"stargazers_count":404,"open_issues_count":17,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-05T20:08:28.664Z","etag":null,"topics":["apollographql","chrome","chrome-devtools","chrome-devtools-extension","chrome-extensions","devtools","graphql","graphql-query","graphql-tools","javascript","react","react-applications","react-developers","react-devtools","react-state-management"],"latest_commit_sha":null,"homepage":"https://reactlucid.io","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/Gossamer-React.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,"governance":null}},"created_at":"2018-11-14T04:24:49.000Z","updated_at":"2024-08-22T16:37:44.000Z","dependencies_parsed_at":"2023-02-15T05:16:19.711Z","dependency_job_id":"4a405c5f-ce4a-47ed-9dfe-a4c90a19b40c","html_url":"https://github.com/Gossamer-React/Lucid","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gossamer-React%2FLucid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gossamer-React%2FLucid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gossamer-React%2FLucid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gossamer-React%2FLucid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gossamer-React","download_url":"https://codeload.github.com/Gossamer-React/Lucid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393571,"owners_count":20931813,"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":["apollographql","chrome","chrome-devtools","chrome-devtools-extension","chrome-extensions","devtools","graphql","graphql-query","graphql-tools","javascript","react","react-applications","react-developers","react-devtools","react-state-management"],"created_at":"2024-09-24T13:53:23.980Z","updated_at":"2025-04-05T20:08:40.083Z","avatar_url":"https://github.com/Gossamer-React.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"460\" height=\"150\" src=\"public/assets/lucidlogo-transparent.png?raw=true\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/demo-gif.gif\"\u003e\n\u003c/p\u003e\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Make%20development%20easier%20with%20Lucid.\u0026url=https://github.com/Gossamer-React/Lucid\u0026hashtags=react,graphql,apollographql,javascript,programming,developers,chrome)\n![AppVeyor](https://img.shields.io/badge/build-passing-green.svg)\n![AppVeyor](https://img.shields.io/badge/License-MIT-blue.svg)\n\n## **Lucid**: *a React-GraphQL developer tool*\n\nLucid is a Chrome Developer Tool designed to help engineers debug their React-GraphQL applications. \n- Visualize the component hierarchy, state/props data and state changes of your React application\n- See your GraphQL schema, queries, and mutations in real-time\n\n## Underlying Technology\n### React Tab\nLucid parses through your React app to generate an interactive tree graph representing your __React component hierarchy__, with node-specific __state and props__ data. The tree updates upon each change to the React app's state, and displays a log of __state diffs__ on the left. This is done by creating a persistent data bridge to the user's React application via the Javascript API for WebExtensions' background and content scripts. Lucid injects scripts utilizing React DevTool's Global Hook to recursively traverse through the React DOM each time setState is called, resulting in a tree and a log that each display real-time feedback. Our app itself uses React internally so as the state of your live app changes, the Lucid tree graph will also provide visual feedback of data flow and state changes through the React components immediately.\n\n### GraphQL Tab\nLucid intercepts HTTP requests using Chrome Devtool APIs to display a log of real-time __Apollo client queries and mutations__, along with associated __response__ objects. Lucid also uses GraphQL schema introspection to display __schema__ information from the server. This allows full-stack developers to debug their app from the front-end to the back-end, as requests are generated, responses are returned from the server, and data flows through React components to be rendered in the DOM. \n\n## Setup\n| Install from Chrome Extension Store  | Build your own extension |\n| ------------- | ------------- |\n| 1. Install \u003ca href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\"\u003eReact Developer Tools\u003c/a\u003e. | 1. Clone the repo and ```npm install``` |\n| 2. Install \u003ca href=\"https://chrome.google.com/webstore/detail/lucid/pnaoeldlekbfpnalhabggkcddleelamc\"\u003eLucid\u003c/a\u003e or __Build your own extension__. | 2. ```npm run build ```|\n|3. Restart Chrome Browser. |3. Navigate to chrome://extensions. |\n|4. Run your React v16+ application using GraphQL.|4. Click **Load Unpacked** and select your './react-lucid/build' folder.|\n|5. Open Chrome Developer Tools (Inspect) and click on the Lucid panel. Trigger a re-render! |\n\n**IMPORTANT:**  Lucid is in *BETA* mode and works best for React v16+ local projects in development environments. \n\n## How to Use\n### GraphQL Tab \n* In the GraphQL panel, a chronological log of API __requests__ is shown on the left. \n* A GraphQL __schema__ of all available types, queries, and mutations is also automatically fetched from the GraphQL server when Lucid is initialized and displayed on the bottom.\n* Click each request log to see its associated HTTP __response__. \n \n**NOTE:**  Lucid only listens for HTTP requests while it is open in the Chrome Developer Tool panel. To see any requests that were made upon initial page load, reload your React page after opening Lucid in your Chrome browser. \n\n![](public/demo-photo-graphql.png) \n\n### React Tab\n* In the React panel is a tree graph representing your application's __component hierarchy__. \n* Hovering over any React Component in the tree displays the __state and props data__ of that component in the top left.\n* The __State Diff__ Log tracks changes in state whenever setState() is triggered.\n* Filter out specified higher-order components from your tree graph (e.g. Redux, Apollo-GraphQL, and React Router) by clicking the buttons.\n\n![](public/demo-photo-react.png)\n\n## Contributing \n\nLucid is currently in beta release. Please let us know about bugs and suggestions at gossamer.lucid@gmail.com. Feel free to fork this repo and submit pull requests! \n\n## Coming Soon\n\n\n## Team\n\nYong-Nicholas Kim (https://github.com/yongnicholaskim)\n\nNian Liu (https://github.com/nianliu18)\n\nEterna Tsai (https://github.com/eternalee)\n\nNeyser Zana (https://github.com/neyser95)\n\n## License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgossamer-react%2Flucid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgossamer-react%2Flucid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgossamer-react%2Flucid/lists"}