Skip to main content

NPM package

Suitable for JavaScript/TypeScript based projects.

Prerequisite​

  1. Project should be using Node v22 or higher.

  2. Install the renderer package as a dependency:

    npm install @sap/csn-interop-renderer --save

Usage​

Import the package and use it in your project. Where yourCsnInputJson is a valid CSN JSON object.

import { generateMarkdown, generateHtml } from "@sap/csn-interop-renderer";

const optionalConfig = {
        annotationLinkCallbacks: {
          "@EndUserText.label": (_annotationValue: unknown): string=> {
            return "https://example.com/";
          };
        },
      };


// use the 'generatedMarkdownResult' for further processing
const generatedMarkdownResult = generateMarkdown(yourCsnInputJson, optionalConfig);

// use the 'generatedHtmlResult' for further processing
const generatedHtmlResult = generateHtml(yourCsnInputJson, optionalConfig);
warning

The html result is not sanitized and it's recommended to use a sanitize library.

Depending on the used sanitize library sometimes headline ids are removed and links between the CSN entities may not work anymore. Please consider configuring the sanitize library to allow id as valid attribute for headline tags.

Example of how a sanitizer library like sanitize-html could be configured:

sanitizeHtml(generatedHtmlResult, {
  allowedAttributes: { h1: ["id"], h2: ["id"], h3: ["id"], h4: ["id"], strong: ["id"], a: ["href"] },
});
info

The algorithm that generates the id for the html output result is the github-slugger which matches how GitHub markdown headline id generation works.