JSX-style document builder

I’ve been playing around with Prosemirror, and ended up publishing a small testing utility for creating documents. I know it may not be the most efficient, but my combination of familiarity with React-style syntax and desire to chase an interesting idea meant I had to at least write a minimal version.

The utility allows you to create a template tag by binding your schema:

import createBuilder from '@ryaninvents/prosemirror-doc-tpl';
import mySchema from './schema';

const pm = createBuilder(mySchema);

const starterDocument = pm`
<doc>
  <heading level=1>prosemirror-doc-tpl</heading>
  <blockquote>
    Create <link href="https://prosemirror.net" title="ProseMirror">ProseMirror</link>
    documents using JSX-like syntax
  </blockquote>
  <paragraph>
    This package provides a concise way to create Prosemirror documents using
    a JSX-like syntax, for testing or content generation.
  </paragraph>
</doc>
`;

There are probably a few edge cases involving marks that I haven’t thought of – JSX requires strictly nested elements while marks can “span” across boundaries. If there’s a situation that this syntax can’t handle, you can use ${interpolations} to insert ProseMirror nodes you’ve generated by other means.

Code is available on GitHub. Pull requests and forks are welcome!

2 Likes