html2json-utils

HTML to JSON conversion utilities - core parsing, styling, and element classification library.

Installation

npm install html2json-utils

Features

• HTML Parser: Recursively parse HTML DOM and extract elements
• Element Classification: Automatically classify elements as image, text, or shape
• Style Extraction: Extract computed styles from HTML elements
• Color Utilities: Convert CSS colors to hex format
• Type Safe: Full TypeScript support with comprehensive type definitions

Quick Start

import { htmlToJson } from 'html2json-utils';

const html = '<div><h1>Hello</h1><p>World</p></div>';
const json = await htmlToJson(html);
console.log(json);

API

Core Functions

htmlToJson(html: string): Promise<JsonDocument>

Convert HTML string to JSON format.

const result = await htmlToJson('<div>Content</div>');

HtmlParser.parse(element: HTMLElement, parentElement: Element | null): Promise<Element | null>

Parse a single DOM element.

const parser = new HtmlParser();
const element = await parser.parse(domElement, null);

classifyElement(element: HTMLElement, style: Style): ElementType

Classify an element as 'image', 'text', 'shape', or null.

import { classifyElement } from 'html2json-utils';

const type = classifyElement(element, computedStyle);

toHexColor(color: string): string | undefined

Convert CSS color to hex format.

import { toHexColor } from 'html2json-utils';

const hex = toHexColor('rgb(255, 0, 0)'); // '#ff0000'

Types

interface JsonDocument {
  filename: string;
  presentation: {
    width: number;
    height: number;
    title: string;
    slides: Slide[];
  };
}

interface Slide {
  id: string;
  elements: Element[];
}

type Element = ImageElement | TextElement | ShapeElement;

interface ElementStyles {
  backgroundColor?: string;
  outline?: Outline;
  opacity: number;
  left: number;
  top: number;
  width: number;
  height: number;
  rotate: number;
}

Sub-exports

Import specific modules:

// Main converter
import { htmlToJson } from 'html2json-utils/converter';

// Parser
import { HtmlParser } from 'html2json-utils/parser';

// Classifier
import { classifyElement } from 'html2json-utils/classifier';

// Color utilities
import { toHexColor } from 'html2json-utils/colors';

// Types
import type { JsonDocument, Element } from 'html2json-utils/types';

Project Structure

src/
├── Element/                 # Element classes
│   ├── BaseElement.ts
│   ├── ImageElement.ts
│   ├── TextElement.ts
│   └── ShapeElement.ts
├── style/                   # Style extraction and processing
│   ├── baseStyle.ts
│   ├── gradient.ts
│   ├── lineHeight.ts
│   ├── outline.ts
│   ├── rotate.ts
│   ├── textShadow.ts
│   ├── textStyle.ts
│   └── index.ts
├── computedStyle/           # Computed style utilities
│   ├── index.ts
│   └── type.ts
├── index.ts                 # Main entry point
├── converter.ts             # HTML to JSON converter
├── classifier.ts            # Element classifier
├── colorUtils.ts            # Color conversion utilities
├── HtmlParser.ts            # HTML DOM parser
└── types.ts                 # Type definitions

License

MIT