HTML Output¶

Render extracted document content as styled HTML with semantic kb-* CSS classes, configurable themes, and full CSS customization.

Quick Start¶

kreuzberg extract doc.pdf --html-theme github

from kreuzberg import ExtractionConfig, HtmlOutputConfig, HtmlTheme, extract_file

config = ExtractionConfig(
    output_format="html",
    html_output=HtmlOutputConfig(theme=HtmlTheme.GitHub),
)
result = await extract_file("doc.pdf", config=config)
print(result.content)  # styled HTML string

import { extractFile, HtmlTheme } from '@kreuzberg/node';

const result = await extractFile('doc.pdf', {
  outputFormat: 'html',
  htmlOutput: { theme: HtmlTheme.GitHub },
});
console.log(result.content);

use kreuzberg::{extract_file, ExtractionConfig, HtmlOutputConfig, HtmlTheme};

let config = ExtractionConfig {
    output_format: "html".to_string(),
    html_output: Some(HtmlOutputConfig {
        theme: HtmlTheme::GitHub,
        ..Default::default()
    }),
    ..Default::default()
};
let result = extract_file("doc.pdf", None, &config).await?;
println!("{}", result.content);

Built-in Themes¶

Configuration¶

See HtmlOutputConfig for detailed field documentation.

from kreuzberg import ExtractionConfig, HtmlOutputConfig, HtmlTheme

config = ExtractionConfig(
    output_format="html",
    html_output=HtmlOutputConfig(
        theme=HtmlTheme.Dark,
        css="body { padding: 2rem; }",
        class_prefix="kb-",
        embed_css=True,
    ),
)

import { HtmlTheme } from '@kreuzberg/node';

const config = {
  outputFormat: 'html',
  htmlOutput: {
    theme: HtmlTheme.Dark,
    css: 'body { padding: 2rem; }',
    classPrefix: 'kb-',
    embedCss: true,
  },
};

use kreuzberg::{ExtractionConfig, HtmlOutputConfig, HtmlTheme};

let config = ExtractionConfig {
    output_format: "html".to_string(),
    html_output: Some(HtmlOutputConfig {
        theme: HtmlTheme::Dark,
        css: Some("body { padding: 2rem; }".to_string()),
        class_prefix: "kb-".to_string(),
        embed_css: true,
        ..Default::default()
    }),
    ..Default::default()
};

CLI Flags¶

CSS Customization¶

All built-in themes (except unstyled) define CSS custom properties on :root. Override them to adjust the theme without replacing it entirely:

:root {
  --kb-font-family: "Inter", sans-serif;
  --kb-text-color: #333;
  --kb-max-width: 60ch;
}

Pass custom CSS inline or from a file:

# Inline override
kreuzberg extract doc.pdf --html-theme github \
  --html-css ':root { --kb-max-width: 60ch; }'

# From a file
kreuzberg extract doc.pdf --html-theme github \
  --html-css-file custom.css

from kreuzberg import ExtractionConfig, HtmlOutputConfig, HtmlTheme

config = ExtractionConfig(
    output_format="html",
    html_output=HtmlOutputConfig(
        theme=HtmlTheme.GitHub,
        css_file="custom.css",
    ),
)

use kreuzberg::{ExtractionConfig, HtmlOutputConfig, HtmlTheme};
use std::path::PathBuf;

let config = ExtractionConfig {
    output_format: "html".to_string(),
    html_output: Some(HtmlOutputConfig {
        theme: HtmlTheme::GitHub,
        css_file: Some(PathBuf::from("custom.css")),
        ..Default::default()
    }),
    ..Default::default()
};

To use your own style sheet, set the theme to unstyled and disable the embedded <style> block:

config = ExtractionConfig(
    output_format="html",
    html_output=HtmlOutputConfig(
        theme=HtmlTheme.Unstyled,
        embed_css=False,
    ),
)

Class Reference¶

All generated HTML elements include semantic kb-* classes for targeted styling.

!!! Tip "Custom prefix" If you set class_prefix to "my-", all classes become my-doc, my-content, my-h1, and so on.

Security¶

!!! Warning "Security considerations" - class_prefix is validated to prevent HTML injection - </style> sequences are stripped from user CSS - css_file is limited to 1 MiB - When serving HTML to untrusted users, sanitize CSS at the application layer

See Also¶

• Configuration -- all configuration options
• Extraction Basics -- core extraction API and supported formats
• Element-Based Output -- structured element output as an alternative to HTML
• Document Structure -- how Kreuzberg models document structure

Edit this page on GitHub