landing — interactive editor #2113
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Render MiniGraphiQL with `graphiql` string in node.meta * Don't validate in Marked: not its responsibility * Change interactive code snippet colors * Remove global .miniGraphiQL class * Refactor MiniGraphiQL to separate files * Add a TODO comment * Run Playwright on CI * wip * color codemirrors properly * Style codemirrors properly * Upgrade pnpm from 9.15.9 to 10.15.0 * Update 2025 conference schedule and speaker details * Improve syntax highlighting for comments and diffs * Remove focus outline * Extract CodeBlockLabel * Remove unused marked dependency * Rename `marked` to `interactive-code-block` * Update codemirror styles * Allow running esbuild builds * Remove duplicate image * Format * Change syntax theme names to avoid a bug * Fix heights and properly chain handlers * Fix tests for new editor * Run Playwright on CI * Use the same colors for VariableEditor * Use the same font for interactive code blocks * Match the coloring on t.separator [,:] between Lezer and Shiki
|
@hasparus is attempting to deploy a commit to the The GraphQL Foundation Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
martinbonnin
approved these changes
Sep 6, 2025
@martinbonnin What do you think about adding something like this info message instead? 
|
|
It wouldn't be hover, right? It'd be something else? I kind of liked that the comment was where the user would look and therefore impossible to miss but no strong opinion at this stage. |
|
I'm changing the PR to a draft because we noticed a schema discrepancy and I need to write a small script first. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
@martinbonnin proposed making the "How it Works" code samples interactive on Slack.
We already had CodeMirror, and I already needed to restyle it for the docs, so it required just a new schema, some refactoring and shuffling things around.
I think the idea makes sense, and lets the user experience GraphQL immediately. Even if they're non-programmers, they can maybe get a feel how the data flows and what the experience is like.
I changed the section CTA to state "Try GraphiQL", because we're already trying it out live.
To-do
dynamic(importinstead ofdynamic(() => importinitially so it's good I double checked).