https://github.com/leodog896/svelte-monaco

svelte + monaco integration
https://github.com/leodog896/svelte-monaco

monaco monaco-editor svelte sveltejs

Last synced: 3 months ago
JSON representation

svelte + monaco integration

• Host: GitHub
• URL: https://github.com/leodog896/svelte-monaco
• Owner: LeoDog896
• License: mit
• Created: 2022-12-29T17:33:52.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-29T03:35:32.000Z (7 months ago)
• Last Synced: 2024-11-08T00:23:57.950Z (3 months ago)
• Topics: monaco, monaco-editor, svelte, sveltejs
• Language: Svelte
• Homepage: https://leodog896.github.io/svelte-monaco/
• Size: 269 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [svelte-monaco](https://leodog896.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

	// 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';



	

	 console.log(event.detail)}

		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.