DEV Community: ThatToolSite

How to Save a Whole ChatGPT or Claude Chat as a PDF

ThatToolSite — Wed, 21 Oct 2026 16:08:44 +0000

Neither app has a download-as-PDF button for a conversation. Printing the page is quick but messy; your data export gives clean PDFs of whole chats, even many at once.

The ChatGPT and Claude export viewer turns any chat from your data export into a clean PDF with both sides of the conversation, and can put many chats into one file. Nothing is uploaded.

Open your export

Four ways to get a conversation into a PDF

Neither ChatGPT nor Claude has a “Download as PDF” button for a conversation. What works best depends on whether you want one answer, one full chat or many chats:

Method	Good for	Watch out for
Print the chat page (Ctrl+P or Cmd+P)	A quick copy of a short chat	Sidebars, cut-off tables and code, dark backgrounds
Data export plus a viewer	Whole chats, old chats, many chats at once	Waiting for the export email
Copy one answer into Markdown to PDF	A single answer laid out as a document	Only one answer at a time
Browser extensions	Saving from the chat page in one click	Access to every page you open on the chat site

The sections below go through each, starting with the one most people try first.

Printing the chat page: quick, but messy

Pressing Ctrl+P (Cmd+P on a Mac) in the chat prints the web app as it is on screen. Depending on the browser and the length of the chat, you may get the sidebar and the message box on every page, only the part of the conversation that had loaded, code blocks and wide tables cut off at the page edge, and grey text on black if you use dark mode.

For a short chat with plain text it can be good enough. Switch the app to light mode first, scroll to the top so the whole chat has loaded, and choose Save as PDF in the print window. For anything with tables, code or more than a few screens of text, use one of the methods below.

A whole chat, cleanly, from your data export

Your data export contains every message of every chat as text, so it can be laid out properly as a document rather than photographed from the screen. If you don't have an export yet, the guide to exporting your ChatGPT history shows how to request one; Claude's is under Settings, Privacy, Export data.

Drop the export ZIP. Open the export viewer and drop the ZIP from ChatGPT or Claude.
Find the chat. Search for a word you remember from it, or sort by date.
Choose the paper. A4 or Letter, next to the Save as PDF button.
Press Save as PDF. The print window opens with only the chat in it. Choose Save as PDF as the destination.

The PDF has a title, the date and the model, then each message under a You, ChatGPT or Claude heading. Headings, lists, tables, code blocks and formulas are drawn as they were in the app, and the text stays real text, so you can search and copy it later. The file is named after the chat.

Tool steps, such as code that ChatGPT ran, web searches and reasoning summaries, are left out by default so the PDF reads like the conversation you saw. Tick Include tool steps, code runs and thinking if you need a complete record, for example to show how an analysis was done.

Several chats in one PDF

Tick the chats you want in the list, then choose Save as PDF in the bar that appears. Each chat starts on a new page, in the order they're listed. Up to 100 chats go into one PDF, which keeps the print window responsive; for more, make several PDFs or download them as Markdown instead.

This is handy for a project that spread across many chats: search for the project name, select all the results and save them as one document to share with a colleague or keep with the project files.

When you only need one answer

If what you want is a single answer, not the whole chat, you don't need the export. Use the copy button under the answer and paste it into Markdown to PDF, which gives you margins, text size and styles for a polished document. The guide to saving an AI answer as a PDF walks through it, including how to keep tables and maths intact.

Copying works for chats you have open now. For a chat you can no longer find in the sidebar, or one that was very long, the export is quicker than scrolling and copying.

Settings in the print window

Setting	What to choose
Destination or printer	Save as PDF (Chrome, Edge, Firefox), PDF menu, Save as PDF (Safari on a Mac), or Microsoft Print to PDF
Headers and footers	Off, so the date and web address aren't printed in the margins
Paper size	The same as you picked on the page; Safari sometimes needs it set here as well
Scale	Default. Shrinking to fit makes text small without fixing wide tables

On iPhone and iPad the print window has a share button; choose Save to Files. On Android, pick Save as PDF as the printer and tap the PDF button.

Problems and fixes

The PDF shows the whole web page. The browser's own print menu was used before the chat was ready. Use the Save as PDF button on the page, which prepares the document first.
Images show as [Image]. Exports keep pictures as separate files next to the chats. The PDF marks where each was; the image files are in the ZIP.
An old version of an answer appears. It can't, if you use the export viewer: it follows the branch you last saw. Printing the page shows whichever version is on screen, so check the arrows under an edited message first.
A long code block runs across pages. Blocks that fit on a page are kept together; longer ones have to continue on the next page. Narrow margins in Markdown to PDF help for single answers.

Sources

OpenAI Help Center: Exporting your ChatGPT history and data. how the export is requested
Claude Help Center: How can I export my Claude data?. Settings, Privacy, Export data

Originally published on ThatToolSite.

How to Export Your ChatGPT History and Open It Privately

ThatToolSite — Tue, 20 Oct 2026 16:00:02 +0000

ChatGPT can email you a ZIP of every conversation you've had. Here is how to request it, what's inside, and how to read and search it on your own device.

Drop the ZIP into the ChatGPT and Claude export viewer to search every chat and save any of them as PDF or Markdown. It runs in your browser, so your history is never uploaded.

Open your export

Why export your ChatGPT history

Your chats live on OpenAI's servers, and the app is built for carrying on a conversation, not for finding one from last spring. An export gives you a copy you control. People usually want one for a few reasons:

a backup before deleting chats, closing an account or leaving a job where they used a personal account for work;
finding an answer again with a proper full-text search instead of scrolling the sidebar;
keeping research, drafts or code from many chats in one place, as files that open without ChatGPT;
moving notes into a knowledge app such as Obsidian or Notion.

The export is the only official way to get everything at once. Copying chats one by one works for a handful, not for hundreds.

Step 1: request the export from ChatGPT

Open settings. Sign in to ChatGPT, click your profile picture or name, and choose Settings.
Go to Data controls. Under Export data, choose Export, then confirm.
Wait for the email. OpenAI sends a download link when the file is ready. It is often quick, but OpenAI says it can take up to 7 days.
Download within 24 hours. The link expires 24 hours after you receive it, and you need to be signed in to the same account to use it.

Settings exports are available on Free, Plus and Pro accounts and on eligible Edu workspaces. On ChatGPT Business and Enterprise workspaces the option isn't there; the workspace owner handles data requests. If you can't sign in at all, OpenAI's Privacy Portal has a separate “Download my data” request.

Step 2: know what's inside the ZIP

The download is a single ZIP file. Inside you'll usually find:

