How to Install Monaco Editor in a SvelteKit Project

This guide walks you through adding the Monaco Editor to your SvelteKit app.

1. Create a New SvelteKit Project

If you haven't already, create a new SvelteKit project:

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Install dependencies

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn).

2. Install Monaco Editor

Add Monaco Editor and the Monaco loader:

npm install monaco-editor
npm install @monaco-editor/loader

3. Add Monaco Editor to Your Svelte Component

Create or edit a Svelte component (e.g., src/routes/+page.svelte) and add the following:

<script lang="ts">
    import loader from '@monaco-editor/loader';
    import { onMount, onDestroy } from 'svelte';

    let editor;
    let monaco;
    let editorContainer;

    onMount(async () => {
        monaco = await loader.init();
        editor = monaco.editor.create(editorContainer, {
            value: 'Hello, Monaco!',
            language: 'javascript',
            theme: 'vs-dark',
            automaticLayout: true
        });
    });

    onDestroy(() => {
        editor?.dispose();
        monaco?.editor.getModels().forEach(model => model.dispose());
    });
</script>

<div bind:this={editorContainer} style="height:300px; border:1px solid #444;"></div>

4. Run the Development Server

Start your app:

npm run dev

Visit http://localhost:5173 (or the port shown in your terminal) to see Monaco Editor in action.

5. Build and Preview

To create a production build:

npm run build
npm run preview

Resources

• Monaco Editor Docs
• SvelteKit Docs