Skip to main content

Getting Started

Build extensions for SrcNexus Code Editor to add commands, themes, formatters, editor enhancements, and more.

What Extensions Can Do​

Extensions run in isolated JavaScript environments and communicate with the editor through an SDK. With extensions, you can:

  • Add commands to the command palette and bind them to actions
  • Create themes with custom editor and app colors
  • Register formatters for code formatting
  • Extend the editor with CodeMirror 6 plugins (keymaps, decorations, linting)
  • Add UI elements like status bar items, drawer icons, and bottom sheets
  • Access APIs for file system, terminal, storage, network, and more
  • Provide snippets for quick code insertion

The packages you will use​

Extension development uses three npm packages, all published by SrcNexus:

PackageRole
@srcnexus/create-extensionScaffolds the project (npm create @srcnexus/extension)
@srcnexus/ext-sdkThe SDK your code imports (editor.*)
srcnexusCLI that deploys the finished extension

See CLI & npm Packages for install commands and versions.

Getting Started​

Using the CLI​

Run the scaffolding tool to generate a ready-to-go extension project. It is published on npm as @srcnexus/create-extension:

npm create @srcnexus/extension

The CLI will prompt you for an extension name, language (JavaScript or TypeScript), and other options. You can also run it non-interactively:

npm create @srcnexus/extension -- --name "My Extension" --lang ts -y

This generates manifest.json, build.js, and an entry point (src/main.ts or src/main.js) with a sample command already wired up.

Using the Create Extension extension​

Install the Create Extension extension from the store. It provides a guided setup directly inside the editor.

Build and Install​

The generated build.js uses esbuild to bundle your extension. Run:

npm run build

The generated package.json already depends on @srcnexus/ext-sdk, so npm install pulls the SDK and its TypeScript types for you.

This bundles your TypeScript/JavaScript source into dist/main.js. No manual zipping is needed — when you publish through the extension manager, the app automatically packages the required files (manifest.json, icon.png, and the bundled JS) into a distributable archive.

For CodeMirror plugins, uncomment the CM build section in build.js.

The extension runtime​

Extension code runs in an embedded JavaScript engine, not in a browser and not in Node.js. That means a lot of globals you may reach for by habit simply are not there.

Available

  • Standard ECMAScript: JSON, Math, Date, Promise, Map, Set, RegExp, typed arrays, async/await
  • console.log / warn / error / info — forwarded to the extension log panel
  • fetch() and Headers, polyfilled by the SDK on top of the host network layer
  • require() for sibling modules inside your extension bundle
  • Everything under editor.* from the SDK

Not available

  • atob, btoa, TextEncoder, TextDecoder — calling them throws ReferenceError. See File System API for drop-in replacements.
  • window, document and the rest of the DOM — use a webview if you need UI
  • localStorage / sessionStorage — use Storage API instead
  • Node built-ins (fs, path, process, Buffer) — use File System API instead
  • setInterval timers that outlive the extension — clean up in onDispose

Anything you bundle is compiled into a single file by esbuild, so npm packages are fine as long as they do not touch the DOM or Node built-ins at runtime.

Next Steps​