File	What it holds
conversations.json	Every chat with every message, as data. Large exports split it into conversations-000.json, conversations-001.json and so on.
chat.html	A web page that shows your chats. It loads the whole history at once, which can be very slow for a long one.
user.json	Basic account details.
message_feedback.json	The thumbs up and down you gave answers.
shared_conversations.json	Chats you shared with a public link.
Image files	Pictures you uploaded or generated, referenced from the chats.

The conversations file is written for programs. Each chat is a tree of message nodes rather than a simple list, because every time you edit a prompt or regenerate an answer ChatGPT keeps the old version as a separate branch. A shortened chat looks like this:

{
  "title": "Lisbon trip on a budget",
  "create_time": 1736935200.12,
  "current_node": "a2",
  "mapping": {
    "u1": { "parent": "root", "children": ["a1"],
            "message": { "author": { "role": "user" },
                         "content": { "content_type": "text",
                                      "parts": ["Plan 3 days in Lisbon."] } } },
    "a1": { "parent": "u1", "children": ["u2"], "message": { ... } }
  }
}

current_node marks the last message you were looking at. Reading the chat as you saw it means starting there and following each parent back to the first message. A plain JSON viewer can show you the tree, but not the conversation.

Step 3: open it without uploading it anywhere

Many “ChatGPT export viewer” websites ask you to upload the ZIP to their server. That file holds every conversation you've had, including anything personal or confidential you typed. Uploading it means trusting a stranger's server with all of it. A viewer that runs in the browser reads the file on your own device instead.

Open the export viewer. Go to the ChatGPT and Claude export viewer.
Drop the ZIP as it is. No need to unzip it. Exports of hundreds of megabytes are read in pieces, with progress shown.
Search or browse. Search looks through every title and message. Put a phrase in quotes to match it exactly.
Open a chat. It's shown as it appeared in the app: the branch you last saw, with tables, code and formulas drawn properly.

You can check that nothing is uploaded: open your browser's developer tools, switch to the Network tab and drop the file. The page makes no request carrying your data. Tool steps such as code runs, web searches and reasoning summaries are hidden until you tick the option to include them.

Claude works the same way

Claude has its own export: Settings, Privacy, Export data, on the web or in the desktop app (not from the iOS or Android apps). The link also arrives by email and also expires after 24 hours. On Team and Enterprise plans only the organisation's Primary Owner can export.

Claude's ZIP holds a conversations.json too, but each chat is a simple list of messages with a sender, a time and content blocks for text, thinking and tool use. The same viewer opens both, and you can drop a ChatGPT export and a Claude export together to search all of your chats in one list.

Keeping a usable archive

The raw JSON is a faithful backup, but you can't read it. Keep the original ZIP, and next to it a readable copy:

Markdown files. Download all as Markdown gives one file per chat, named by date and title, such as 2025-01-15-lisbon-trip-on-a-budget.md, plus an index.md that links to every chat. Markdown opens in any text editor and in note apps.
PDFs for the chats that matter. A PDF is the easiest thing to send to someone or attach to a record. The guide to saving a chat as PDF covers the options.
Somewhere private. Treat the export like a diary: store it on an encrypted drive or in a private folder, not a shared one.

Request a new export now and then. Each one is a full snapshot, so the newest replaces the old one.

Common mistakes

Letting the link expire. After 24 hours it stops working and you have to request the export again, which means waiting for another email.
Opening the export in a spreadsheet. Excel and Google Sheets can't turn the nested message tree into rows, so you get one cell full of text or an error.
Expecting deleted chats. The export contains the chats in your account when it was made. Chats you deleted before requesting it aren't included.
Dropping the wrong file. If you unzipped the export, drop conversations.json (or all the numbered conversations files together), not user.json or chat.html.

Sources

OpenAI Help Center: Exporting your ChatGPT history and data. Data controls, Export data; 24-hour link; eligible plans
Claude Help Center: How can I export my Claude data?. Settings, Privacy, Export data; 24-hour link; supported apps

Originally published on ThatToolSite.

How to Save a ChatGPT, Claude or Gemini Answer as a PDF

ThatToolSite — Tue, 20 Oct 2026 00:00:06 +0000

Printing the chat page gives you sidebars, cut-off tables and broken code. Copy the answer as Markdown, lay it out as a document, then save it as a PDF.

Markdown to PDF turns a pasted ChatGPT, Claude or Gemini answer into a clean, paginated PDF with real text, tables, code and maths. Nothing is uploaded.

Make a PDF

Why printing the chat page goes wrong

Pressing Ctrl+P on a chat prints the web app, not the answer. You get the sidebar, the message box and every earlier message. Wide tables and long code lines are cut off at the page edge because the chat lets them scroll sideways, and a dark theme can come out as grey text on black. The page was built for scrolling, not for paper.

The reliable route is to take the answer out of the chat as Markdown, which every assistant writes underneath, and lay it out as a document. It takes under a minute and works the same for all three assistants.

Step 1: copy the answer, ideally as Markdown

ChatGPT, Claude and Gemini each have a copy button under every answer. Depending on the app and its version, it copies either the Markdown source or formatted text. Markdown keeps the most: headings, lists, tables, code blocks and maths all survive. If you only get formatted text, headings and lists usually still come through, but tables may not.

You can always ask: “Give me that answer as Markdown in a code block.” The assistant then shows the raw source, and copying the code block gives you exactly that.

Step 2: lay it out and save it as a PDF

Paste into Markdown to PDF. The preview shows the pages as they will print.
Choose the page. A4 or Letter, narrow, normal or wide margins, a text size, and the Clean, Serif or Dark style.
Press Save as PDF. Your browser's print window opens with only the document in it.
Pick Save as PDF as the destination. Untick Headers and footers so the date and web address aren't printed, then save.

The PDF is made by the browser's own print engine from real text, so you can select, search and copy it later. The file is named after the first heading of the answer.

What each assistant offers itself

Assistant	Built-in option	Good for
Gemini	Share & export, then Export to Docs creates a Google Doc. From Docs, File, Download, PDF.	One answer, if you already use Google Docs
ChatGPT	Settings, Data controls, Export sends a download link for a ZIP of your whole history.	Backing up every chat, not printing one answer
Claude	Settings, Privacy, Export data emails a download link to your chats and account data. Share creates a link to a snapshot of the chat.	Backups and sharing a link, not a PDF

None of the three has a button that turns a single answer into a PDF, so copying the Markdown is still the most direct way. Browser extensions that save chats exist too, but they ask to read every page you open on the chat site; check what an extension can access before installing it for private conversations.

Keeping tables, code and maths intact

