# How SQL Formatting and Syntax Highlighting Work in Chat2DB

> Discover how Chat2DB enhances SQL readability with formatting and syntax highlighting using Monaco Editor and custom keyword definitions. Improve your database interactions now.

- Repository: [OtterMind/Chat2DB](https://github.com/OtterMind/Chat2DB)
- Tags: internals
- Published: 2026-07-28

---

**Chat2DB delivers SQL formatting and syntax highlighting by integrating Monaco Editor’s language service APIs with dialect-specific keyword definitions, registering document formatters in [`registerSQLFormat.ts`](https://github.com/OtterMind/Chat2DB/blob/main/registerSQLFormat.ts) and preparing Monarch token providers for multi-database support.**

Chat2DB is an open-source database management tool that provides a VS Code-like editing experience for SQL queries. Understanding **SQL formatting and syntax highlighting in Chat2DB** requires examining how the application initializes Monaco Editor and wires up language-specific providers for formatting rules and token-based coloring. The implementation bridges core editor initialization with database-specific keyword definitions to support multiple SQL dialects.

## Monaco Editor Foundation

Chat2DB embeds **Monaco Editor**—the same component that powers Visual Studio Code—to handle SQL editing capabilities. The initialization sequence in [`src/components/SQLEditor/core/initializeEditor.ts`](https://github.com/OtterMind/Chat2DB/blob/main/src/components/SQLEditor/core/initializeEditor.ts) bootstraps the editor instance and attaches language providers including formatters and potential tokenizers.

The bootstrap process creates the editor with SQL language mode enabled, then immediately invokes `registerSQLFormat()` to attach the document formatter. A commented-out call to `registerSQLSyntax()` demonstrates the extension point for custom syntax highlighting providers.

## SQL Formatting Implementation

### Document-Level Formatting Provider

The formatting logic resides in [`src/components/SQLEditor/core/registerSQLFormat.ts`](https://github.com/OtterMind/Chat2DB/blob/main/src/components/SQLEditor/core/registerSQLFormat.ts). This module registers a **document formatting edit provider** with Monaco's language registry via `monaco.languages.registerDocumentFormattingEditProvider('sql', ...)`.

When a user triggers format actions, Monaco invokes the provider’s `provideDocumentFormattingEdits` method, which receives the document model and returns an array of text edits. Each edit specifies:
- **range**: The span of text to replace (currently the full document via `model.getFullModelRange()`)
- **text**: The replacement string containing formatted SQL

### Current Placeholder Logic

As implemented in the OtterMind/Chat2DB repository, the formatter currently serves as a stub awaiting full implementation. The `provideDocumentFormattingEdits` callback returns a single edit that prepends a placeholder comment to the original source:

```typescript
// src/components/SQLEditor/core/registerSQLFormat.ts
import * as monaco from 'monaco-editor';

const registerSQLFormat = () => {
  monaco.languages.registerDocumentFormattingEditProvider('sql', {
    provideDocumentFormattingEdits: (model) => {
      // TODO: replace with a real SQL formatter
      return [
        {
          range: model.getFullModelRange(),
          text: '// Formatted code\n' + model.getValue(),
        },
      ];
    },
  });
};

export { registerSQLFormat };

```

This integration point allows production deployments to substitute **sql-formatter**, **SQLFluff**, or a custom AST-based formatter to canonicalize SQL layout before execution.

## Syntax Highlighting Architecture

### Dialect-Specific Keyword Definitions

Chat2DB prepares for multi-database support by maintaining dialect-specific keyword arrays under `src/components/SQLEditor/helper/keywords/`. Files including [`mysql.ts`](https://github.com/OtterMind/Chat2DB/blob/main/mysql.ts), [`pg.ts`](https://github.com/OtterMind/Chat2DB/blob/main/pg.ts), [`oracle.ts`](https://github.com/OtterMind/Chat2DB/blob/main/oracle.ts), and [`sqlServer.ts`](https://github.com/OtterMind/Chat2DB/blob/main/sqlServer.ts) export constant arrays containing reserved words and built-in functions for each database system.

For example, the MySQL keyword definitions declare:

```typescript
// src/components/SQLEditor/helper/keywords/mysql.ts
export const MYSQL_KEYWORDS = [
  'SELECT', 'INSERT', 'UPDATE', 'DELETE', 'FROM', 'WHERE',
  'JOIN', 'INNER', 'LEFT', 'RIGHT', 'ON', 'GROUP', 'BY',
  // …additional MySQL-specific tokens
];

```

These arrays feed into the tokenization system to provide **dialect-aware syntax highlighting** beyond Monaco’s default SQL support.

### Monarch Token Provider Integration

While Monaco ships with built-in SQL tokenization, Chat2DB’s architecture supports custom **Monarch** token definitions through `registerSQLSyntax()` (currently commented out in [`initializeEditor.ts`](https://github.com/OtterMind/Chat2DB/blob/main/initializeEditor.ts)). When enabled, `monaco.languages.setMonarchTokensProvider('sql', ...)` consumes the dialect keyword arrays to map tokens to specific theme colors and scopes.

The initialization flow in [`initializeEditor.ts`](https://github.com/OtterMind/Chat2DB/blob/main/initializeEditor.ts) illustrates this extension point:

```typescript
// src/components/SQLEditor/core/initializeEditor.ts
import * as monaco from 'monaco-editor';
import { registerSQLFormat } from './registerSQLFormat';
// import { registerSQLSyntax } from './registerSQLSyntax'; // future token provider

export const initializeEditor = (container: HTMLDivElement) => {
  const editor = monaco.editor.create(container, {
    language: 'sql',
    theme: 'vs-dark',
  });

  // Register the formatter (always active)
  registerSQLFormat();

  // Register the syntax provider (currently a placeholder)
  // registerSQLSyntax();

  return editor;
};

```

## Editor Initialization Flow

The complete bootstrap sequence follows this execution pattern:

1. **Create Editor Instance**: Initialize Monaco with `language: 'sql'` and theme configuration (typically `vs-dark`)
2. **Register Formatter**: Execute `registerSQLFormat()` to attach the document-level formatting provider
3. **(Optional) Load Syntax Provider**: Execute `registerSQLSyntax()` to load dialect-specific Monarch definitions when custom tokenization is required

This separation of concerns allows formatting logic to operate independently of syntax highlighting while maintaining both extension points in the `core/` directory.

## Summary

- Chat2DB uses **Monaco Editor** as its SQL editing engine to provide VS Code-like functionality
- **SQL formatting** works through [`registerSQLFormat.ts`](https://github.com/OtterMind/Chat2DB/blob/main/registerSQLFormat.ts), which implements Monaco's `DocumentFormattingEditProvider` interface to return text edits covering the full document range
- The current formatter implementation is a placeholder that prepends `// Formatted code` to demonstrate the integration structure
- **Syntax highlighting** preparation includes dialect-specific keyword files for MySQL, PostgreSQL, Oracle, and SQL Server under `src/components/SQLEditor/helper/keywords/`
- The `registerSQLSyntax()` function provides the hook for custom Monarch token providers, though it remains commented out in favor of Monaco’s built-in SQL tokenizer
- Production deployments can replace the stub formatter with libraries like **sql-formatter** or **SQLFluff** by modifying the `provideDocumentFormattingEdits` callback

## Frequently Asked Questions

### What editor component does Chat2DB use for SQL editing?

Chat2DB embeds the **Monaco Editor**, the same open-source code editor that powers Visual Studio Code. The initialization logic in [`initializeEditor.ts`](https://github.com/OtterMind/Chat2DB/blob/main/initializeEditor.ts) creates the editor instance with explicit SQL language support and theming configuration.

### Where is the SQL formatter implemented in Chat2DB?

The formatter registration lives in [`src/components/SQLEditor/core/registerSQLFormat.ts`](https://github.com/OtterMind/Chat2DB/blob/main/src/components/SQLEditor/core/registerSQLFormat.ts). This file exports `registerSQLFormat()`, which calls `monaco.languages.registerDocumentFormattingEditProvider()` to attach a formatting handler that returns text edits for the entire document range via `model.getFullModelRange()`.

### Can Chat2DB format SQL for different database dialects?

The current implementation provides a single SQL language mode with a placeholder formatter. However, the codebase includes dialect-specific keyword definitions under `src/components/SQLEditor/helper/keywords/` (such as [`mysql.ts`](https://github.com/OtterMind/Chat2DB/blob/main/mysql.ts) and [`pg.ts`](https://github.com/OtterMind/Chat2DB/blob/main/pg.ts)), indicating the architecture supports future dialect-specific formatting and tokenization extensions.

### Why is the syntax highlighting provider commented out?

The `registerSQLSyntax()` import and call are commented out in [`initializeEditor.ts`](https://github.com/OtterMind/Chat2DB/blob/main/initializeEditor.ts) because Monaco Editor already provides built-in SQL tokenization sufficient for basic editing. The commented code represents an extension point for **custom Monarch token providers** that would apply dialect-specific coloring using the keyword arrays defined in the helper files.