# svelte-monaco

> Monaco Editor bindings for Svelte

Latest version **1.0.4** (published 2025-04-20) · 0 weekly downloads

## Install

```sh
npm install svelte-monaco
pnpm add svelte-monaco
yarn add svelte-monaco
bun add svelte-monaco
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2025-04-20 |
| First published | 2023-07-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Tristan F. |
| Maintainers | leodog896 |
| Keywords | monaco, svelte |

## Links

- npm: https://www.npmjs.com/package/svelte-monaco
- Repository: https://github.com/LeoDog896/svelte-monaco
- Homepage: https://leodog896.github.io/svelte-monaco
- Issues: https://github.com/LeoDog896/svelte-monaco/issues
- npm.io page: https://npm.io/package/svelte-monaco

## Dependencies (2)

- [monaco-themes](https://npm.io/package/monaco-themes.md) ^0.4.4
- [@monaco-editor/loader](https://npm.io/package/@monaco-editor/loader.md) ^1.5.0

## Recent versions

- 1.0.4 (latest) — 2025-04-20
- 1.0.3 — 2025-04-05
- 1.0.2 — 2025-04-05
- 1.0.1 — 2025-04-05
- 1.0.0 — 2025-04-05
- 0.4.0 — 2024-06-29
- 0.3.0 — 2023-09-11
- 0.2.0 — 2023-09-02
- 0.1.0 — 2023-09-01
- 0.0.2 — 2023-07-26
- 0.0.1 — 2023-07-26

## README

# [svelte-monaco](https://tristan-f-r.github.io/svelte-monaco)

[![npm](https://img.shields.io/npm/v/svelte-monaco)](https://npmjs.com/package/svelte-monaco)

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

```sh
pnpm install --save-dev svelte-monaco
```

## Example

```svelte
<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](https://github.com/brijeshb42/monaco-themes)
- Full access - the moment the editor is finished loading, it is shown to the user. No more waiting for API changes.

---
_Source: https://npm.io/package/svelte-monaco · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._