GraphQL grammar

Hi there!

I am currently working on a GraphiQL alternative that trades React for Svelte and also uses CodeMirror 6. The variables and results panes are rendering just fine but the query pane needs a bit more work, mainly because the codemirror-graphql module depends on defineMode and other functionality only present in the stable version.

I’ve looked at the current lezer examples and quite honestly, I don’t understand what I’m looking at. Can someone point me in the right direction?

Here’s what I’ve built so far. Please ignore the terrible contrast in the UI.

Also, if there’s a full example to enable themeing somewhere I’d love to check it out.

I guess the first thing to look at is the lezer guide, which tries to explain how such grammars work. A grammar like that can be combined with some glue code (see the JavaScript version) that assigns highlighting categories and wraps the whole thing in a CM6 LezerSyntax extension.

It’s been six years but I got it working! https://www.npmjs.com/package/@eeeooolll/graphiql

And even got a block cursor in it. Detailed in my blog post: the webb blog • the beauty of creating your own tools