Maths. ChatGPT often writes formulas with $ … $ and \[ … \] instead of dollar signs, which many Markdown tools show as plain backslashes:

The area of a circle is \(A = \pi r^2\).

\[
E = mc^2
\]

Markdown to PDF converts these to $A = \pi r^2$ and a $$ block before drawing them, so both formulas appear typeset. A price written as \$5 stays a dollar sign.

Tables and code. Rows of a table, code blocks, diagrams and formulas are kept together on one page where they fit, and headings stay with the paragraph after them. A table longer than a page continues on the next one with its header row repeated. For a wide table, pick narrow margins and a smaller text size.

Diagrams. Mermaid diagrams in the answer are drawn and embedded as vector graphics, so they stay sharp when zoomed.

Common problems and fixes

The PDF shows a date and a web address. Those are the browser's headers and footers. Untick them in the print window; the browser remembers the choice.
Asterisks and pound signs everywhere. The text was pasted somewhere that doesn't read Markdown. Paste it into a Markdown tool, such as the Markdown viewer, instead.
The table came through as lines of text. The copy gave formatted text without the table. Ask the assistant for the table in Markdown and copy again.
A download button doesn't appear. The PDF is saved from the print window. Choose Save as PDF (or Microsoft Print to PDF on Windows) as the printer.

Sources

Gemini Apps Help: Export responses from Gemini Apps. Share & export, Export to Docs
OpenAI Help Center: Exporting your ChatGPT history and data. Settings, Data controls, Export
Claude Help Center: Export your Claude data. Settings, Privacy, Export data

Originally published on ThatToolSite.

How to Copy a ChatGPT Table into Excel or Google Sheets

ThatToolSite — Mon, 19 Oct 2026 16:08:10 +0000

Copy the table you can see, not its Markdown, and it usually pastes into columns. When it lands in one column or the numbers come out wrong, these are the fixes.

Markdown table to Excel takes a whole ChatGPT, Claude or Gemini answer, finds the tables in it and gives you an .xlsx or .csv file with every value in its own cell. It runs in your browser.

Convert a table to Excel

The quick way: copy the table you can see

Select the finished table in the chat window with your mouse, from the first header cell to the last cell, and copy it. Click cell A1 in Excel or Google Sheets and paste. When the browser copies a table that is on screen, it puts a real table on the clipboard, so the spreadsheet usually keeps the columns.

Check two things before you rely on it: that every row landed in the right columns, and that numbers are numbers. Click a price cell; if the formula bar shows $24.50 as text, or the cell has a small green triangle in Excel, the values came across as text. The sections below fix both.

Why the table sometimes lands in one column

AI assistants write tables in Markdown and turn them into a table on screen. The copy button under an answer may give you that Markdown source instead of the table, depending on the app and its version, and so does copying from a code block or a text file. Markdown looks like this:

| Item | SKU | Qty | Unit price | Ordered |
|:--|:--:|--:|--:|--|
| Desk lamp | 00412 | 2 | $24.50 | 2026-09-14 |
| **USB-C cable** | 00977 | 10 | $6.99 | 14/09/2026 |
| Monitor arm \| steel | 01230 | 1 | $1,299.00 | Sep 30, 2026 |

A spreadsheet has no idea that the | characters separate cells. Each line goes into column A as one long piece of text, and the |:--|:--:| line comes along as an extra row. You can split it inside the spreadsheet, or convert the Markdown first.

Convert the Markdown instead of splitting it

Copy the whole answer. Use the copy button, or select everything. Text before and after the table doesn't matter.
Paste it into Markdown table to Excel. It lists every table it finds, with a preview of the cells.
Download, or copy and paste. Download Excel (.xlsx) gives one sheet per table. Copy for Excel copies tab-separated cells, which Excel and Google Sheets both split into columns when you paste.

This is what the converter does with the sample table above:

Cell in the Markdown	In the spreadsheet
USB-C cable	USB-C cable (the bold markers are removed)
Monitor arm \\	steel
00412	Text 00412, so the leading zeros stay
$1,299.00	The number 1299, formatted as $1,299.00
2026-09-14, 14/09/2026, Sep 30, 2026	Real dates. 14/09 can only be day first, because there is no month 14

The |:--| alignment row is dropped. A date such as 03/04/2024, which could be 3 April or 4 March, is left as text so that it can't silently change meaning.

Already pasted into one column? Fix it in Excel

Select column A. Only the pasted rows need to be selected.
Open Data, then Text to Columns. Choose Delimited, then Next.
Tick Other and type a pipe (|). Untick Tab and Space. The preview shows the columns appear.
Set ID columns to Text. In the last step, click a column such as SKU in the preview and choose Text, so 00412 isn't turned into 412. Then Finish.
Tidy up. Delete the row of dashes, and the empty first and last columns that the outer pipes create. Remove ** and other Markdown marks with Find and Replace.

Fix it in Google Sheets

Select the pasted column, open Data, choose Split text to columns, and set the separator to Custom with a |. Right after pasting, the paste options next to the cells also offer Split text to columns. Then delete the dashes row and the empty edge columns, as in Excel. Sheets guesses number formats as it splits, so check ID columns with leading zeros afterwards, and format them as plain text before splitting if they matter.

If the table came from Gemini, there may be a shortcut: Google's help says tables in Gemini answers have an Export to Sheets button at the bottom right, which saves the table as a new spreadsheet in your Drive. It isn't offered for tables that contain images.

Leading zeros, dates and long numbers

Leading zeros vanish. Excel treats 00412 as the number 412. Format the column as Text before pasting, or type an apostrophe in front of the value. The converter keeps codes like this as text for you.
Day and month swap. 03/04/2024 is read using your computer's regional settings. If the AI wrote the date the other way round, it changes meaning without warning. Ask the assistant for dates written as 2024-04-03, which every spreadsheet reads the same way.
Long IDs end in zeros. Excel keeps 15 significant digits, so a 16-digit card or order number loses its last digits. Keep such columns as text; the converter leaves numbers longer than 15 digits as text.
Numbers stay as text. Currency signs, spaces used as thousands separators and footnote marks such as 12.5* stop a value being read as a number. Remove the extra characters, or let the converter read prices, percentages and thousands separators.

Need the table in Word or Google Docs rather than a spreadsheet? Paste the answer into the Markdown viewer and press Copy as rich text; it pastes as a real table with borders. To go the other way, from a spreadsheet to a table you can paste back into a chat, use Excel to Markdown.

Sources

Microsoft Support: Keeping leading zeros and large numbers. 15 significant digits, Text format and the apostrophe
Google Docs Editors Help: Split text, remove duplicates, or trim whitespace. Split text to columns in Sheets
Gemini Apps Help: Export responses from Gemini Apps. Export to Sheets for tables

