or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-configuration.mdcomponent-interface.mdcomponent-overrides.mdcore-compilation.mdcustom-rendering.mdindex.mdutility-functions.md
tile.json

tessl/npm-markdown-to-jsx

Convert markdown to JSX with ease for React and React-like projects.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/markdown-to-jsx@7.7.x

To install, run

npx @tessl/cli install tessl/npm-markdown-to-jsx@7.7.0

index.mddocs/

markdown-to-jsx

markdown-to-jsx is a lightweight, customizable React markdown component that converts Markdown strings to JSX elements. It provides a safer alternative to dangerouslySetInnerHTML by parsing arbitrary HTML into proper JSX representations, offering extensive configuration options for component overrides, custom rendering, and advanced markdown features like GFM task lists, tables, and footnotes.

Package Information

  • Package Name: markdown-to-jsx
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install markdown-to-jsx

Core Imports

import Markdown, { compiler, RuleType, slugify, sanitizer } from "markdown-to-jsx";

For CommonJS:

const Markdown = require("markdown-to-jsx");
const { compiler, RuleType } = Markdown;
// Note: slugify and sanitizer are only available in ESM imports

Basic Usage

import Markdown from "markdown-to-jsx";
import React from "react";

// Component usage
function App() {
  return (
    <Markdown>
      # Hello World
      
      This is **bold** and this is *italic*.
      
      - List item 1
      - List item 2
    </Markdown>
  );
}

// Direct compilation
import { compiler } from "markdown-to-jsx";

const jsx = compiler("# Title\n\nSome content with **formatting**.");

Architecture

markdown-to-jsx is built around several key components:

  • Markdown Component: High-level React component that accepts markdown as children
  • Compiler Function: Core parsing and compilation engine that converts markdown to JSX
  • Rule System: Extensible parser with 30+ built-in rules for different markdown elements
  • Override System: Flexible component replacement mechanism for any HTML tag
  • Type System: Comprehensive TypeScript definitions with generic type preservation
  • Sanitization: Built-in URL and content sanitizer for security

Capabilities

Core Compilation

Essential markdown parsing and JSX compilation functionality for converting markdown strings to React elements.

function compiler(
  markdown?: string,
  options?: MarkdownToJSX.Options
): React.JSX.Element;

interface MarkdownToJSX.Options {
  createElement?: CreateElement;
  disableAutoLink?: boolean;
  disableParsingRawHTML?: boolean;
  enforceAtxHeadings?: boolean;
  forceBlock?: boolean;
  forceInline?: boolean;
  forceWrapper?: boolean;
  namedCodesToUnicode?: { [key: string]: string };
  overrides?: Overrides;
  renderRule?: RenderRuleFunction;
  sanitizer?: SanitizerFunction;
  slugify?: SlugifyFunction;
  wrapper?: React.ElementType | null;
}

Core Compilation

Component Interface

React component wrapper providing convenient JSX integration with markdown content and configuration options.

interface MarkdownProps {
  children: string;
  options?: MarkdownToJSX.Options;
}

const Markdown: React.FC<MarkdownProps & React.HTMLAttributes<Element>>;

Component Interface

Component Overrides

Powerful system for replacing any HTML tag with custom React components, including props injection and component mapping.

interface Override {
  component?: React.ElementType;
  props?: object;
}

type Overrides = {
  [tag in HTMLTags]?: Override | React.ElementType;
} & {
  [customComponent: string]: Override | React.ElementType;
};

Component Overrides

Advanced Configuration

Advanced parsing options including custom createElement behavior, HTML parsing control, and heading formatting rules.

interface AdvancedOptions {
  createElement?: (
    tag: Parameters<CreateElement>[0],
    props: React.JSX.IntrinsicAttributes,
    ...children: React.ReactNode[]
  ) => React.ReactNode;
  disableAutoLink?: boolean;
  disableParsingRawHTML?: boolean;
  enforceAtxHeadings?: boolean;
  forceBlock?: boolean;
  forceInline?: boolean;
  forceWrapper?: boolean;
  wrapper?: React.ElementType | null;
}

Advanced Configuration

Custom Rendering

Complete control over individual rule rendering through custom render functions and rule system integration.

type RenderRuleFunction = (
  next: () => React.ReactNode,
  node: ParserResult,
  renderChildren: RuleOutput,
  state: State
) => React.ReactNode;

const RuleType: {
  readonly blockQuote: "0";
  readonly breakLine: "1";
  readonly breakThematic: "2";
  readonly codeBlock: "3";
  readonly codeFenced: "4";
  readonly codeInline: "5";
  // ... 28 more rule types
};

Custom Rendering

Utility Functions

Helper functions for content sanitization, slug generation, and other common markdown processing tasks.

function sanitizer(input: string): string | null;

function slugify(str: string): string;

Utility Functions

Types

type CreateElement = typeof React.createElement;

type HTMLTags = keyof React.JSX.IntrinsicElements;

interface State {
  inAnchor?: boolean;
  inHTML?: boolean;
  inline?: boolean;
  inTable?: boolean;
  key?: React.Key;
  list?: boolean;
  prevCapture?: string;
  simple?: boolean;
}

type ParserResult = 
  | BlockQuoteNode 
  | HeadingNode 
  | LinkNode 
  | ImageNode 
  | CodeBlockNode 
  | TextNode
  // ... union of 30+ node types

type SanitizerFunction = (
  value: string,
  tag: HTMLTags,
  attribute: string
) => string | null;

type SlugifyFunction = (
  input: string,
  defaultFn: (input: string) => string
) => string;

type RuleOutput = (
  ast: ParserResult | ParserResult[],
  state: State
) => React.JSX.Element;