Svelte Codemirror Editor

A svelte component to create a CodeMirror 6+ editor

Need a Svelte website built?

Hire a professional Svelte developer today.

Demo Download

svelte-codemirror-editor

A svelte component to create a CodeMirror 6 editor.

Installation

npm install svelte-codemirror-editor

Usage

To use svelte-codemirror-editor, you need to import the package and use it as any Svelte component.

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { javascript } from "@codemirror/lang-javascript";

    let value = "";
</script>

<CodeMirror bind:value lang={javascript()} />

Properties

Property	Type	Description	Default value
`value`	`string`	The value that will be displayed and edited in the CodeMirror editor	`""`
`basic`	`boolean`	Whether to use CodeMirror `basicSetup` extensions.	`true`
`lang`	`LanguageSupport`	The language extension that will parse and highlight the value.	`undefined`
`theme`	`Extension`	The theme extension to customize the appearence of the editor.	`undefined`
`extensions`	`Extension[]`	Additional extensions to inject in the editor.	`[]`
`useTab`	`boolean`	Whether to use the `Tab` shortcut to handle indentation.	`true`
`tabSize`	`number`	The number of space of an indentation level.	`2`
`editable`	`boolean`	Whether to make the editor editable or not.	`true`
`readonly`	`boolean`	Whether to make the editor readonly or not.	`false`
`lineWrapping`	`boolean`	Whether to wrap lines in the editor or not.	`false`
`placeholder`	`string`	A placeholder to include when value is empty.	`undefined`
`nodebounce`	`boolean`	Whether to stop debouncing value updates.	`false`
`styles`	`ThemeSpec`	In-place theme configuration. See exemple below.	`undefined`

Events

Event	Type	Description
`change`	`string`	Trigger when the code changes.
`ready`	`EditorView`	Trigger when the editor is ready. Allows to retrieve the `EditorView` instance.

Usage with vite / svelte-kit

If you try to use this component with vite or svelte-kit, you have to disable dependency optimization for codemirror and all its extensions.

// vite.config.js
const config = {
    //...
    optimizeDeps: {
        exclude: ["svelte-codemirror-editor", "codemirror", "@codemirror/language-javascript" /* ... */],
    },
    //...
}

Exemples

Basic usage

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { javascript } from "@codemirror/lang-javascript";

    let value = "";
</script>

<CodeMirror bind:value lang={javascript()} />

Custom theme

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { javascript } from "@codemirror/lang-javascript";
    import { oneDark } from "@codemirror/theme-one-dark";

    let value = "";
</script>

<CodeMirror bind:value lang={javascript()} theme={oneDark} />

Custom styles

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { javascript } from "@codemirror/lang-javascript";

    let value = "";
</script>

<CodeMirror
    bind:value
    lang={javascript()}
    styles={{
        "&": {
            width: "500px",
            maxWidth: "100%",
            height: "50rem",
        },
    }}
/>

Get EditorView instance

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    let view: EditorView;
</script>

<CodeMirror on:ready={(e) => view = e.detail} />

License

MIT

Top categories

Need a Svelte website built?

Hire a professional Svelte developer today.