Markdown Rendering Simplified

Features

• Removes the remark / unified complexity and easy to use.
• Powered by the unified processor for an extensible plugin pipeline.
• Built in caching 💥 making it render very fast when there isn't a change
• Frontmatter support built in by default. 🎉
• Easily Render to React or HTML.
• Generates a Table of Contents for your markdown files (remark-toc).
• Slug generation for your markdown files (rehype-slug).
• Code Highlighting (rehype-highlight).
• Math Support (rehype-katex).
• Markdown to HTML (rehype-stringify).
• Github Flavor Markdown (remark-gfm).
• Emoji Support (remark-emoji).
• MDX Support (remark-mdx).
• Raw HTML Passthrough (rehype-raw).
• Built in Hooks for adding code to render pipeline.
• AI-powered metadata generation, SEO, and translation via the Vercel AI SDK.

Table of Contents

• Getting Started
• API
  • new Writr(arg?: string | WritrOptions, options?: WritrOptions)
  • .content
  • .body
  • .options
  • .frontmatter
  • .frontMatterRaw
  • .cache
  • .engine
  • .render(options?: RenderOptions)
  • .renderSync(options?: RenderOptions)
  • .renderToFile(filePath: string, options?: RenderOptions)
  • .renderToFileSync(filePath: string, options?: RenderOptions)
  • .renderReact(options?: RenderOptions, reactOptions?: HTMLReactParserOptions)
  • .renderReactSync( options?: RenderOptions, reactOptions?: HTMLReactParserOptions)
  • .validate(content?: string, options?: RenderOptions)
  • .validateSync(content?: string, options?: RenderOptions)
  • .loadFromFile(filePath: string)
  • .loadFromFileSync(filePath: string)
  • .saveToFile(filePath: string)
  • .saveToFileSync(filePath: string)
• Caching On Render
• GitHub Flavored Markdown (GFM)
  • GFM Features
    • Tables
    • Strikethrough
    • Task Lists
    • Autolinks
    • GitHub Blockquote Alerts
  • Using GFM
  • Disabling GFM
• Hooks
• Emitters
  • Error Events
    • Listening to Error Events
    • Methods that Emit Errors
    • Error Event Examples
    • Event Emitter Methods
• AI
  • AI Options
  • AI Provider Configuration
  • Metadata
    • Generating Metadata
    • Applying Metadata to Frontmatter
    • Overwrite
    • Field Mapping
  • SEO
  • Translation
  • Using WritrAI Directly
• Migrating to v6
  • Breaking Changes
    • throwErrors removed
    • Error handling redesign
    • hookified v2
• Unified Processor Engine
• Benchmarks
• ESM and Node Version Support
• Code of Conduct and Contributing
• License

Getting Started

> npm install writr
  

Then you can use it like this:

import { Writr } from 'writr';
  
  const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
  
  const html = await writr.render(); // 
Hello World 🙂
This is a test.
  

Its just that simple. Want to add some options? No problem.

import { Writr } from 'writr';
  const writr = new Writr(`# Hello World ::-):\n\n This is a test.`);
  const options  = {
  	emoji: false
  }
  const html = await writr.render(options); // 
Hello World ::-):
This is a test.
  

An example passing in the options also via the constructor:

import { Writr, WritrOptions } from 'writr';
  const writrOptions = {
    renderOptions: {
      emoji: true,
      toc: true,
      slug: true,
      highlight: true,
      gfm: true,
      math: true,
      mdx: true,
      rawHtml: false,
      caching: true,
    }
  };
  const writr = new Writr(`# Hello World ::-):\n\n This is a test.`, writrOptions);
  const html = await writr.render(options); // 
Hello World ::-):
This is a test.
  

API

new Writr(arg?: string | WritrOptions, options?: WritrOptions)

By default the constructor takes in a markdown string or WritrOptions in the first parameter. You can also send in nothing and set the markdown via .content property. If you want to pass in your markdown and options you can easily do this with new Writr('## Your Markdown Here', { ...options here}). You can access the WritrOptions from the instance of Writr. Here is an example of WritrOptions.

import { Writr, WritrOptions } from 'writr';
  const writrOptions = {
    renderOptions: {
      emoji: true,
      toc: true,
      slug: true,
      highlight: true,
      gfm: true,
      math: true,
      mdx: true,
      rawHtml: false,
      caching: true,
    }
  };
  const writr = new Writr(writrOptions);
  

.content

Setting the markdown content for the instance of Writr. This can be set via the constructor or directly on the instance and can even handle frontmatter.

  import { Writr } from 'writr';
  const writr = new Writr();
  writr.content = `---
  title: Hello World
  ---
  # Hello World ::-):\n\n This is a test.`;
  

.body

gets the body of the markdown content. This is the content without the frontmatter.

import { Writr } from 'writr';
  const writr = new Writr();
  writr.content = `---
  title: Hello World
  ---
  # Hello World ::-):\n\n This is a test.`;
  console.log(writr.body); // '# Hello World ::-):\n\n This is a test.'
  

.options

Accessing the default options for this instance of Writr. Here is the default settings for WritrOptions. These are the default settings for the WritrOptions:

{
    renderOptions: {
      emoji: true,
      toc: true,
      slug: true,
      highlight: true,
      gfm: true,
      math: true,
      mdx: false,
      rawHtml: false,
      caching: true,
    }
  }
  

By default, raw HTML in markdown (such as