# GraphQL grammar
**URL:** https://discuss.codemirror.net/t/graphql-grammar/2323
**Category:** Lezer
**Created:** [March 8, 2020, 4:51pm UTC](https://discuss.codemirror.net/t/graphql-grammar/2323 "2020-03-08T16:51:10Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@NetOperatorWibby](https://discuss.codemirror.net/u/NetOperatorWibby)
#### Post date: [March 8, 2020, 4:51pm UTC](https://discuss.codemirror.net/t/graphql-grammar/2323/1 "2020-03-08T16:51:10Z")
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](https://github.com/graphql/graphiql/blob/master/packages/codemirror-graphql/src/mode.js) 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._
---
### Author:  [@NetOperatorWibby](https://discuss.codemirror.net/u/NetOperatorWibby)
#### Post date: [March 8, 2020, 4:52pm UTC](https://discuss.codemirror.net/t/graphql-grammar/2323/2 "2020-03-08T16:52:14Z")
Also, if there’s a full example to enable themeing somewhere I’d love to check it out.
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 8, 2020, 6:54pm UTC](https://discuss.codemirror.net/t/graphql-grammar/2323/3 "2020-03-08T18:54:54Z")
> [@NetOperatorWibby](#):
>
> I don’t understand what I’m looking at. Can someone point me in the right direction?
I guess the first thing to look at is the [lezer guide](https://lezer.codemirror.net/docs/guide/), which tries to explain how such grammars work. A grammar like that can be combined with some glue code (see [the JavaScript version](https://github.com/codemirror/codemirror.next/blob/master/lang-javascript/src/javascript.ts)) that assigns highlighting categories and wraps the whole thing in a CM6 `LezerSyntax` extension.
---
### Author:  [@NetOperatorWibby](https://discuss.codemirror.net/u/NetOperatorWibby)
#### Post date: [April 28, 2026, 12:54am UTC](https://discuss.codemirror.net/t/graphql-grammar/2323/4 "2026-04-28T00:54:27Z")
It’s been six years but I got it working! [https://www.npmjs.com/package/@eeeooolll/graphiql](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](https://blog.webb.page/WM-090)