` tags. Existing CSS styles for details elements are sufficient.
```python
# website/pages/faq.px (new)
from website.models.faq import load_faq_data
def FaqPage():
faq_data = load_faq_data()
return [
"FAQ
",
"Can't find your answer? Ask in [Discord] or open a [GitHub issue].
",
*[
f"{section.title}
" +
"".join([
f"\n{item.question}
\n{item.answer}
\n "
for item in section.items
])
for section in faq_data.sections
]
]
```
--------------------------------
### Project Directory Structure
Source: https://github.com/docling-project/website/blob/main/README.md
The file system layout for the website source and public assets.
```text
website/
pages/ one module per route — section composition only
components/ reusable product components (hero, document demo, ...)
data/ site content: navigation, samples, product copy, integrations
highlight.py build-time Pygments highlighting (no client-side highlighter)
seo.py sitemap.xml and robots.txt, generated from one route list
public/
css/ cascade layers: tokens, reset, base, layout, components, pages
js/ ES modules, one per concern, loaded via js/main.js
font/ self-hosted IBM Plex Sans (variable) and Plex Mono
```
--------------------------------
### Tolerant LaTeX Parsing with pylatexenc
Source: https://github.com/docling-project/website/blob/main/blog/20260315_00_the_latex_story/post.md
Demonstrates the use of `LatexWalker` with `tolerant_parsing=True` for building a LaTeX node tree, which is crucial for handling messy or non-standard LaTeX source.
```python
LatexWalker(..., tolerant_parsing=True)
```
--------------------------------
### Python: Configure and Run Docling for Chart Extraction
Source: https://github.com/docling-project/website/blob/main/blog/20260203_00_chart_understanding_in_docling/post.md
Configure PdfPipelineOptions to enable chart extraction and use DocumentConverter to process a PDF. Extracted chart data is accessed via PictureItem metadata.
```python
from pathlib import Path
import pandas as pd
from docling.datamodel.base_models import InputFormat
from docling.datamodel.pipeline_options import PdfPipelineOptions
from docling.document_converter import DocumentConverter, PdfFormatOption
from docling_core.types.doc import PictureItem
pdf_path = Path("reports/market-report.pdf")
pipeline_options = PdfPipelineOptions()
pipeline_options.do_chart_extraction = True
converter = DocumentConverter(
format_options={
InputFormat.PDF: PdfFormatOption(pipeline_options=pipeline_options)
}
)
result = converter.convert(pdf_path)
for item, _ in result.document.iterate_items():
if not isinstance(item, PictureItem):
continue
if item.meta is None or item.meta.tabular_chart is None:
continue
chart_data = item.meta.tabular_chart.chart_data
# Rebuild extracted grid as a DataFrame
grid = [["" for _ in range(chart_data.num_cols)] for _ in range(chart_data.num_rows)]
for cell in chart_data.table_cells:
grid[cell.start_row_offset_idx][cell.start_col_offset_idx] = cell.text
df = pd.DataFrame(grid)
print(df.to_csv(index=False, header=False))
```
--------------------------------
### Link to Colab Notebook
Source: https://github.com/docling-project/website/blob/main/plans/feature_07_live_demo.md
Use this HTML anchor tag to create a 'Try in Colab' button. This is the lowest effort option for providing an interactive demo.
```html
Try in Colab
```
--------------------------------
### Chart Extraction with Granite Vision 4.1-4B
Source: https://github.com/docling-project/website/blob/main/blog/20260612_00_chartnet_dataset/post.md
Demonstrates how to use the Granite Vision 4.1-4B model for chart-to-CSV, chart-to-summary, and chart-to-code generation using task tags. Requires transformers, torch, and pillow libraries.
```python
# Requires: transformers>=5.8.0, torch, pillow
import torch
from transformers import AutoProcessor, AutoModelForImageTextToText
from PIL import Image
model_id = "ibm-granite/granite-vision-4.1-4b"
device = "cuda" if torch.cuda.is_available() else "cpu"
processor = AutoProcessor.from_pretrained(model_id)
model = AutoModelForImageTextToText.from_pretrained(
model_id, dtype=torch.bfloat16, device_map=device
).eval()
chart = Image.open("chart.jpg").convert("RGB")
# ChartNet's core tasks:
# -> underlying data table as CSV
# -> natural-language description
# -> Python code that recreates the chart
for task in ["", "", ""]:
conversation = [{"role": "user", "content": [
{"type": "image"},
{"type": "text", "text": task},
]}]
text = processor.apply_chat_template(
conversation, tokenize=False, add_generation_prompt=True
)
inputs = processor(text=text, images=[chart], return_tensors="pt").to(model.device)
out = model.generate(**inputs, max_new_tokens=4096)
print(f"{task}:\n{processor.decode(out[0, inputs['input_ids'].shape[1]:], skip_special_tokens=True)}\n")
```
--------------------------------
### Embed HuggingFace Space Demo
Source: https://github.com/docling-project/website/blob/main/plans/feature_07_live_demo.md
Embed a HuggingFace Space Gradio demo using an iframe. This option requires a maintained demo Space and handles compute externally.
```html
```
--------------------------------
### Docling LaTeX Backend Directory Structure
Source: https://github.com/docling-project/website/blob/main/blog/20260315_00_the_latex_story/post.md
Illustrates the organizational structure of the Docling LaTeX backend, showing the separation of concerns among different modules like handlers, engines, and utilities.
```text
docling/docling/backend/latex/
├── __init__.py
├── backend.py
├── constants.py
├── context.py
├── engines/
│ ├── __init__.py
│ └── base.py
├── handlers/
│ ├── __init__.py
│ ├── environments.py
│ ├── macros.py
│ └── math.py
├── libraries/
│ ├── __init__.py
│ └── base.py
└── utils/
├── __init__.py
├── encoding.py
├── table.py
└── text.py
```
--------------------------------
### Define Blog Post Metadata
Source: https://github.com/docling-project/website/blob/main/blog/template/post.md
The YAML front matter required at the top of every post.md file.
```yaml
---
title: The title of your post
date: 10-02-2019
summary: A short description of your post that will be shown in the overview.
thumbnail: images/thumbnail.jpg
category: technical
---
```
--------------------------------
### Load Single File from ChartNet Core Subset
Source: https://github.com/docling-project/website/blob/main/blog/20260612_00_chartnet_dataset/post.md
Loads only the first file ('core_000.parquet') from the 'core' subset of ChartNet. This is useful for exploring the dataset before committing to a full download, as subsets can be very large. Requires the 'datasets' library.
```python
first_core_file = load_dataset("ibm-granite/ChartNet", data_files="core/core_000.parquet")
print(first_core_file.shape) # {'train': (10000, 5)}
```
--------------------------------
### Blog Post Metadata Template
Source: https://github.com/docling-project/website/blob/main/README.md
The YAML front matter and content structure for a post.md file.
```markdown
---
title: My Awesome Post
date: 06-03-2026
summary: A brief description that appears in the blog listing
thumbnail: images/thumbnail.jpg
---
Your blog content starts here...
## Section Heading
You can use all standard Markdown features, code blocks, images, etc.
```
--------------------------------
### Load ChartNet Experimental Subsets
Source: https://github.com/docling-project/website/blob/main/blog/20260612_00_chartnet_dataset/post.md
Loads the 'core' and 'reasoning' subsets, which correspond to the paper's experiments. These subsets can be joined using the 'id' column. The 'datasets' library is required.
```python
# Core and reasoning subsets (joinable on the "id" column)
core = load_dataset("ibm-granite/ChartNet", "core")
reasoning = load_dataset("ibm-granite/ChartNet", "reasoning")
```
--------------------------------
### Passing Post Data to `` in `blog.px`
Source: https://github.com/docling-project/website/blob/main/plans/feature_09_seo.md
In `website/pages/blog.px`, the `title` and `summary` of a blog post are passed as props to the `` component to generate unique SEO tags for individual blog posts.
```html
```
--------------------------------
### Load ChartNet Human-Verified Test Split
Source: https://github.com/docling-project/website/blob/main/blog/20260612_00_chartnet_dataset/post.md
Loads the human-verified test split of the ChartNet dataset. This split is disjoint from the other subsets. Requires the 'datasets' library.
```python
# Human-verified train/test splits (disjoint from the other subsets)
human_verified_test = load_dataset("ibm-granite/ChartNet", "human_verified", split="test")
```
--------------------------------
### Blog Post Directory Structure
Source: https://github.com/docling-project/website/blob/main/README.md
The required directory layout for new blog posts, using a timestamped folder naming convention.
```text
blog/
└── YYYYMMDD_HH_post-title/
├── post.md
└── images/
├── thumbnail.jpg
└── other-images.jpg
```