Engineering Journal
Ginexys
Ginexys

Pdf Cad Video Script

2026-05-22

Video Script: Ginexys PDF Processor — The Doc Editor

_Format: screen recording + talking head, ~7-9 min_ _Tone: direct, show the real thing, no hype_

HOOK (0:00 – 0:30)

[SCREEN: PDF open in browser, then switch to Doc tab]

You've extracted a PDF. The output looks mostly right. But the table landed in the wrong column. One heading got classified as a paragraph. A numbered list starts at item 1 when it should start at 3.

Most tools stop here and say: download the HTML, fix it somewhere else.

We didn't stop here.

WHAT THE DOC TAB IS (0:30 – 1:30)

[SCREEN: Doc tab with extracted content visible — zones, regions, a table, a heading]

The Doc tab is a live editor sitting on top of the extracted HTML. Two modes. Same surface.

Edit Mode is what you'd expect — click into text, type, format. The browser handles all of it. Contenteditable, execCommand, the formatting toolbar. If a word is wrong, you fix it here.

But there's a second mode. The "Select" button in the toolbar.

[ACTION: Click Select button — drag handles appear on zones and regions]

Watch what happens. Every extracted zone and region gets a drag handle. The outline tells you what's a draggable unit. The cursor tells you you're in layout mode, not text mode.

DRAG TO REORDER (1:30 – 3:00)

[SCREEN: Document with two zones visible]

Let me show you the most common use case. The extraction put a summary section after the appendix. I want it at the top.

[ACTION: Drag a zone by its handle — drop indicator line appears — release — zone snaps to new position]

That's it. The zone moved. Everything else reflowed. This is CSS Grid doing what CSS Grid does — the browser recalculated the layout the moment the DOM order changed. I didn't write any coordinate math.

[ACTION: Now drag a single region from one zone to another]

Regions work the same way. This paragraph was in the right column. I want it in the left column. Drag, drop, done.

The moment I drop it, the state syncs. If I switch to the Monaco source editor, the HTML reflects this change. If I export to Markdown right now, the Markdown will have the sections in the new order.

MARQUEE SELECT AND GROUP (3:00 – 4:15)

[SCREEN: Document with a poorly extracted two-column section — several regions scattered]

Here's a trickier case. The extraction split this section into five separate regions across two columns. I want to group them into one zone so I can work with the section as a unit.

[ACTION: Click-drag across the regions to draw a marquee selection — they highlight blue]

Marquee select. Same as any design tool — click-drag on the background, not on an element. Release.

[ACTION: Group button appears — click it — regions are wrapped into a new single zone]

The Group button appears when you have two or more regions selected. Click it. They're now a single zone. I can drag that zone anywhere on the page.

EDIT CODE (4:15 – 5:30)

[SCREEN: A heading that should be h3 but extracted as h4. Or a table cell with garbled text.]

Selection Mode handles layout. But sometimes the content itself is wrong. A heading classified at the wrong level. A table cell that extracted with a stray character. A paragraph that needs a class added.

[ACTION: Right-click a heading — context menu appears — click "Edit Code"]

The context menu. Edit Code.

[ACTION: Monaco dialog opens with the element's outerHTML — <h4 class="f0 ta-l">Introduction</h4>]

There's the raw HTML for this element. I can see the tag is h4. I want h3. I change it.

[ACTION: Edit the tag in Monaco from h4 to h3 — click Apply]

Apply. The element is replaced in the live DOM. The heading is now an h3. The change is in the source editor, in the visual diff, in state. Nothing was re-extracted. Nothing was re-rendered. One surgical edit.

THE EXPORT CHAIN (5:30 – 6:30)

[SCREEN: Export dropdown open — HTML, Markdown, PDF, XML, DOC visible]

Every edit you make flows through to export. The dropdown has five formats.

[ACTION: Click Markdown — file downloads — open it in a text editor]

Real Markdown. Pipe tables. ### headings. - bullets. Not a text dump — a proper GFM file that renders correctly on GitHub, in Obsidian, in any Markdown tool.

[ACTION: Click DOC — file downloads — open in Word or LibreOffice]

Word document. No mammoth.js, no server-side conversion. The browser generates it using the Office Open XML mhtml envelope. Tables, headings, lists — all styled for print.

THE ARCHITECTURE IN 30 SECONDS (6:30 – 7:30)

[SCREEN: Simple diagram — DOM hierarchy, same DOM, two modes]

Why does this work without a canvas layer? Because HTML extracted from a PDF is already a box model. Zones are CSS Grid containers. Regions are flow children. The browser has already calculated positions and dimensions.

HTML5 drag-and-drop plus insertBefore is the entire drag implementation. The browser reflows the grid when the DOM order changes. I'm not computing coordinates — the browser is.

Edit Code works because the DOM is the source of truth. Edit the HTML, replace the element, propagate the change through one sync function. Everything downstream reads from the same state.

CLOSE (7:30 – END)

[CAMERA: talking head]

The goal was to make the extracted output actually editable without a context switch. Not "download and fix elsewhere." Fix it here, in the same tab where you extracted it, in the same format you're going to export.

That's what the Doc editor is. A layout tool built on the extraction structure. No canvas. No absolute positioning. Just the DOM, used correctly.

Free, offline, no account required. Links in the description. Follow the build at @GINEXYS.

B-ROLL NOTES

THUMBNAIL CONCEPTS

Option A: Side by side — original PDF on left, Doc editor with drag handles visible on right. "The PDF editor that doesn't make you leave."

Option B: Monaco dialog open over the Doc view. "Right-click → Edit Code. Yes, really."

Option C: Before/after — extracted HTML as flat text dump vs the structured CAD view with zone outlines. "We went further."

Read this post in the full Engineering Journal →