# ANTLR

ANTLR is a parser generator that processes structured text or binary files and generates parsers from grammars.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## 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.