Sveltemirror 📚

This is a collection of Svelte components that use CodeMirror to provide code editing functionality.

Getting Started

To get started, install the package from npm:

npm install sveltemirror

Usage

Basic

The most basic usage for just the editor is as follows:

Loading editor...

<script>
    import CodeMirror from "sveltemirror";
    import { html } from "@codemirror/lang-html";

    let value = "<h1> Hi there! </h1>";
</script>

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

It should create an editor that looks like this:

Loading editor...

<h1> Hi there! </h1>

Styling

The editor can accept props to be passed as styles to the editor and also custom themes

Loading editor...

<script>
    import CodeMirror from "sveltemirror";
    import { html } from "@codemirror/lang-html";
    import { dracula } from "@codemirror/theme-one-dark";

    let value = "<h1> Hi there! </h1>";
</script>

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

this will create an editor that looks like this:

Loading editor...

<h1> Hi there! </h1>

Renderer

For ease of use a barebones iframe renderer is provided. The renderer accepts an optional string preprocess function that can be used to modify the code before it is rendered.

Loading editor...

<script>
    import CodeMirror, { Renderer } from "sveltemirror";
    import { html } from "@codemirror/lang-html";
    import { dracula } from "@codemirror/theme-one-dark";

    let value = "<h1> Hi there! </h1>";
  </script>

    <div style="display:flex;"
      <CodeMirror
        bind:value
        theme={dracula}
        styles={{
          "&": {
            height: "150px",
          },
        }}
        lang={html()}
      />

      <Renderer
        bind:value
        preprocess={(v) => "Hiiiii" + v}
      />
    </div>

Loading editor...

<h1> Hi there! </h1>