I have been looking for a code editor component for a Svelte project capable of editing Svelte 5 code. I found a few, but they either did not support Svelte 5 as an editor language or target as runtime. So, I decided to extract the official Svelte Playground editor into a separate component for reuse.

You can find the

• npm package at https://www.npmjs.com/package/@umaranis/svelte-code-editor
• Github repo at https://github.com/umaranis/svelte-code-editor
• and a live demo at https://svelte-code-editor.vercel.app

svelte-code-editor

svelte-code-editor is a code editor for Svelte based on CodeMirror.

It is extracted from the official Svelte playground into a component to facilitate reuse.

The package contains the following components:

Features

• Syntax highlighting for Svelte, JavaScript, Typescript and CSS
• Autocompletion for Svelte, JavaScript, and CSS
• Search and replace
• Vim mode
• Dark and light themes

Installation

pnpm add @umaranis/svelte-code-editor

Usage

1- Import the desired components into the page import TabbedEditor from '$lib/TabbedEditor.svelte';

2- Create File and Workspace objects

3- Include the component in your page <TabbedEditor {workspace} />

Here is an example:

<script lang="ts">
 import Editor from '$lib/Editor.svelte';
 import TabbedEditor from '$lib/TabbedEditor.svelte';
 import { Workspace } from '$lib/Workspace.svelte';
 import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 import type { File } from '$lib/Workspace.svelte';
 import '@umaranis/svelte-code-editor/styles/index.css';

 const file: File = {
  type: 'file',
  name: 'App.svelte',
  basename: 'App.svelte',
  contents: '',
  text: true
 };

 const workspace = new Workspace([file], {
  initial: 'App.svelte',
  svelte_version: 'latest',
  onupdate() {},
  onreset() {}
 });
</script>

<h1>Welcome to your svelte-code-editor project</h1>

<p>Theme: <ThemeToggle /></p>

<TabbedEditor {workspace} />