svelte-monaco

Reactive two-way, full theme support monaco editor for Svelte(&Kit).

pnpm install --save-dev svelte-monaco

Example

<script lang="ts">
	// if you want to get themes, feel free to import exportedThemes, nativeThemes, or themeNames.
	import Monaco from 'svelte-monaco';

	// this is fully reactive! setting value to another string will change the editor accordingly
	let value = 'const x = 5';
</script>

<div id="editor">
	<!-- event.detail is the monaco instance. All options are reactive! -->
	<Monaco
		options={{ language: 'typescript', automaticLayout: true }}
		theme="vs-dark"
		on:ready={(event) => console.log(event.detail)}
		bind:value
	/>
</div>

<textarea bind:value />

Features

• Reactive everywhere - two-way value binding with preserved cursor position, and reactive options.
• In-built support for monaco-themes
• Full access - the moment the editor is finished loading, it is shown to the user. No more waiting for API changes.