Originally published on ThatToolSite.

How to Create a Markdown Table Without Typing Pipes

ThatToolSite — Mon, 19 Oct 2026 00:00:05 +0000

Type into a grid or paste cells from a spreadsheet and let a generator write the pipes, dashes and escapes. Here is how, plus the rules for when you edit a table by hand.

The Markdown table generator gives you a grid to type in or paste spreadsheet cells into, and writes the Markdown: pipes, dashes, alignment and escapes included.

Open the table generator

Build the table in a grid instead

Open the generator. Type the header row first, then the rows below. Add rows and columns as you go.
Set each column's alignment. Left, centre or right. Right suits numbers, so the digits line up.
Copy the Markdown. Paste it into a README, an issue, a wiki page or a chat message.

Line up columns pads every cell so the raw Markdown is readable in a text editor or a code review. It doesn't change how the table looks once rendered, so untick it if you want the shortest text.

Paste from Excel or Google Sheets

When you copy cells from a spreadsheet, the clipboard holds them as text with a tab between cells and a line break between rows. That is already a table; it just needs converting. Copy this range from a sheet:

Plan	Price	Notes
Free	0	Up to 3 users
Team	12.50	SSO \| audit log

Paste it into the generator's grid, set the Price column to right-aligned, and the Markdown comes out like this:

| Plan | Price | Notes            |
| ---- | ----: | ---------------- |
| Free |     0 | Up to 3 users    |
| Team | 12.50 | SSO \| audit log |

The pipe inside “SSO | audit log” is escaped so it stays in its cell, and the colon in ----: right-aligns the prices. For a whole workbook or a CSV file, use Excel to Markdown, which opens the file, lets you choose the sheet and right-aligns number columns for you.

The syntax, for when you edit by hand

The first line is the header row. Cells are separated by |.
The second line is the delimiter row: one cell of hyphens per column. GitHub's documentation asks for at least three hyphens per cell. A colon sets alignment: :--- left, :---: centre, ---: right.
The header row and the delimiter row must have the same number of cells, or there is no table.
Pipes at the start and end of a row are optional, but they make the table easier to read and edit.
The cells don't have to line up in the source. Padding is for people, not for the renderer.

Pipes, line breaks and other things inside cells

A pipe in a cell. Write it as \|. The GitHub Flavored Markdown spec says this works inside code spans too, so `a \| b` shows as the code a | b. An HTML entity such as | also works in plain text, but inside backticks it is shown literally.

A line break in a cell. A table row must stay on one line, so write <br> where the break goes. GitHub and most renderers show it as a new line inside the cell. The generator does this for you when a pasted cell contains a line break.

Lists, headings and code blocks. These can't go in a cell. Keep cells short, and put longer content below the table with a reference to it.

When a table won't render

No blank line before it. A table directly under a paragraph can be read as part of that paragraph. GitHub's docs ask for a blank line before the table.
Cell counts don't match. Count the cells in the header and the delimiter row. A missing |--- is the usual cause.
Inside a code block. A table indented by four spaces, or inside ` fences, is shown as code. AI answers sometimes do this on purpose so you can copy the source.
An unescaped pipe in a cell. The row gets an extra column. Escape the pipe as \|.
The renderer doesn't support tables. Tables are a GitHub extension, not part of core CommonMark. Check the result in the Markdown viewer, which uses GitHub's rules.

Sources

GitHub Flavored Markdown spec: Tables (extension). Delimiter row, alignment and escaped pipes
GitHub Docs: Organizing information with tables. Blank line before the table, three hyphens per column

Originally published on ThatToolSite.

How to Preview Markdown Online: Tables, Mermaid and Math

ThatToolSite — Sun, 18 Oct 2026 16:11:59 +0000

Open the file or paste the text into a previewer that supports GitHub-style Markdown. Use the test file below to see what any previewer can handle.

The Markdown viewer shows a .md file or pasted Markdown with tables, task lists, footnotes, Mermaid diagrams and maths, as you type. The file stays on your device.

Open the Markdown viewer

Preview a Markdown file in a minute

Open the viewer. It works in any modern browser, on a computer or a phone. Nothing to install.
Open the .md file or paste the text. Choose the file from your device, or paste Markdown, a README or an AI answer into the editor.
Read the preview. It updates as you type. Headings get anchors, so links within the document work.
Export if you need to. Copy it as rich text for Word or Google Docs, download HTML, or save it as a PDF.

Previewing is different from editing on GitHub or in an editor: you see the document the way a reader will, which is when broken tables, unclosed code blocks and diagrams with errors become obvious.

A test file that shows what a previewer supports

Markdown comes in flavours. The core, CommonMark, has no tables at all; tables, task lists, strikethrough and footnotes are GitHub extensions, and Mermaid and maths are extensions on top of those. Paste this file into any previewer to see which parts it understands:

# Preview test

| Feature | Status | Notes |
|---|:---:|---:|
| Table | done | 3 columns |
| Pipe \| in a cell | done | escaped |

- [x] Task list item, done
- [ ] Task list item, open

~~Strikethrough~~ and a footnote.[^1]

Inline maths $a^2 + b^2 = c^2$, and a price: it costs \$5.

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

```mermaid
flowchart LR
    A[Write] --> B[Preview] --> C[Share]
```

```js
console.log("code block");
```

[^1]: Footnotes are a GitHub extension.

In the Markdown viewer, every part renders: a three-column table with a real pipe in one cell, two checkboxes, a footnote link, typeset formulas, a small flowchart and a highlighted code block. The \$5 stays a dollar sign. A previewer that shows rows of pipes, a `mermaid block as code, or dollar signs around raw TeX doesn't support that extension.

What renders where

Where	Tables	Mermaid	Maths
GitHub (files, issues, pull requests, wikis)	Yes	Yes	Yes, with $ and $$
GitLab	Yes	Yes	Yes
VS Code built-in preview	Yes	Yes	Yes, with KaTeX
A plain CommonMark previewer	No	No	No
Markdown viewer on this site	Yes	Yes	Yes, also and \[ \]

Support changes over time, so when a document must look right somewhere specific, test it there. GitHub, for example, documents which Mermaid version it uses: a mermaid block containing only the word info shows it.

Previewing private files

Some online previewers send your text to their server to render it. That matters for internal documentation, contracts written in Markdown, or AI answers containing customer data. A previewer that renders in the browser never needs to. You can check: open your browser's developer tools on the Network tab, paste some text and watch whether a request carries it.

The Markdown viewer here also holds back images linked from other websites until you press Show images, because loading an image tells that website your IP address. Images embedded in the file as data URLs show straight away.

