@docling/docling-components
Advanced tools
Web components for displaying Docling output, which simplifies document processing, parsing diverse formats — including advanced PDF understanding. This package requires the JSON output of documents that are converted by Docling. Get started with the interactive examples.
In case of a client or single page application that is bundled upfront:
npm i @docling/docling-components
Next, import the package at the application root to install the components:
import '@docling/docling-components';
In case of a static or server-side rendered website; add the package to the page HTML. Either download the package and serve it as part of the rest of the website, or use a CDN mirror of NPM:
<html>
<head>
...
<script type="module" src="https://unpkg.com/@docling/docling-components/dist/index.es.js" />
</head>
...
</html>
This component displays the converted document in context of its original form, by showing the full page renderings that are embedded in the conversion JSON (for specific input document formats). Each document item is shown as a bounding box on top of the page.
Similar to <img> you can point the component to the Docling JSON file.
<docling-img src="conversion.json"></docling-img>
Or load the document programmatically:
<script type="module">
const cmp = document.getElementById('cmp');
const fetched = await fetch('conversion.json');
const doc = await fetched.json();
cmp.src = doc;
</script>
...
<docling-img id="cmp" pagenumbers></docling-img>
Narrow down the marked document items according to their reference path in the converted document:
<docling-img src="conversion.json" items="#/pictures/3"></docling-img>
Select entire item categories with items="#/pictures", full pages with items="#/pages/2", and unions with items="#/pictures, #/tables".
Or select specific items programmatically:
<script type="module">
const cmp = document.getElementById('cmp');
const fetched = await fetch('conversion.json');
const doc = await fetched.json();
cmp.src = doc;
// Select the first three tables.
cmp.items = doc.tables.slice(0, 3);
</script>
...
<docling-img id="cmp" pagenumbers></docling-img>
To emphasize item selections, you can suppress the non-selection into a page backdrop and/or trim out the pages without any selected items:
<docling-img
src="conversion.json"
items="#/pictures"
trim="pages"
backdrop
></docling-img>
Pops up a tooltip besides an item when you hover it on a page. This tooltip shows the item's parsed content and annotations if matching web components are available:
<docling-img src="conversion.json">
<docling-tooltip></docling-tooltip>
</docling-img>
Overlays parsed content and annotations directly on top of items (potentially occluding them).
<docling-img src="conversion.json">
<docling-overlay></docling-overlay>
</docling-img>
This component displays the converted document as a table of parsed document items, with columns for item contents and an image from the rendered document (if available).
<docling-table src="conversion.json"></docling-table>
You can select items with the items attributes, as described for the docling-img component. Selecting items will trim all non-selected items from view.
Select the columns that you want to have shown and in what order:
<docling-table src="conversion.json">
<docling-column>
<docling-item-text></docling-item-text>
<docling-item-table></docling-item-table>
</docling-column>
<docling-column>
<docling-item-provenance></docling-item-provenance>
</docling-column>
</docling-table>
You can use this to display the cropped image of a single document item as well:
<docling-table
src="conversion.json"
items="#/tables/2"
>
<docling-column>
<docling-item-provenance></docling-item-provenance>
</docling-column>
</docling-table>
Most types of document item have a prepackaged component that will be used to visualize it:
| Tag | Item label |
|---|---|
<docling-item-text> | checkbox_selected checkbox_unselected footnote page_footer page_header paragraph text reference |
<docling-item-table> | table |
You can use these tags directly with elements like <docling-tooltip> to specify what components will be used, including optional parameters. For example, to exclusively show tooltips for table components:
<docling-tooltip>
<docling-item-table></docling-item-table>
</docling-tooltip>
You can create your own item components by extending from the DoclingItemElement class at /src/item/ItemElement.ts and annotating the class with @customDoclingItemElement('docling-my-first-item-component') to have it registered as both a custom web element and as a default component for rendering document items.
Some types of document item annotation have a prepackaged component that will be used to visualize it:
| Tag | Item label | Annotation kind |
|---|---|---|
<docling-picture-classification> | chart picture | classification |
<docling-picture-description> | chart picture | description |
You can use these tags directly with elements like <docling-tooltip> to specify what components will be used. For example, to overlay pictures with their classification, if any:
<docling-overlay>
<docling-picture-classification></docling-picture-classification>
</docling-overlay>
You can create your own annotation components by extending from the DoclingAnnotationElement class at /src/annotation/AnnotationElement.ts and annotating the class with @customDoclingAnnotationElement('docling-my-first-annotation-component') to have it registered as both a custom web element and as a default component for rendering document annotations.
FAQs
Web components for displaying Docling output.
The npm package @docling/docling-components receives a total of 50 weekly downloads. As such, @docling/docling-components popularity was classified as not popular.
We found that @docling/docling-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.