Prosemirror adapter for svelte

A few months ago, I’ve introduced the prosemirror adapter for React and Vue.

Today, I’d like to introduce the svelte version.



<script lang="ts">
import { useNodeViewContext } from "@prosemirror-adapter/svelte";
let selected = false;

const contentRef = useNodeViewContext('contentRef');
const selectedStore = useNodeViewContext('selected');
selectedStore.subscribe((value) => {
  selected = value;


<div use:contentRef class:selected={selected} />

.selected {
  outline: blue solid 1px;


<script lang="ts">
import { usePluginViewContext } from '@prosemirror-adapter/svelte'
const viewStore = usePluginViewContext('view');
let size = 0;

viewStore.subscribe(view => {
  size = view.state.doc.nodeSize;

<div>Size for document: { size }</div>


<script lang="ts">
  import { useWidgetViewContext } from '@prosemirror-adapter/svelte'

  const spec = useWidgetViewContext('spec')
  const level = spec?.level
  const hashes = Array(level || 0).fill('#').join('')

<span class="hash">{hashes}</span>

  .hash {
    color: blue;
    margin-right: 6px;

Hope it helps!

Something like this. But please read up on Lezer a bit more before trying to port a grammar to it. Things like putting built-in identifiers in the tokenizer really doesn’t work (it blows up the token space and will match these even if there are other identifier characters after them).

Cool! You could use auto-subscribe to make it look even svelter :wink:

$: size = $viewStore.state.doc.nodesize;
1 Like