Status bar item tutorial

Status bar

Extensions can display information in the status bar adjacent to code editors. The status bar UI elements contributed by extensions are called status bar items.

Note: This feature was introduced in Sourcegraph version 3.26. Extensions should check if:

  • setStatusBarItem method on CodeEditors

are defined to prevent errors on older versions of Sourcegraph.


You'll need to create a StatusBarItemType to identify your status bar item:

const statusBarItemType =

Each editor can display one status bar item per type. If your extension needs to display multiple status bar items, create multiple StatusBarItemType.

Getting a reference to an editor

Status bar items are properties of a code editor, so you'll need a reference to a code editor:

import * as sourcegraph from 'sourcegraph'

// Check if the Sourcegraph instance supports status bar items (minimum Sourcegraph version 3.26)
const statusBarItemType = &&

export function activate(context: sourcegraph.ExtensionContext): void { => {
        // Check if the view component is a code editor and supports status bar items.
        if (viewComponent?.type === 'CodeEditor' && 'setStatusBarItem' in viewComponent) {
            viewComponent.setStatusBarItem(statusBarItemType, { text: 'my status bar item' })


Status bar items can display tooltips on hover:

editor.setStatusBarItem(statusBarItemType, { text: 'my status bar item', tooltip: 'my tooltip' })


You can run commands in response to click events. Here's how you can use the built-in open command to open Sourcegraph documentation:

editor.setStatusBarItem(statusBarItemType, { text: 'docs', command: { id: 'open', args: [''] } })

Clearing the status bar item

Hide your status bar item by setting text to a falsy value:

editor.setStatusBarItem(statusBarItemType, { text: '' })