Usage no npm install needed!

<script type="module">
  import svelteSlate from 'https://cdn.skypack.dev/svelte-slate';
</script>

README

svelte slate

Tools

slate
svelte kit
svelte icons

tries to mimic the react api from slate-react as much as possible

<script lang="ts">
    import { Slate, Editable, withSvelte } from 'svelte-slate';
    import { createEditor } from 'slate';

    const editor = withSvelte(createEditor());
    let value = [
        {
            type: 'paragraph',
            children: [{ text: 'This is editable ' }]
        }
    ];
</script>

<Slate {editor} bind:value>
    <Editable placeholder="Enter some plain text..." />
</Slate>

Custom Rendering

Default components for elements, leafs, and placeholders are provider but can easily be overridden see Element.svelte and Leaf.svelte and then can be used in the editable component like <Editable {Element} {Leaf} />