Snarkdown in React

Tiny markdown parser for React.

snarkdown-in-react is a fork of snarkdown.

Whereas snarkdown is 1kb minified and gzipped, snarkdown-in-react is a little larger, at 1.4kb (all in, no external dependencies). For that you get custom rendering and easy use in React.

I created snarkdown-in-react originally to handle the online manual in my game Head over Heels Online

Use case:

You want to show some markdown in your react app
You don't need MDX (react components inline in the markdown)
You don't want to inflate your bundle size
You may (or may not) need to render to your own, custom React components
You don't need to inject custom parsing

API

import {
  SnarkdownInReact,
  type CustomComponentsOption,
} from "snarkdown-in-react";

const MyComponent = () => {
  return <SnarkdownInReact markdown={myMarkdown} />;
};

const myCustomRenderers: CustomComponentsOption = {
  // default rendering for em is <em> - this example overrides it with <span class="em">
  em: ({ children }) => <span className="em">{children}</span>,

  // wrap images in a div with a click handler and some tailwind classes:
  img: ({ children, src, alt }) => (
    <div className="w-full" onClick={() => console.log("click")}>
      <img className="scale-2" src={src} alt={alt} />
    </div>
  ),
};

const MyComponentWithCustomMarkdownRendering = () => {
  return (
    <SnarkdownInReact
      markdown={myMarkdown}
      customComponents={myCustomRenderers}
    />
  );
};

// note that if your markdown is very large, you might want to consider wrapping in useMemo to avoid
// repeated parsing. For most normal use cases this will not improve performance and may make it worse,
// and to improve performance it is almost certainly better to address why your app is over-rendering
import { parse } from "snarkdown-in-react";
import { useMemo } from "react";
const MyCachedComponent = PureComponent(() => {
  return useMemo(() => parse(myMarkdown), [myMarkdown, parse]);
});

parsing paragraphs

By default, <p> is output for paragraphs. This can cause issues if you need to put block-level elements inside your markdown. To change to <div> (or any other tag) you can do:

return (
  <SnarkdownInReact
    markdown={myMarkdown}
    customComponents={{p: 'div'}}
  />
);

Like the upstream Snarkdown:

a dead simple [Markdown] parser.
has no run-time dependencies (except react itself)
It's designed to be as minimal as possible, for constrained use-cases where a full Markdown parser would be inappropriate.
passes all tests from snarkdown (well, all that still apply)
doesn't support tables

Unlike upstream Snarkdown:

supports pluggable, custom rendering
returns jsx that it creates directly (never creates a html string)
assumes you have a modern (circa 2025) workflow
is in typescript
is a little bigger, at 1.4k minified and gzipped
doesn't bother building to cjs or javascript, or push to any cdns. Use via the npm package repository, and typescript+es only
in fact, doesn't have any build whatsoever. The typescript file is the main. If you're not using typescript and want to add a build to js, feel free to raise a PR. The esbuild-powered build task in the package.json is purely to keep an eye on the size
tests in vitest (not mocha/chai)
doesn't support reference links
doesn't let through raw html in markdown
thanks to React (and not supporting html), is somewhat xss-safe, since raw html is never concatenated and written out (I don't use .dangerouslySetInnerHtml).

Parsing differences:

double line breaks like this:

some text

some other text

is parsed to <p>s:

<p className="paragraph">some text</p>
<p className="paragraph">some other text</p>

this is unlike snarkdown which uses <br />:

some text<br />some other text