ketjson-to-img

Convert Ket-JSON chemical structures to PNG or SVG images using indigo-ketcher WASM.

Features

• 🚀 Non-blocking rendering in Web Worker
• 🎨 Customizable rendering options (colors, sizes, styles)
• 📦 Self-contained (no Ketcher UI dependencies)
• 🌐 Browser-only (modern browsers with WebAssembly)
• 💪 TypeScript support

Installation

npm install ketjson-to-img

Usage

Basic PNG Rendering

import { renderKetToPng } from "ketjson-to-img";

const ketJson = '{"root":{"nodes":[...]}}';
const pngBase64 = await renderKetToPng(ketJson);

// Use in img tag
document.getElementById("molecule").src = pngBase64;

With Custom Options

const png = await renderKetToPng(ketJson, {
  backgroundColor: "#ffffff",
  fontSize: 14,
  bondLength: 32,
  bondThickness: 1.2
});

SVG Rendering

import { renderKetToSvg } from "ketjson-to-img";

const svgBase64 = await renderKetToSvg(ketJson, {
  backgroundColor: "transparent"
});

API

renderKetToPng(ketJson, options?)

Convert ket-json to PNG image.

Parameters:

• ketJson (string): Ket format JSON string
• options (object, optional):
  • backgroundColor (string): Hex color or 'transparent'
  • fontSize (number): Font size for atom labels
  • bondLength (number): Bond length in pixels
  • bondThickness (number): Bond line thickness

Returns: Promise<string> - Base64-encoded PNG data URI

renderKetToSvg(ketJson, options?)

Convert ket-json to SVG image. Same parameters as renderKetToPng but outputs SVG.

Browser Support

Modern browsers with WebAssembly:

• Chrome 57+
• Firefox 52+
• Safari 11+
• Edge 79+

How It Works

1. Loads indigo-ketcher WASM library in a Web Worker
2. WASM initializes on first render call (cached for subsequent calls)
3. Calls indigo.render() with your structure and options
4. Returns base64-encoded image