Common problems and fixes

The table shows as lines of pipes. GitHub's documentation asks for a blank line before the table and at least three hyphens in each cell of the dashes row. The header row and the dashes row must also have the same number of cells.
Images are missing. A relative path such as images/chart.png only works next to the folder it points to. Pasting the text alone leaves the images behind.
Prices turned into maths. Two dollar signs on one line can be read as a formula. Write \$5 for a literal dollar sign.
Everything after a code block looks like code. A ` fence wasn't closed. Count the fences; AI answers cut off mid-reply often end inside one.
The diagram shows an error. Open it in the Mermaid editor, which shows the line and the token it didn't expect.

When the preview looks right and you need the HTML for a website or an email template, Markdown to HTML gives you clean markup.

Sources

GitHub Flavored Markdown spec. Tables, task lists, strikethrough and autolinks
GitHub Docs: Organizing information with tables
GitHub Docs: Writing mathematical expressions
GitHub Docs: Creating diagrams
Visual Studio Code: Markdown. Built-in Mermaid and KaTeX
GitLab Docs: GitLab Flavored Markdown

Originally published on ThatToolSite.

How to Render Mermaid Diagrams in Markdown

ThatToolSite — Sun, 18 Oct 2026 00:00:00 +0000

Put the diagram code in a fenced block tagged mermaid. GitHub, GitLab and VS Code draw it; many other places show it as code. Here is how to make it render, and what to do where it can't.

The Mermaid editor draws the diagram as you type, points at the line with an error, and exports PNG or SVG for places that can't render Mermaid. It runs in your browser.

Open the Mermaid editor

How to add a Mermaid diagram to Markdown

Write the diagram code inside a fenced code block and put the word mermaid straight after the opening three backticks. That word is the whole trick: renderers that support Mermaid look for it and draw a diagram instead of showing code.

```mermaid
flowchart TD
    A[Order placed] --> B{Paid?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Send reminder]
```

The first line inside the block names the diagram type: flowchart (or the older graph), sequenceDiagram, classDiagram, gantt, pie, mindmap and others. After it, TD means top to bottom and LR left to right. Square brackets make a box, curly braces a decision diamond, and --> an arrow. Text between -- and the arrow labels it.

Where Mermaid renders, and where it doesn't

Place	Renders Mermaid?
GitHub: Markdown files, issues, pull requests, discussions, wikis	Yes
GitLab	Yes
VS Code's built-in Markdown preview	Yes
The Markdown viewer and Markdown to PDF on this site	Yes
A GitHub Pages site built with Jekyll	Not by itself; the site has to load Mermaid's script
Word, Google Docs, email, most chat apps	No; use an exported image

A renderer can also be behind the latest Mermaid release, so a newer diagram type may show an error on one site and work on another. On GitHub, a mermaid block that contains only the word info shows the version in use.

The errors that stop a diagram rendering

Each of these was typed into the Mermaid editor here (Mermaid 12). The left column fails, the right column draws.

Fails	Works	Why
`start --> end`	`start --> End`	A node called end in lower case ends the flowchart. Capitalise it.
`A[Install (v2)]`	`A["Install (v2)"]`	Brackets inside a label look like shape syntax. Put the label in double quotes.
`A —> B`	`A --> B`	An em dash is not two hyphens. Word processors and some AI answers swap them.
`Flowchart TD`	`flowchart TD`	The diagram type is case-sensitive.
`Alice->>Bob: Hi; how are you?`	`Alice->>Bob: Hi #59; how are you?`	In a sequence diagram a semicolon ends the line. Write it as the code #59;.

Error messages name a line and the token the parser didn't expect. The real mistake is usually on that line or just before it.

Diagrams written by ChatGPT, Claude or Gemini

AI assistants write Mermaid well, but the mistakes above turn up often, especially labels with brackets or colons copied from your own wording. When an answer contains a diagram:

Copy only what is inside the fence, or the whole block including the `mermaid line, not the text around it.
Paste it into the Mermaid editor first. If it draws there, it's valid Mermaid, and any remaining problem is the renderer's version.
Ask the assistant to “quote every node label”. Quoted labels avoid most bracket and punctuation errors.

When the place can't render Mermaid: use an image

For a slide, a Word document or an email, export the diagram. In the Mermaid editor, choose SVG for a sharp vector image that scales to any size, or PNG for apps that don't accept SVG. In a Markdown file on a site without Mermaid support, link the image and keep the source next to it:

`markdown

Keeping the .mmd source means the next person can change the diagram instead of redrawing it. To check how the whole document looks with the diagram in place, paste it into the Markdown viewer.

Sources

GitHub Docs: Creating diagrams. Where diagrams render, and the info block
Mermaid: Flowchart syntax. The lowercase end warning and quoted text
Visual Studio Code: Markdown. Mermaid in the built-in preview
GitLab Docs: GitLab Flavored Markdown

Originally published on ThatToolSite.

How to Convert JSON to TypeScript Interfaces

ThatToolSite — Sat, 17 Oct 2026 16:10:23 +0000

Paste a real sample and generate the interfaces, then check the few things a generator can't know from the data: optional fields, nulls, empty arrays and dates.

JSON to TypeScript turns sample JSON into interfaces or type aliases, merges every record so optional fields are found, and runs in your browser, so real API responses stay private.

Convert JSON to TypeScript

Generate interfaces from a sample

Get a real response. Copy it from the browser's Network tab, an API client or a log. Real data beats a hand-written example.
Paste it and name the root type. Here the root is called Order. Nested objects get names from their keys.
Pick interface or type, and the options. Export, readonly, and whether fields that are sometimes null should also be optional.
Copy the result into a .ts file. Then fix the few things a generator can't know, below.

For this order:

{
  "orderId": "A-1001",
  "customer": { "name": "Ada", "vip": true },
  "lines": [
    { "sku": "A1", "qty": 2, "price": 4.5 },
    { "sku": "B7", "qty": 1, "price": 12, "discount": 0.1 }
  ],
  "placedAt": "2026-10-01T09:30:00Z",
  "notes": null,
  "1st-choice": "red"
}

the generator gives:

export interface Order {
  orderId: string;
  customer: Customer;
  lines: Line[];
  placedAt: string;
  notes: null;
  "1st-choice": string;
}

export interface Customer {
  name: string;
  vip: boolean;
}

export interface Line {
  sku: string;
  qty: number;
  price: number;
  discount?: number;
}

The array lines got an interface called Line, the singular of the key. Because only the second line has a discount, discount is optional. The key 1st-choice is quoted, since it isn't a valid identifier.

Why one sample isn't enough

