CSV Preview

WHAT IT DOES

CSV Preview is a floating panel that transforms raw CSV data into clean, formatted HTML tables with instant preview. Paste your CSV data into the input area, choose the delimiter (comma, tab, semicolon, or custom), toggle whether the first row contains headers, and enable trimming whitespace for cleaner data—the panel instantly displays a formatted table with column headers, row data, and type detection per column (string, number, date, boolean). Statistics show the row count, column count, and the detected data types across your dataset. You can sort any column by clicking its header, making it easy to explore your data without leaving your browser. The panel also exports your table as HTML or Markdown, which you can copy to your clipboard or insert directly into any editable field on the page (input, textarea, or contenteditable). Perfect for developers debugging CSV exports, data analysts previewing datasets, QA engineers validating CSV formats, or anyone who regularly works with structured data.

WHERE IT RUNS

The panel overlays any website that loads the BotGentz extension—whether you're on a documentation page, a data dashboard, a CSV viewer, a code editor, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies.

HOW TO USE

After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use CSV Preview, it will appear as a draggable widget near the bottom‑right corner of your viewport. To preview CSV data:

- Paste your CSV data into the input area. A sample dataset is pre‑filled for testing.

- Select the delimiter (comma, tab, semicolon, or custom).

- Toggle "First row as headers" to treat the first row as column headers.

- Toggle "Trim whitespace" to clean up cell values.

- Click "Preview" to generate the formatted HTML table.

The panel displays the table with column headers, row data, and a statistics line showing row count, column count, and data type distribution. To explore the data:

- Click any column header to sort the table by that column (click again to reverse sort).

- The column header shows the detected data type (string, number, date, boolean).

To use the output:

- Click "Copy HTML Table" to copy the table as HTML code.

- Click "Copy Markdown Table" to copy the table as Markdown.

- Click "Insert HTML into Active Field" to paste the HTML table directly into the focused editable field on the page.

The panel remembers your delimiter, header preference, and trim setting across sessions.

ROBUST CSV PARSER WITH QUOTE HANDLING AND TYPE INFERENCE ENGINE

Unlike simple split‑based CSV parsers that break on quoted fields containing delimiters, this panel uses a state‑machine CSV parser that correctly handles quoted fields with embedded commas, newlines, and escaped quotes (using `""` for a single quote). The parser processes the input character by character, maintaining an `inQuotes` flag that toggles on double‑quote characters and treats delimiters only when outside quoted sections. The type inference engine samples up to 20 rows per column to detect the most common data type—string, number (parsing with comma removal), date (using `new Date()`), boolean, or empty. This provides immediate insight into the structure of your data without manual inspection. The sorting engine applies column‑specific sorting based on the detected type: numeric sorting for numbers, chronological sorting for dates, and case‑insensitive lexicographic sorting for strings. All column types and sorting indicators are displayed directly in the table headers for easy reference.

THE PANEL

- Drag: Click and hold the panel's header bar to move it anywhere on the screen.

- Per‑site position: The panel stores its last position separately for each domain using the browser's localStorage, keyed by hostname.

- Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel.

- Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back.

- Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively.

- Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar).

PLEASE NOTE

This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The preview performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your CSV data and parsed tables remain private to your local session and are persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. The preview displays the first 100 rows for performance; larger datasets are truncated with a note indicating additional rows. The CSV parser assumes RFC 4180‑style quoting; non‑standard CSV formats may require manual delimiter adjustment. Type detection is a best‑effort analysis and may misclassify ambiguous values—verify important data types manually.