Monaco Editor intellisense from multiple files

To achieve the goal of IntelliSense across multiple files, you need to use a single instance of monaco.editor and for each file you want IntelliSense for, initialize a new model, during application boot. Additionally, for autocompletion support, you must implement a completion item provider. Read below for more details.

Application Initial Load

  1. Use const myEditorInstance = monaco.editor.create({ ... , model: null }) to create a single editor instance.
  2. Create n-model instances via monaco.editor.createModel(...) where n is the number of files.
  3. Configure language defaults for eager model sync: monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true).
  4. To enable autocompletion, you will need to implement a method according to the CompletionItemProvider api.

Handling various events after initial load

  • Get a list of existing models via monaco.editor.getModels().
  • When a file is opened (either by a user clicking on a button or programmatically by some code you write), set the editor instance's model to the file you want to open using myEditorInstance.setModel(model).
  • When closing a file, you should save that model's view state (includes cursor position, etc) using myEditorInstance.saveViewState().
  • If opening that file again, you may restore that previous model state using myEditorInstance.restoreState().
  • If a file is renamed or deleted, you need to properly dispose the corresponding model and in the case where the file was renamed, re-initialize the model.

I have almost the same use case as you, except I have one file I use as my "definitions" that populate the autocomplete for the main editor. Based on the answer provided by Peter I was able to put together the following working example. I believe the part that you are missing is creating the model and then using editor.setModel(model) to assign it to your editor.

const editorOptions = {
    minimap: { enabled: false },
    scrollBeyondLastLine: false,
    model: null,
    language: "javascript"

const initEditor = () => {

  const defModel = monaco.editor.createModel(
    "const helloWorld = () => { return \"Hello World!\"; }",

  const textModel = monaco.editor.createModel(

  const e1 = monaco.editor.create(
    document.getElementById("editor1"), editorOptions
  const e2 = monaco.editor.create(
    document.getElementById("editor2"), editorOptions

    paths: {
        vs: ""

require(["vs/editor/editor.main"], initEditor)
.editor {
  margin: 1em 0;
  border: 1px solid #999;
<script src=""></script>


<div class="editor" id="editor1" style="width: 100%; height: 40px"></div>


<div class="editor" id="editor2" style="width: 100%; height: 300px"></div>