Kusto language plugin for the Monaco Editor. It provides the following features when editing CSL, KQL files:
npm install @kusto/monaco-kusto or yarn add @kusto/monaco-kusto
/esm Contains esm version of the libraryParcel example at /samples/parcel
Configure your bundler so @kusto/monaco-kusto/release/esm/kusto.worker has it's own entry point
Configure the global MonacoEnvironment with either getWorkerUrl or getWorker. getWorker must return a dedicated kusto worker for label 'kusto' — a small entry file that imports both @kusto/monaco-kusto/release/esm/kusto.worker and monaco-editor/esm/vs/editor/editor.worker. Example:
// kustoWorker.ts (bundled as a worker entry)
import '@kusto/monaco-kusto/release/esm/kusto.worker';
import 'monaco-editor/esm/vs/editor/editor.worker';
// main.ts
import kustoWorkerUrl from './kustoWorker?url'; // or ?worker, depending on bundler
import editorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker?url';
window.MonacoEnvironment = {
getWorker(_moduleId, label) {
if (label === 'kusto') return new Worker(kustoWorkerUrl, { type: 'module' });
return new Worker(editorWorkerUrl, { type: 'module' });
},
};
Since monaco-editor 0.53, routing label 'kusto' to the generic editor.worker no longer works — the worker will crash with $loadForeignModule and completions/semantic tokens will silently fail.
You should now be able to create monaco editors with language: 'kusto'. The
kusto worker can be reached via the monaco global:
monaco.languages.kusto.getKustoWorker()
There are 2 APIs to set a Kusto schema:
setSchema - the passed schema is of type ClusterType (defined in schema.ts).
The database in ROOT.database will be the one in context.setSchemaFromShowSchema - a method to set a schema from the result of the
Kusto query .show schema as json. The result is a list of databases (see
interface Result in schema.ts), so when this method is used, it also
requires a cluster URI and the name of the database in context.The schema parsing process in Monaco-Kusto involves several components, starting from the Kusto command and ending with language features in the editor. Here is how the flow works:
Below is a diagram illustrating the schema parsing flow:

