Embedding a Snake Game into Quill Editor Using DevUI

Introduction

DevUI is an open‑source front‑end solution for enterprise back‑office products that emphasizes immersion, flexibility, and simplicity, making it a solid choice for ToB tool development.

Motivation

Inspired by a concise canvas 300‑line snake game article, the author decided to embed the snake game directly into the Quill editor to create an interactive custom content element.

Four Integration Steps

The process follows four main steps:

Custom Toolbar Button – Define a new toolbar configuration and add a snake icon. const TOOLBAR_CONFIG = [ [{ header: ['1', '2', '3', false] }], ['bold', 'italic', 'underline', 'link'], [{ list: 'ordered' }, { list: 'bullet' }], ['clean'], ['card', 'divider', 'emoji', 'file', 'tag'], ['dragon', 'snake'], // new ]; const snakeIcon = `<svg>...</svg>`; const icons = Quill.import('ui/icons'); icons.snake = snakeIcon;

Custom Blot Content (SnakeBlot) – Implement a Blot that creates a canvas element and starts the snake game. import Quill from 'quill'; import GreedySnake from '../../shared/greedy-snake'; const BlockEmbed = Quill.import('blots/block/embed'); class SnakeBlot extends BlockEmbed { static blotName = 'snake'; static tagName = 'canvas'; static create(value) { const node = super.create(value); const { id, width, height } = value; node.setAttribute('id', id || SnakeBlot.blotName); if (width !== undefined) node.setAttribute('width', width); if (height !== undefined) node.setAttribute('height', height); new GreedySnake(node).start(); return node; } } export default SnakeBlot;

Register the Blot – Make Quill aware of the new format. import SnakeBlot from './formats/snake'; Quill.register('formats/snake', SnakeBlot);

Insert the Custom Content via API – Use the toolbar handler to embed the snake. const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: { container: TOOLBAR_CONFIG, handlers: { snake(value) { const index = this.quill.getSelection().index; this.quill.insertEmbed(index, 'snake', { id: 'canvas-snake' }); } } } } });

Result

After completing the steps, clicking the snake button in the toolbar inserts an interactive snake game canvas into the editor, providing a playful experience directly within the rich‑text content.

References

DevUI documentation, the original 300‑line snake implementation, and the Quill editor tutorial are cited for further reading.