@tfw.in/structura-lib

A React component library for PDF document viewing with structured data extraction and rendering.

Features

• PDF & JSON Side-by-Side Viewing - View original PDF alongside extracted structured content
• Edit Mode - Inline editing of extracted content
• Math Rendering - LaTeX math expressions rendered via KaTeX ($...$ inline, $$...$$ display)
• Semantic Tags - Visual highlighting for corrections, additions, and deletions
• Header/Footer Detection - Automatic badges for header and footer content
• Table Support - Rich table rendering with cell-level editing

Installation

npm install @tfw.in/structura-lib

Usage

import { Structura } from '@tfw.in/structura-lib';
import '@tfw.in/structura-lib/dist/esm/styles.css';

function App() {
  return (
    <Structura
      apiKey="your-api-key"
      baseUrl="https://api.example.com"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | required | API key for authentication | | baseUrl | string | undefined | Optional API base URL | | initialPdfPath | string \| null | null | Initial PDF file path to load | | initialJsonData | any | null | Initial JSON data to display | | editMode | boolean | true | Enable/disable edit mode toggle | | jsonMode | boolean | true | Enable/disable JSON view mode toggle | | mathRendering | boolean | true | Enable LaTeX math rendering | | semanticTags | boolean | true | Enable/disable semantic tags toggle | | headerFooterBadges | boolean | true | Show header/footer badges | | defaultViewMode | 'read' \| 'edit' \| 'json' | 'read' | Initial view mode | | onContentChange | function | undefined | Callback when content is edited | | onExport | function | undefined | Callback when data is exported |

Full Example

import { Structura } from '@tfw.in/structura-lib';
import '@tfw.in/structura-lib/dist/esm/styles.css';

function App() {
  const handleContentChange = (blockId, oldContent, newContent) => {
    console.log(`Block ${blockId} changed`);
    console.log('Old:', oldContent);
    console.log('New:', newContent);
  };

  const handleExport = (data) => {
    console.log('Exported data:', data);
    // Save to your backend, etc.
  };

  return (
    <Structura
      apiKey="your-api-key"
      baseUrl="https://api.example.com"
      editMode={true}
      jsonMode={true}
      mathRendering={true}
      semanticTags={true}
      headerFooterBadges={true}
      defaultViewMode="read"
      onContentChange={handleContentChange}
      onExport={handleExport}
    />
  );
}

Math Rendering

The library automatically renders LaTeX math expressions in content:

• Inline math: $x^2 + y^2 = z^2$
• Display math: $$\sum_{i=1}^{n} x_i$$

You can also use the math utilities directly:

import { MathContent, renderMathInHtml, containsMath } from '@tfw.in/structura-lib';

// React component
<MathContent html="The formula is $E = mc^2$" />

// Utility function
const rendered = renderMathInHtml("Price is $20$ dollars");

// Check for math content
if (containsMath(text)) {
  // handle math
}

Semantic Tags

Parse and render semantic tags for document corrections:

import { SemanticTagRenderer, parseSemanticTags } from '@tfw.in/structura-lib';

// Render with visual highlighting
<SemanticTagRenderer content="Text with <add>additions</add> and <del>deletions</del>" />

// Parse tags programmatically
const parsed = parseSemanticTags(content);

License

MIT