How we built Liquid autocomplete in Tiptap
Blog post from Knock
Knock recently rebuilt its template editor, a crucial component for customers to design message templates with personalized content using Liquid, a templating language. The new editor, based on Tiptap, mimics document editors like Notion, allowing users to insert dynamic values effortlessly. A significant challenge was developing autocomplete functionality for Liquid variables, particularly within loops, which are complex because they lack a defined schema. Unlike the previous CodeMirror-based editor that parsed Liquid into a tree structure, Tiptap relies on a document model that does not inherently understand Liquid's structure. This necessitated a new approach: flattening the document into a Liquid string for parsing, which provides loop scope and variable information. This method efficiently manages autocomplete suggestions, even when documents are not fully formed, by utilizing regex scans to handle incomplete Liquid syntax. The new system successfully replicates the old editor's behavior and accommodates the typical incomplete states of documents during typing, enhancing user experience while maintaining reliability.
No tracked trend matches for this post yet.
Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.