Edit

Integrate the Monaco Editor with Kusto Query Language support in your app

  • Article

You can integrate the Monaco Editor with Kusto Query Language support (monaco-kusto) into your app. Integrating monaco-kusto into your app offers you an editing experience such as completion, colorization, refactoring, renaming, and go-to-definition. It requires you to build a solution for authentication, query execution, result display, and schema exploration. It offers you full flexibility to fashion the user experience that fits your needs.

In this article, you'll learn how to add monaco-kusto to the Monaco Editor and integrate it into your app. The package is available on GitHub and on npm.

Use the following steps to integrate monaco-kusto into your app using npm.

Step 1: Install the monaco-kusto package

Step 2: Set up your app to use the monaco-kusto package

Step 3: Add your database schema to the editor

Try out the integration with our Sample project!

Prerequisites

Install the monaco-kusto package

  1. Install the Monaco Editor npm package:

    npm i monaco-editor

    Note

    To customize the native Monaco Editor, see Monaco Editor GitHub repo.

  2. Install the monaco-kusto npm package:

    npm i @kusto/monaco-kusto

Set up your app to use the monaco-kusto package

You can set up your app to use monaco-kusto using one of the following methods:

  1. Add the following HTML to pages where the Monaco Editor is used, such as your index.html file. They're required due to a dependency the package has on kusto-language-service.

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

  2. Copy the static files from the monaco and monaco-kusto packages to the monaco-editor folder on your web server. Your app will need to access these static files.

  3. Use monaco to load them. For examples, see the samples.

Add your database schema to the editor

The monaco-kusto package provides a way to add your database schema to the editor. The schema enables the editor to provide auto-complete suggestions and other features.

Use the following structure to define the schema:

const schema = {... <YOUR_DATABASE_SCHEMA> ...};

export function setSchema(editor) {
  window.monaco.languages.kusto.getKustoWorker().then((workerAccessor) => {
    const model = editor.getModel();
    workerAccessor(model.uri).then((worker) => {
      //EITHER: Set schema from a show schema command
      // worker.setSchemaFromShowSchema(
      //     schema,
      //     clusterURI,
      //     database
      // );
      //OR: Set schema from a manually created schema
      // worker.setSchema(schema);
    });
  });
}

You can get your database schema using one of the following methods:

  1. In the Azure Data Explorer web UI, on the left menu, select Query.

  2. Select the database for which you want to create a schema.

  3. In the query window, run the following query:

    .show schema as json

  4. Copy the result of the query and paste it as the schema constant. The result of the query is a list of databases (see interface Result in the schema.ts file).

  5. Use the setSchemaFromShowSchema() method to set the schema in the editor. You must also specify the cluster URI and the name of the database to use in the editor.

Sample project

You can find a sample project that uses the monaco-kusto package. To use the sample, clone the monaco-kusto GitHub repo. You'll find the sample in the samples/react folder.

Set up and test your sample project

Run the following commands from the root of the cloned repo:

  1. Install dependencies and build the project:

    npm install

  2. Verify the project is working. If successful, the index.html will open.

    npm run watch

Related content