Split Layout GraphQL Query Hero Block for React

The query is the QUERY string at the top of the file and the response is RESPONSE: write them as you would in an editor, and their lines and indentation are kept. The words in KEYWORDS are coloured as keywords. The schema explorer is the schema collection: each type has an id, a name and its fields as children; types in OPEN_TYPES start open. FILE names both the title bar and the query.

Yes. Click a type, or move to it with the arrow keys and press Enter, to show or hide its fields; the right and left arrows open and close it too, and typing a letter jumps to the next name that starts with it. Picking a field marks it but changes nothing in the query: listen to the tree's selection change to insert it in your own editor.

The hero follows your theme, but a code editor is dark by nature, so only the editor carries the dark class (marked with a comment in the code) and everything inside takes the theme's dark tokens. Remove the class and the editor follows the page's mode like the rest of the hero. The Run button is drawn in foreground tones, so the Shine Button stays the one primary action.

The editor is a figure named GraphQL editor. The schema explorer is a tree named Schema, with each type announced as expanded or collapsed. The query and the response are real text in regions named GetUser.graphql and Response, which take focus so a keyboard can scroll a long line; their line numbers are neither read out nor copied. The title bar is decoration, hidden from screen readers.

The header stacks, headline first, then the pitch and the Shine Button, which sits well inside the first screen; the editor follows. Below sm the schema explorer is hidden so the query keeps the full width, and below lg the response is hidden. A line wider than the screen scrolls inside the code rather than widening the page.

The header fades and rises in on load, the editor settles in just after it, and the query and response come in token by token once they're on screen. Types slide open in the explorer. It's all CSS, with no animation library. With reduced motion on, everything is there at once.