A generator can only describe the data it sees. In the order above, notes is typed as null, because that's the only value it ever had. In real use it is probably string | null. Give the generator more than one record, and it merges them:

[
  { "id": 1, "name": "Ada", "email": "ada@example.com", "manager": null },
  { "id": 2, "name": "Linus", "manager": 1, "last-login": "2026-10-01T09:30:00Z" }
]

export type User = UserItem[];

export interface UserItem {
  id: number;
  name: string;
  email?: string;
  manager: number | null;
  "last-login"?: string;
}

Now email and last-login are optional, because one record lacks each, and manager is number | null. Paste a list of records, or several responses wrapped in [ ], to get the same effect.

Nulls, empty arrays, mixed values and dates

In the JSON	Generated type	What to do
`"notes": null`	`null`	Replace with the real type, such as string \| null
`"items": []`	`unknown[]`	Add a sample with items, or write the item type yourself
`[1, "two", null]`	`(string \	number \
{% raw %}`"2026-10-01T09:30:00Z"`	`string`	JSON has no date type. Convert with new Date() after parsing
`12345678901234567890`	`number`	JavaScript rounds this. Ask the API for a string

unknown[] is deliberate: it compiles, but TypeScript makes you check an item before using it, unlike any[], which silently allows anything.

interface or type?

For object shapes like these, both work and mean almost the same. The TypeScript handbook's advice is to use interface until you need a feature only type has, such as unions of different shapes. One practical difference: an interface can be reopened and extended by another declaration with the same name, a type alias can't. If your codebase already uses one style, match it; the generator offers both.

Types don't check the data at runtime

JSON.parse returns any. Writing const order: Order = JSON.parse(text) tells the compiler to trust you; nothing checks that the response really has an orderId. If the API changes, the error shows up later, somewhere else.

For data from outside your program, check it once at the edge: a small type guard that tests the fields you rely on, or a schema library such as Zod that validates and gives you the type in one step. The generated interfaces are still useful as the starting point for that schema.

If the sample won't paste because it isn't valid JSON, which is common with JSON copied from AI answers, run it through the JSON validator first.

Sources

TypeScript Handbook: Everyday Types. Differences between type aliases and interfaces, optional properties and unions

Originally published on ThatToolSite.

How to Compare Two JSON Files (Ignoring Key Order)

ThatToolSite — Fri, 16 Oct 2026 16:00:03 +0000

JSON diff compares two JSON documents by their data, ignoring key order and formatting, and lists every change by path. Both documents stay in your browser.

Compare JSON

Why a text diff gives the wrong answer

A JSON object is, in the words of the standard, an unordered collection of names and values. These two documents hold exactly the same data:

{"id": 7, "name": "Ada", "tags": ["admin", "editor"], "plan": "pro"}
{"tags": ["admin", "editor"], "name": "Ada", "plan": "pro", "id": 7}

A text diff compares characters, so it marks the whole line as changed. Pretty-printed, every line would differ. Real changes hide among fake ones, and a reformatted file looks completely rewritten. Comparing by structure fixes this: each value is matched by its path, such as $.plan or $.items[2].price, and only real changes are reported. JSON diff says “No differences” for the pair above.

Compare two JSON files by structure

Paste or open the two versions. The old one on the left, the new one on the right. Both must be valid JSON.
Decide how arrays should be compared. Leave order on for ordered lists; tick Ignore the order of array items for sets.
Read the list of changes. Each line shows the path, the old value and the new value. Copy the summary for a ticket or a review.

If a file won't parse, fix it first in the JSON validator, which shows the line and column of the problem.

Arrays: an ordered list or a set?

Key order never matters in JSON, but array order can. Take document A from above and this new version, where the plan changed and the tags were listed the other way round:

{"plan": "team", "tags": ["editor", "admin"], "name": "Ada", "id": 7}

Setting	JSON diff reports
Order matters (default)	3 differences: $.tags[0] “admin” removed, $.tags[1] “admin” added, $.plan “pro” → “team”
Ignore the order of array items	1 difference: $.plan “pro” → “team”

Both answers are right; they answer different questions. Tags, permissions and IDs are usually sets, so ignore order. Steps of a process, ranked results or the lines of an order are lists, so keep it. For a list of records that should be matched by an id field, sort both arrays by that field first, then compare with order on.

Is 1 the same as "1" or 1.0?

JSON diff compares values by type and by numeric value. That catches the changes that actually break programs, while ignoring ones that don't:

Old	New	Reported?
"id": 1	"id": "1"	Yes: a number became a string
"zip": "02134"	"zip": 2134	Yes: and the leading zero is lost
"total": 31.5	"total": 31.50	No: the same number written differently
12345678901234567890	12345678901234567891	Yes: compared exactly, not rounded

The last row matters for IDs. Many JavaScript-based tools round both numbers to the same value and call them equal.

Comparing JSON on the command line

With jq installed, you can sort keys and then use an ordinary diff:

diff <(jq -S . old.json) <(jq -S . new.json)

-S sorts the keys of every object. It does not sort arrays, so reordered arrays still show up as changes. Sort a list of records by a field with jq 'sort_by(.id)' before comparing. In Python, json.load(a) == json.load(b) answers yes or no, ignoring key order, but doesn't say what changed.

Timestamps, IDs and other noise

Two API responses often differ in fields that change on every call: updatedAt, request IDs, tokens. They drown out the changes you care about. Remove them from both documents before comparing, for example with jq 'del(.updatedAt, .requestId)', or by deleting the lines by hand in a copy.

For comparing code, config written as YAML or any other text where order and whitespace matter, use the diff checker instead.

Sources

RFC 8259, section 1. An object is an unordered collection of name/value pairs
jq manual. --sort-keys / -S sorts the fields of each object

Originally published on ThatToolSite.

What Is Base64? How Base64 Encoding Works

ThatToolSite — Thu, 15 Oct 2026 16:04:36 +0000

Paste text or Base64 into Base64 encode and decode, or drop in an image or file to get its Base64 or a data URI. It runs in your browser, so nothing you paste is sent anywhere.

Encode or decode Base64

What is Base64? The short answer

Base64 is a way of writing any data, such as an image, a PDF or text in any language, using only 64 safe characters: A to Z, a to z, 0 to 9, plus + and /. It is defined in RFC 4648, the internet standard for it.

It exists because many systems were built to carry plain text and can damage raw binary data. Email, URLs, JSON and HTTP headers all handle letters and digits reliably. Base64 lets you send a file through them and get the exact same bytes back at the other end.

“Hi!” in Base64 is SGkh

How Base64 encoding works

Computers store data as bytes of 8 bits. Base64 takes 3 bytes at a time (24 bits) and splits them into 4 groups of 6 bits. Six bits can hold a number from 0 to 63, and each number maps to one character:

Values	Characters
0 to 25	A to Z
26 to 51	a to z
52 to 61	0 to 9
62	+
63	/

Encoding “Hi!” step by step:

Step	Result
Characters	H, i, !
Bytes	72, 105, 33
In binary	01001000 01101001 00100001
Regrouped in sixes	010010 000110 100100 100001
As numbers	18, 6, 36, 33
As characters	S, G, k, h

Decoding runs the same steps backwards, which is why Base64 always gives back exactly what went in.

What the = signs at the end mean

When the data isn’t a multiple of 3 bytes, the last group is short. Base64 fills the gap with = as padding, so the output is always a multiple of 4 characters:

Input	Bytes	Base64
f	1	Zg==
fo	2	Zm8=
foo	3	Zm9v
foob	4	Zm9vYg==
foobar	6	Zm9vYmFy

These are the test values from RFC 4648 itself. Two = signs mean the last group held one byte, one = means two bytes, none means three.

How much bigger Base64 makes a file

Every 3 bytes become 4 characters, so Base64 is about a third larger than the original:

Base64 size ≈ original size × 4 ÷ 3

Original	As Base64
30 KB icon	about 40 KB
300 KB photo	about 400 KB
3 MB PDF	about 4 MB

Email adds a little more, because MIME, the email format, breaks Base64 into lines of at most 76 characters. That is one reason a 20 MB attachment can push an email over a 25 MB limit.

Where you see Base64

Email attachments. Files attached to emails travel as Base64 inside the message.
Data URIs. A small image can be written straight into HTML or CSS as data:image/png;base64,... instead of a separate file.
JSON APIs. JSON has no binary type, so files and images are often sent as Base64 strings.
Login headers. HTTP Basic authentication sends “username:password” in Base64.
JSON Web Tokens. The three parts of a JWT are base64url-encoded; the JWT decoder reads them.

Base64url, the URL-safe version

The + and / characters have special meanings in URLs and file names. RFC 4648 defines a second alphabet, base64url, that swaps them out:

	Base64	Base64url
Value 62	+	- (minus)
Value 63	/	_ (underscore)
Padding	=	Often left off

If a decoder rejects a string full of - and _, it is probably base64url. Swap them back to + and /, add = until the length is a multiple of 4, and it decodes.

When to put an image in Base64

A data URI puts the whole image inside the HTML or CSS:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

It suits some jobs and not others:

Good for small icons, an email signature logo, or a single HTML file that has to work offline with no separate image files.
Bad for photos and large images. They become a third bigger, can’t be cached separately from the page, and make the HTML slow to load and hard to edit.

The Base64 tool turns an image into a ready-made data URI. If the image is large, make it smaller first with compress image.

Base64, hex and Base32 compared

RFC 4648 defines three related encodings. They all turn bytes into text; they differ in size and alphabet:

Encoding	Characters used	Size versus the original	“Hi!” becomes
Base16 (hex)	0 to 9, A to F	2 times	486921
Base32	A to Z, 2 to 7	1.6 times	JBUSC===
Base64	A to Z, a to z, 0 to 9, + and /	1.33 times	SGkh

Hex is easiest to read byte by byte, which is why hashes and colours use it. Base32 avoids lowercase letters and look-alike digits, so it suits codes people type by hand. Base64 is the most compact of the three, which is why it is the usual choice for files.

Base64 isn’t encryption

Anyone can decode Base64; there is no key. A password or API key “hidden” in Base64 is as readable as plain text to anyone who sees it. HTTP Basic authentication is only safe over HTTPS for this reason, and a JWT’s contents can be read by anyone who has the token.

Use Base64 to carry data safely through text-only systems. Use real encryption to keep it secret.

Encoding and decoding Base64

In a terminal on Mac or Linux:

echo -n 'Hi!' | base64        # SGkh
echo 'SGkh' | base64 --decode  # Hi!

In JavaScript, for plain English text:

btoa("Hi!")   // "SGkh"
atob("SGkh")  // "Hi!"

In Python, which works on bytes:

import base64
base64.b64encode(b"Hi!")          # b'SGkh'
base64.b64decode("SGkh")          # b'Hi!'
base64.urlsafe_b64encode(b"Hi?")  # base64url, with - and _

btoa only accepts characters that fit in one byte, so it throws an error on text like “café” or “नमस्ते”. Turn the text into UTF-8 bytes first with TextEncoder, or use a tool that does it for you. The Base64 tool handles any language.

Why Base64 won’t decode

It’s base64url. Contains - or _ instead of + or /.
Missing padding. The length isn’t a multiple of 4. Add = signs.
Extra text at the start. A data URI begins with data:...;base64,; remove everything up to and including the comma.
Line breaks or spaces from an email or a copied block. Most decoders ignore them; strict ones don’t.
Accents and other scripts come out garbled. The bytes decoded correctly but are being read with the wrong character set. Text encoded from UTF-8 has to be read back as UTF-8; a decoder that assumes one byte per character turns “café” into “cafÃ©”.
It decodes to nonsense. The result is a file, not text. Save it with the right extension, such as .png or .pdf, instead of reading it as text.

Sources

RFC 4648: The Base16, Base32, and Base64 Data Encodings. The Base64 alphabet, padding, base64url and the test vectors
RFC 2045: MIME Part One. Base64 in email, lines of at most 76 characters
RFC 2397: The “data” URL scheme. data: URIs
RFC 7617: The “Basic” HTTP Authentication Scheme. user-id:password sent in Base64
MDN: btoa(). Throws on characters outside a single byte

Originally published on ThatToolSite.

How to Fix Common JSON Syntax Errors (Incl. AI Output)

ThatToolSite — Tue, 13 Oct 2026 16:00:06 +0000

The JSON validator shows the exact line and column of the first error, explains it in plain words, and can repair the usual mistakes. Your JSON never leaves the browser.

Check your JSON

Start with the error message, then look one line up

A JSON parser reads from the top and stops at the first character that can't be right. The line and column it reports are where it stopped, which is often just after the real mistake. In this example the comma is missing at the end of line 3:

{
  "id": 1,
  "title": "Report"
  "pages": 12
}

The validator reports line 4, column 3: Missing comma between two properties, because it only knows something is wrong when it meets "pages". So when the reported line looks fine, check the end of the line before it.

The mistakes behind most invalid JSON

JSON is stricter than the JavaScript or Python it resembles. RFC 8259, the JSON standard, allows only double-quoted strings, lowercase true, false and null, and commas only between items.

Mistake	Example	Fix
Trailing comma	["a", "b",]	Delete the comma before ] or }
Single quotes	{'name': 'Ada'}	Use double quotes for keys and strings
Key without quotes	{name: "Ada"}	Quote every key
Comments	// settings	Remove them; JSON has no comments
Python values	True, None	true, null
Curly quotes	“hello”	Straight double quotes, " … "
Numbers JSON can't read	.5, 007, NaN	0.5, "007" (as text, to keep the zeros), null
Missing comma	"a": 1 "b": 2	Add a comma between items

Fixing JSON from ChatGPT, Claude or Gemini

JSON copied from an AI answer has its own typical problems, on top of the ones above. The answer wraps the JSON in a Markdown code fence and a sentence, and models trained on JavaScript slip in trailing commas:

Here is the JSON:
```json
{
  "name": "Ada",
  "tags": ["math", "code",],
}
```

A strict parser stops at the very first character, the H of “Here”. Try to fix in the validator removes the sentence and the fence and deletes the two trailing commas, leaving valid JSON:

{
  "name": "Ada",
  "tags": ["math", "code"]
}

The other common AI problem is a reply that stops mid-way because it reached its length limit. The JSON then ends inside a string or without its closing brackets.

Check what an automatic repair changed

Repairs are guesses, and most are safe: removing a comment or a trailing comma can't change your data. Two kinds need a human look. Take this cut-off reply:

{
  "items": [
    {"id": 1, "name": "Lamp"},
    {"id": 2, "name": "Cab

Try to fix closes the string and the brackets, so the result is valid, and lists both changes. But the second item now has the name "Cab", and whatever came after it is gone. Valid is not the same as complete. Ask the assistant to continue, or to send the JSON again in smaller parts.

The second kind is a missing comma or quote in the middle of a document, where the repair has to decide where one value ends and the next begins. Read the list of changes, and compare the item count with what you expected. If you need to see exactly what moved, put the original and the repaired version side by side in JSON diff once both parse.

Valid JSON that a program still rejects

Duplicate keys. The standard says names should be unique but doesn't forbid repeats. JavaScript and Python keep the last value without warning. The validator flags them.
A byte order mark. The standard says JSON sent between systems must not start with one, and Python's json.loads refuses a string that starts with one. Save the file as UTF-8 without a BOM.
Big numbers. IDs above 9,007,199,254,740,991 lose their last digits in JavaScript. Send them as strings.
Lenient parsers. Python accepts NaN and Infinity by default, so a file can work in one program and fail in another. Check against the standard, not one parser.

Once it's valid, the JSON formatter lays it out with indentation so it's easy to read and review.

Sources

RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format
Python documentation: json. NaN, duplicate keys and the BOM

Originally published on ThatToolSite.

Count Your Tokens Before You Paste: Practical LLM Token Math

ThatToolSite — Tue, 13 Oct 2026 06:10:27 +0000

You paste a long doc into ChatGPT, Claude or Gemini and one of three things happens: the answer ignores the end of it, you hit a context limit, or the API bill is bigger than you expected. All three come down to the same number: tokens.

Here's the practical version of token maths: what a token is, quick estimates you can do in your head, how to count exactly in a few lines of code, and how to work out what a prompt will cost.

What a token actually is

Models don't read characters or words. A tokenizer splits text into chunks from a fixed vocabulary, and the model sees a list of chunk IDs.

Common English words are usually one token: the, house, token.
Longer or rarer words get split: tokenization → token + ization.
Spaces and punctuation count too. A leading space is often part of the next token (world).
Numbers, code, URLs and non-Latin scripts use more tokens per character than plain English.

That last point is the one that surprises people. The same sentence in Hindi, Japanese or Arabic can take two or three times the tokens of its English version, and minified JSON or a stack trace is far denser than prose.

Rules of thumb (good enough for a quick check)

For English prose with OpenAI's current tokenizers:

1 token ≈ 4 characters
1 token ≈ ¾ of a word, so 100 words ≈ 130 tokens
A dense A4 page of text ≈ 600–800 tokens

Other providers publish their own rough ratios, and they differ a little because each model family has its own tokenizer. Treat these as estimates; for anything that matters, count.

Count exactly in code

OpenAI's tokenizers are open source. In JavaScript, js-tiktoken runs anywhere, including the browser:

import { Tiktoken } from "js-tiktoken/lite";
import o200k_base from "js-tiktoken/ranks/o200k_base";

const enc = new Tiktoken(o200k_base);
const text = "Count your tokens before you paste.";
console.log(enc.encode(text).length); // number of tokens

o200k_base is the encoding used by GPT-4o and newer OpenAI models; older ones like GPT-4 and GPT-3.5 use cl100k_base. In Python it's the tiktoken package:

import tiktoken

enc = tiktoken.get_encoding("o200k_base")
print(len(enc.encode("Count your tokens before you paste.")))

For Claude and Gemini the tokenizers aren't published, but both APIs have a token-counting endpoint (Anthropic's count_tokens for messages, Gemini's countTokens) if you need an exact number before sending a request.

What a prompt will cost

Every API price list is per million tokens, and input and output are priced separately:

cost = input_tokens  / 1,000,000 × input_price
     + output_tokens / 1,000,000 × output_price

Worked example with made-up round prices, so the maths is easy to follow: say input costs $2 per million and output $8 per million. A 3,000-token prompt with a 500-token answer costs

3,000 / 1,000,000 × $2 = $0.006
  500 / 1,000,000 × $8 = $0.004
                 total = $0.010 per request

One cent sounds like nothing until it runs 50,000 times a day. Two things people forget:

Chat history is input every time. In a long conversation, every new message resends the whole thread, so input tokens grow with each turn.
Output is usually the expensive side. Asking for "brief" answers or a fixed format often saves more than trimming the prompt.

Five ways to cut tokens without losing quality

Strip HTML and boilerplate before you paste a web page. Navigation, footers and tags are pure token waste.
Minify or trim JSON: drop fields the model doesn't need instead of sending the whole API response.
Summarise old context. Replace the first 20 messages of a long thread with a five-line summary.
Don't repeat instructions in every message; put them once in the system prompt.
Check non-English and code-heavy inputs, because they're where token counts surprise you most.

A quick way to check without writing code

If you just want to paste something and see the count, I made a free token counter that runs entirely in your browser, so nothing you paste is uploaded. It gives exact counts for OpenAI's tokenizers, clearly labelled estimates for Claude and Gemini, and a cost calculator with a dated, editable price table.

What's the biggest token surprise you've run into: a huge chat history, a non-English document, or a JSON blob that ate the whole context window?