Save chatGPT conversation as HTML file
Tags: openai, chatbot, javascript, ai
Published: 2022-12-03 02:10:52

---
title: Save chatGPT conversation as HTML file
published: true
description: This short tutorial will guide you how to download the chatGPT content as HTML, you can use the same on any website.
tags: openai, chatbot, javascript, ai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn6j4om86956ssqhmq08.png
---

I've started to play with [chatGPT](https://openai.com/blog/chatgpt/) from [OpenAI](https://openai.com/) and wanted to save the conversation. My first attempt was using GoFullScreen browser extension but the output file didn't look good. So I've figure out that I create some code that will download the file in HTML format.

TL;DR at the end there is [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet) that you can copy.

So first we need is to grab div with the thread. It's nice that it's ReactJS with styled components so beginning of the component is nice class name the same as component name.

This is the HTML:

![DOM Tree of the ReactJS OpenAI website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71n45y48aon165d2u6yb.png)

NOTE: this is a view of the [DOM](https://en.wikipedia.org/wiki/Document_Object_Model) in Google Dev Tools (to open right click anywhere on the page and in context menu pick "inspect element").

as you can see the class starts with `"ThreadLayout__NodeWrapper"` so to select that element you need this code:

```javascript
const html = document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML;
```

It's attribute selector that match beginning of the text.

Next is grabbing the HTML of that element and converting it to blob. As I never remember how to convert String to blob (you don't have to remember this stuff if you don't do them often). I did a Google Search and found [javascript.info article about blob](https://javascript.info/blob) it looks like this:

```javascript
const blob = new Blob([html], {type: 'text/html'});
```

If you ask why we need blob object, it's because we want to convert that to URL, we could use [Data URI](https://en.wikipedia.org/wiki/Data_URI_scheme), but the content may be too big for a URL. So we need to create what so called Object URL. As with Blob I didn't remembered what was the API, so I've searched "Blob to URL JavaScript" and first result was MDN and [createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). So we need to do:

```javascript
const url = URL.createObjectURL(blob);
```

So now if we inspect the url you will see something like this:

```
blob:https://chat.openai.com/8d0a27ec-d8c6-4a76-9aad-4a0e52b0f9d0
```

It's object created from blob in memory and if you use this browser will use it as reference to HTML content we created.

To download the file there is this trick that I keep using, if you know better way let me know.

```javascript
function download(url, filename) {
   const a = document.createElement('a');
   a.href = url;
   a.download = filename;
   // we need add link to body since some browsers
   // will ignore the download otherwise
   document.body.appendChild(a);
   a.click();
   // you can also use a.remove(); but I prefer older API
   document.body.removeChild(a);
}
```

and we can call this function with blob URL and filename:

```javascript
download(url, 'chatGPT.html');
```

This will create fake link and download the file.

Last think that you want to do is to clean after yourself and  remove blob URL, since after download you don't need it anymore.

```javascript
URL.revokeObjectURL(url);
```

As the end as I promise whole code as Bookmarklet (**NOTE:** the selector doesn't work anymore, but I've created repository on GitHub where I will track working version of the bookmark if you're interested).

```javascript
javascript:(function() {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([document.querySelector('[class^="ThreadLayout__NodeWrapper"]').innerHTML], {type: 'text/html'}));
  a.download = 'chatGPT.html';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(a.href);
})()
```

You need to save this as URL into your bookmarks that you will be able to click and invoke that code. If you want to copy/paste into console, than just remove the `javascript:` at the beginning, it's special protocol that tell the browser to run this code.

As a fun exercise I've tried to make chatGPT create this code for me. [Here is the result](https://jcu.bi/chatself) the solution is almost the same. He only made mistake in CSS selector, but pointing that out and he fixed the code. Above file was download using copy paste of the last snippet.

**EDIT**: look at my comment where you can find a bookmark that make the conversation with chatGPT look better.

**EDIT 2**: I just found that they changed the classes on ChatGPT output, so this doesn't work anymore, I wanted to update the code in the article but it will probably change multiple times in the future, so I've created a repository for the boomark:

{% embed https://github.com/jcubic/chat-gpt %}

When they will change the ReactJS application I will try to update the bookmark. So if the bookmark doesn't work please create an issue on GitHub.

And that's it. If you like this post, you can follow me on twitter at [@jcubic](https://twitter.com/jcubic) and check my [home page](https://jakub.jankiewicz.org/).