# Building a ShopifyQL Code Editor

DevFeed: [Building a ShopifyQL Code Editor](<https://devfeed.tech/articles/building-a-shopifyql-code-editor-1317.md>)

Original publisher: [Read original article](<https://shopify.engineering/building-a-shopifyql-code-editor>)

Author: Trevor Harmon

Published: 2023-09-11T14:02:54Z

Content type: tutorial

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [Shopify](<https://devfeed.tech/topics/shopify.md>), [ANTLR](<https://devfeed.tech/topics/antlr.md>), [Code](<https://devfeed.tech/topics/code.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Parser](<https://devfeed.tech/topics/parser.md>), [tokenization](<https://devfeed.tech/topics/tokenization.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Protocol (disambiguation)](<https://devfeed.tech/topics/protocol.md>), [Go](<https://devfeed.tech/topics/go.md>)

Tags: [building](<https://devfeed.tech/tags/building.md>), [code](<https://devfeed.tech/tags/code.md>), [framework](<https://devfeed.tech/tags/framework.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [tokenization](<https://devfeed.tech/tags/tokenization.md>), [tokens](<https://devfeed.tech/tags/tokens.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

This article explains how Shopify built ShopifyQL support into a CodeMirror-based web code editor for ShopifyQL Notebooks. It describes using an ANTLR grammar, a TypeScript language server that follows the Language Server Protocol, and an adapter that converts language-server responses into Lezer parse trees and token streams for editor features.

## Source excerpt

In October 2022, Shopify released ShopifyQL Notebooks, a first-party app that lets merchants analyze their shop data to make better decisions. It puts the power of ShopifyQL into merchants' hands with a guided code editing experience. In order to provide a first-class editing experience, we turned to CodeMirror, a code editor framework built for the web. Out of the box, CodeMirror didn't have support for ShopifyQL-here's how we built it.