All activity
![Gossamer Lucid](https://ph-avatars.imgix.net/1557226/original.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
LUCID, an open-source Chrome Developer Tool lets you:
• visualize your React component hierarchy, and state/prop changes
• log GraphQL schema, queries, and mutations in real-time
We welcome all feedback and contributions. Try it out, let us know what you think, and drop us a Github star! And Chrome WebStore stars too!
![LUCID](https://ph-files.imgix.net/0b7538ff-dc47-41d1-b094-2a31da306c1b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
LUCID
Visualize GraphQL dataflow, React components & state changes
![Gossamer Lucid](https://ph-avatars.imgix.net/1557226/original.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Gossamer Lucid
left a comment
Underlying Technology
💻React:
Lucid 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...
![LUCID](https://ph-files.imgix.net/0b7538ff-dc47-41d1-b094-2a31da306c1b.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
LUCID
Visualize GraphQL dataflow, React components & state changes