Atlassian Document Format (ADF) to HTML/Markdown

Huge thanks to Petr for posting such gist

Let's pretend we are retrieving Jira ticket description from API, it will contain description in ADF format, and we need to convert it to HTML or Markdown

Here is an snippet of how it may be done

import { defaultSchema } from "@atlaskit/adf-schema/schema-default";
import { JSONDocNode, JSONTransformer } from "@atlaskit/editor-json-transformer";
import { JIRATransformer } from "@atlaskit/editor-jira-transformer";
import { Converter } from "showdown";
import { JSDOM } from "jsdom";

// https://gist.github.com/ThePlenkov/f800bc78cb33fc489d457ab8a4751413
export function htmlify(adf: JSONDocNode) {
  const jiraTransformer = new JIRATransformer(defaultSchema);
  const jsonTransformer = new JSONTransformer(defaultSchema);
  const parsed = jsonTransformer.parse(adf);
  const dom = new JSDOM("<!DOCTYPE html><html><head></head><body></body></html>");
  globalThis.document = dom.window.document;
  const html = jiraTransformer.encode(parsed);
  return html;
}

// TBD: there is MarkdownTransformer, but at moment it does not implement encode
export function markdownify(adf: JSONDocNode) {
  const converter = new Converter();
  const html = htmlify(adf);
  const dom = new JSDOM(html);
  const markdown = converter.makeMarkdown(html, dom.window.document);
  return markdown;
}

And usage example

import { describe, it, expect } from "vitest";
import { JSONDocNode } from "@atlaskit/editor-json-transformer";
import { htmlify, markdownify } from "./adf";

describe("ADF", () => {
  describe("HTML", () => {
    it("can convert hello world example", () => {
      expect(htmlify(hello)).toBe("<p>Hello World</p>");
    });
  });

  describe("Markdown", () => {
    it("can convert hello world example", () => {
      expect(markdownify(hello)).toBe("Hello World\n\n");
    });
  });
});

const hello: JSONDocNode = {
  type: "doc",
  version: 1,
  content: [
    {
      type: "paragraph",
      content: [
        {
          type: "text",
          text: "Hello World",
        },
      ],
    },
  ],
};

Just in case, packages

{
  "scripts": {
    "test": "vitest"
  },
  "dependencies": {
    "@atlaskit/editor-jira-transformer": "^10.1.5",
    "@atlaskit/editor-json-transformer": "^8.24.2",
    "jsdom": "^26.1.0",
    "showdown": "^2.1.0"
  },
  "devDependencies": {
    "vitest": "^3.1.4"
  }
}