To quickly try Monaco-Kusto locally, run the following command from the package folder:
yarn start
This will start a local development server and open the demo app at http://localhost:7777.
Every PR should come with a test that checks it.
corepack enable to make the yarn package manager available (https://yarnpkg.com/getting-started/install)yarn in repo rootyarn watch from /package and a http-server will automatically open the index.htmlyarn buildyarn test from the package folder to run all unit testsyarn test:install to install test dependencies.yarn test:it to execute tests in headless mode.yarn test:it:ui to open the tests in a browser and rebuild automatically after each change.yarn test:it:serve to start the test server and rebuild automatically after each change.yarn test:it:watch to run tests in the terminal and automatically re-run them when test files change.Best practice: Before running
yarn test:itoryarn test:it:watch, first runyarn test:it:serve. These scripts (test:itandtest:it:watch) do not automatically rebuild the project, so running the server ensures your latest code is tested.
To run monaco-kusto locally inside the Azure-Kusto-WebUX project (which should exist outside this project folder with the original project name Azure-Kusto-WebUX), you can use the provided script:
./debug-monaco-kusto.sh
There are two ways to run the script:
kustoweb app inside Azure-Kusto-WebUX. This is the default behavior.debug-monaco-kusto.sh.This allows you to easily switch between running KustoWeb and Fabric for local development.
For the debug-monaco-kusto.sh script to work, ensure that your project structure resembles the following, with both monaco-kusto and Azure-Kusto-WebUX as sibling folders:
/your-workspace-root
|-- monaco-kusto
| |-- ...
| |-- debug-monaco-kusto.sh
| |-- ...
|
|-- Azure-Kusto-WebUX
`-- ...
The important part is that the Azure-Kusto-WebUX folder is a sibling to monaco-kusto, and that its node_modules folder and package.json file are at its root. The script relies on this structure to copy files and run the correct build steps.
This section provides a high-level overview of the main files and their responsibilities in the project.

monaco.contribution
Declares and exports the Kusto language as a Monaco Editor contribution, making it available for registration and use externally.
kustoMode Sets up and registers the Kusto language in Monaco Editor, wiring together language features, workers, and configuration.
workerManager Manages the lifecycle and communication with web workers that run language services in the background.
kustoWorker Implements the actual worker logic, handling requests for language features from the main thread.
kustoLanguageService
Implements the core logic for Kusto language features such as parsing, validation, and providing language intelligence (completion, diagnostics, etc.).
Uses the language-service-next library, which was originally created in C# and migrated to TypeScript using bridgejs.
languageFeatures
Contains adapters and implementations for Monaco Editor language features (completion, hover, formatting, folding, etc.) specific to Kusto.
monacoInstance
Represents the Monaco Editor instance itself. It is responsible for editor creation, configuration, and interaction with the registered Kusto language features.
@kusto/language-service 0.0.285 → 0.0.297 and @kusto/language-service-next 12.2.0 → 12.4.1, restoring missing KQL keyword-completion documentationmonaco-editor peer dependency to ^0.55.0.darkOrchid syntax highlighting color to #8229ADonSchemaUpdateComplete event emitter so consumers can react to schema refresh completionCtrl+Shift+U: Converts current selection to uppercaseCtrl+Shift+L: Converts current selection to lowercasedatetime()Shift+Enter (introduced in 13.0.1).Shift+Enter.useSemanticColorization and useTokenColorization settings.kusto-dark2 theme to kusto-darkmonaco.editor.create(document.getElementById('editor'), {
// current flags...
'semanticHighlighting.enabled': true,
});
getRangeHtml is a new public API for retrieving HTML content with syntax highlighting for clipboard data.plotly is now supported in intellisense as a render commandKustoWorker#setParameters will now apply changes immediatelyMonacoEnvironment.baseUrl
configuration when running in a different origin. Checkout our new
example
for detailsmonaco.languages.kusto.*) to esm index
file import { SomeType } from '@kusto/monaco-kusto. With this, esm
consumer no longer need to include
@kusto/monaco-kusto/release/monaco.d.ts.MonacoEnvironment.globalApi to be true@kusto/monaco-kusto/release/monaco.d.ts content to
@kusto/monaco-kusto/globalApi.d.ts. Original file now references this new
one, and will be removed in a future release.self.MonacoEnvironment to be true@kusto/monaco-kusto no exports the same api as monaco.languages.kustosetSchemaFromShowSchema now supports for external tables.globalAPI: true in window.MonacoEnvironment declaration to have monaco on the windowRenderOptions type missing null property union variantsunion * is auto-formatted into union*materialized_view("<table name>") | where mv-expand kind=array kind is shown with a squiggly error lineenableHover option to languages settingss.onDidProvideCompletionItems to languages settings as callback function for doComplete operations.getCommandsInDocumentV2 not to take new lines as command.doRangeFormat to work with all kind of user text selection.getRenderInfo in cases where there is not with clause.getRenderInfo that returns the render command visualization options in a query.setParameters that set parameters to the schema without providing the entire schema.getReferencedGlobalParams that returns the global (ambient) parameters that are actually being referenced in
the query.getQueryParams. it will return an array of all delcared query
parameters for the query on cursor.getCommandAndLocationInContext.
it will return both the text and the range of the command in context.<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>
<script src="../node_modules/kusto-language-service/kusto.javascript.client.js"></script>
monaco-editor@0.11 so that consumers of the package get a warning if their version of
monaco is too old.monaco-editor@0.11.1 to function correctly. adds support for markdown in
intellisense documentation.setSchemaFromShowSchema: a new method to set a schema from the result of .show schema as json exewcutioneditor.action.kusto.formatCurrentCommand command.getAdminCommand method to KustoWorker, which returns an object with a boolean property signifying whether
the text is an admin command, and a string property that contains the command without leading comments.getClientDirective method to KustoWorker, which returns an object with a boolean property signifying whether
the text is a client directive, and a string property that contains the directive without leading comments.TypeScript
85.3%
JavaScript
12.1%
HTML
1.9%
Kusto language plugin for the Monaco Editor. It provides the following features when editing CSL, KQL files:
npm install @kusto/monaco-kusto or yarn add @kusto/monaco-kusto
/esm Contains esm version of the libraryParcel example at /samples/parcel
Configure your bundler so @kusto/monaco-kusto/release/esm/kusto.worker has it's own entry point
Configure the global MonacoEnvironment with either getWorkerUrl or getWorker. getWorker must return a dedicated kusto worker for label 'kusto' — a small entry file that imports both @kusto/monaco-kusto/release/esm/kusto.worker and monaco-editor/esm/vs/editor/editor.worker. Example:
// kustoWorker.ts (bundled as a worker entry)
import '@kusto/monaco-kusto/release/esm/kusto.worker';
import 'monaco-editor/esm/vs/editor/editor.worker';
// main.ts
import kustoWorkerUrl from './kustoWorker?url'; // or ?worker, depending on bundler
import editorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker?url';
window.MonacoEnvironment = {
getWorker(_moduleId, label) {
if (label === 'kusto') return new Worker(kustoWorkerUrl, { type: 'module' });
return new Worker(editorWorkerUrl, { type: 'module' });
},
};
Since monaco-editor 0.53, routing label 'kusto' to the generic editor.worker no longer works — the worker will crash with $loadForeignModule and completions/semantic tokens will silently fail.
You should now be able to create monaco editors with language: 'kusto'. The
kusto worker can be reached via the monaco global:
monaco.languages.kusto.getKustoWorker()
There are 2 APIs to set a Kusto schema:
setSchema - the passed schema is of type ClusterType (defined in schema.ts).
The database in ROOT.database will be the one in context.setSchemaFromShowSchema - a method to set a schema from the result of the
Kusto query .show schema as json. The result is a list of databases (see
interface Result in schema.ts), so when this method is used, it also
requires a cluster URI and the name of the database in context.The schema parsing process in Monaco-Kusto involves several components, starting from the Kusto command and ending with language features in the editor. Here is how the flow works:
Below is a diagram illustrating the schema parsing flow:

To quickly try Monaco-Kusto locally, run the following command from the package folder:
yarn start
This will start a local development server and open the demo app at http://localhost:7777.
Every PR should come with a test that checks it.
corepack enable to make the yarn package manager available (https://yarnpkg.com/getting-started/install)yarn in repo rootyarn watch from /package and a http-server will automatically open the index.htmlyarn buildyarn test from the package folder to run all unit testsyarn test:install to install test dependencies.yarn test:it to execute tests in headless mode.yarn test:it:ui to open the tests in a browser and rebuild automatically after each change.yarn test:it:serve to start the test server and rebuild automatically after each change.yarn test:it:watch to run tests in the terminal and automatically re-run them when test files change.Best practice: Before running
yarn test:itoryarn test:it:watch, first runyarn test:it:serve. These scripts (test:itandtest:it:watch) do not automatically rebuild the project, so running the server ensures your latest code is tested.
To run monaco-kusto locally inside the Azure-Kusto-WebUX project (which should exist outside this project folder with the original project name Azure-Kusto-WebUX), you can use the provided script:
./debug-monaco-kusto.sh
There are two ways to run the script:
kustoweb app inside Azure-Kusto-WebUX. This is the default behavior.debug-monaco-kusto.sh.This allows you to easily switch between running KustoWeb and Fabric for local development.
For the debug-monaco-kusto.sh script to work, ensure that your project structure resembles the following, with both monaco-kusto and Azure-Kusto-WebUX as sibling folders:
/your-workspace-root
|-- monaco-kusto
| |-- ...
| |-- debug-monaco-kusto.sh
| |-- ...
|
|-- Azure-Kusto-WebUX
`-- ...
The important part is that the Azure-Kusto-WebUX folder is a sibling to monaco-kusto, and that its node_modules folder and package.json file are at its root. The script relies on this structure to copy files and run the correct build steps.
This section provides a high-level overview of the main files and their responsibilities in the project.

monaco.contribution
Declares and exports the Kusto language as a Monaco Editor contribution, making it available for registration and use externally.
kustoMode Sets up and registers the Kusto language in Monaco Editor, wiring together language features, workers, and configuration.
workerManager Manages the lifecycle and communication with web workers that run language services in the background.
kustoWorker Implements the actual worker logic, handling requests for language features from the main thread.
kustoLanguageService
Implements the core logic for Kusto language features such as parsing, validation, and providing language intelligence (completion, diagnostics, etc.).
Uses the language-service-next library, which was originally created in C# and migrated to TypeScript using bridgejs.
languageFeatures
Contains adapters and implementations for Monaco Editor language features (completion, hover, formatting, folding, etc.) specific to Kusto.
monacoInstance
Represents the Monaco Editor instance itself. It is responsible for editor creation, configuration, and interaction with the registered Kusto language features.
@kusto/language-service 0.0.285 → 0.0.297 and @kusto/language-service-next 12.2.0 → 12.4.1, restoring missing KQL keyword-completion documentationmonaco-editor peer dependency to ^0.55.0.darkOrchid syntax highlighting color to #8229ADonSchemaUpdateComplete event emitter so consumers can react to schema refresh completionCtrl+Shift+U: Converts current selection to uppercaseCtrl+Shift+L: Converts current selection to lowercasedatetime()Shift+Enter (introduced in 13.0.1).Shift+Enter.useSemanticColorization and useTokenColorization settings.kusto-dark2 theme to kusto-darkmonaco.editor.create(document.getElementById('editor'), {
// current flags...
'semanticHighlighting.enabled': true,
});
getRangeHtml is a new public API for retrieving HTML content with syntax highlighting for clipboard data.plotly is now supported in intellisense as a render commandKustoWorker#setParameters will now apply changes immediatelyMonacoEnvironment.baseUrl
configuration when running in a different origin. Checkout our new
example
for detailsmonaco.languages.kusto.*) to esm index
file import { SomeType } from '@kusto/monaco-kusto. With this, esm
consumer no longer need to include
@kusto/monaco-kusto/release/monaco.d.ts.MonacoEnvironment.globalApi to be true@kusto/monaco-kusto/release/monaco.d.ts content to
@kusto/monaco-kusto/globalApi.d.ts. Original file now references this new
one, and will be removed in a future release.self.MonacoEnvironment to be true@kusto/monaco-kusto no exports the same api as monaco.languages.kustosetSchemaFromShowSchema now supports for external tables.globalAPI: true in window.MonacoEnvironment declaration to have monaco on the windowRenderOptions type missing null property union variantsunion * is auto-formatted into union*materialized_view("<table name>") | where mv-expand kind=array kind is shown with a squiggly error lineenableHover option to languages settingss.onDidProvideCompletionItems to languages settings as callback function for doComplete operations.getCommandsInDocumentV2 not to take new lines as command.doRangeFormat to work with all kind of user text selection.getRenderInfo in cases where there is not with clause.getRenderInfo that returns the render command visualization options in a query.setParameters that set parameters to the schema without providing the entire schema.getReferencedGlobalParams that returns the global (ambient) parameters that are actually being referenced in
the query.getQueryParams. it will return an array of all delcared query
parameters for the query on cursor.getCommandAndLocationInContext.
it will return both the text and the range of the command in context.<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script>
<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>
<script src="../node_modules/kusto-language-service/kusto.javascript.client.js"></script>
monaco-editor@0.11 so that consumers of the package get a warning if their version of
monaco is too old.monaco-editor@0.11.1 to function correctly. adds support for markdown in
intellisense documentation.setSchemaFromShowSchema: a new method to set a schema from the result of .show schema as json exewcutioneditor.action.kusto.formatCurrentCommand command.getAdminCommand method to KustoWorker, which returns an object with a boolean property signifying whether
the text is an admin command, and a string property that contains the command without leading comments.getClientDirective method to KustoWorker, which returns an object with a boolean property signifying whether
the text is a client directive, and a string property that contains the directive without leading comments.TypeScript
85.3%
JavaScript
12.1%
HTML
1.9%