DEV Community: Guluhehe

Building a chart editor with no backend: storing charts in the browser and exporting a PNG

Guluhehe — Sun, 18 Oct 2026 10:33:37 +0000

RelationCanvas is a relationship chart editor for fiction writers: characters are cards, relationships are labeled arrows. It has no accounts and no database. The server sends the pages and the JavaScript, and it never receives a chart. That decision shaped three parts of the code: saving, PNG export and sharing. Here's how each one works. (It's a Next.js 16 and React 19 app, but none of this depends on the framework.)

The live tool is at RelationCanvas.

One format for everything

A chart is a JSON object wrapped in a small envelope: a format name (relationcanvas), a version number (1) and the chart itself. The chart holds a title, a credit line, a legend toggle, the people (id, name, position, optional picture, note and colour) and the relationships (from, to, and a label that is either a preset or custom text).

The same envelope is used for browser storage, for the downloadable project file, and inside share links. One parser reads all three, so a file can't be accepted in one place and rejected in another. Share links get an extra, stricter key check on top.

Saving to localStorage

Every change is written to localStorage under one key, relationcanvas.chart.v1, with a revision number added to the stored JSON. That sounds like one line of code. The edge cases took most of the work.

Data that won't parse. If the stored value fails validation, the editor copies the raw string to a second key (relationcanvas.chart.v1.backup), starts with an empty chart and shows a notice saying the old data was kept aside. If that backup can't be confirmed, saving is blocked rather than risk overwriting the only copy.

Two tabs. Before each write, the editor reads the stored revision. If it differs from the revision this tab loaded, the write is treated as a conflict, not an overwrite. The editor also listens for the browser's storage event, so when another tab saves, this tab can adopt the newer chart if it has no unsaved changes of its own.

Storage that fails. When a write fails, the editor retries with a delay that starts at one second and doubles up to a 30-second cap. If storage can't be read at all, the notice tells the user to download a project file to keep new work.

Pictures. A character picture is cropped to a square in the browser and stored as a data URL inside the chart. The encoder tries PNG at 256, 192 and 128 pixels, then WebP at quality 0.9, 0.75 and 0.6, and keeps the first result under 120,000 characters. The cap puts a known ceiling on what one picture adds to storage.

The honest limit: clearing site data deletes the chart. The site says so, and the File menu has Download project file and Import project for backups and moving devices.

PNG export without a server

The chart is drawn by a function that returns an SVG string. The same renderer produces the export preview and the read-only share view.

Export takes that SVG, serializes it into a Blob with type image/svg+xml, loads it through an object URL into an image element, and draws the image onto a canvas that has been filled with the theme's background colour. canvas.toBlob produces the PNG, which downloads as relationcanvas.png.

Three details came from things going wrong:

Scale. The user picks 2x or 4x. The dialog shows the final pixel size and the line "Full chart · No watermark" before downloading.
Size limits. If either side would exceed 16,384 pixels, or the total would pass 32,000,000 pixels, export refuses and suggests 2x or moving the characters closer together.
A blank-image check. After drawing, the code reads the top-left pixel. If it doesn't match the background colour, the export reports a failure instead of handing over an empty file.

Sharing without a database

A share link is a URL to /view with the chart in the fragment, after the #. The fragment has three dot-separated parts: a version tag (rc1), the project JSON compressed with the browser's CompressionStream in deflate-raw mode and encoded as base64url, and a base64url SHA-256 digest of the compressed bytes.

Browsers don't send the fragment to the server, so names and labels stay out of request logs.

Two rules keep links usable:

No pictures. Avatars are removed before encoding. The share dialog says "Images aren't included in this link. PNG export keeps them."
2,000 characters, total. The whole URL, not only the fragment, has to fit in 2,000 characters, because a normal Discord message is 2,000 characters and a longer one turns into a text file instead of a link. If the chart is too big, there's no link, and the editor suggests Export PNG and a project file.

The viewer is defensive about what it accepts. It checks the digest before decompressing. It caps decompression at 4,968,766 bytes, which is twice the size of the largest chart the editor can produce (20 people, every field at its limit, 2,484,383 bytes). It then checks the JSON against a fixed list of allowed keys before turning it into a chart. Older links without the digest still open, because a link someone has already posted should keep working.

The /view page is noindex, follow, so shared charts don't end up in search results.

What this design gives up

A chart lives in one browser profile. There's no sync between devices beyond the project file. Share links are read-only snapshots, not collaboration. Large charts can't be shared as links at all. The editor is designed around casts of up to 20 people, and the limits above are sized for that.

If you've built something similar with localStorage, I'd like to know how you handled two tabs editing the same data.

I drafted this article with help from an AI assistant. The technical details come from the project's source code, and I checked them before publishing.

I ran the same 8 searches on 6 search engines to see which ones don't use AI

Guluhehe — Thu, 08 Oct 2026 07:48:52 +0000

If I don't want AI-generated answers on top of my search results, which search engine should I use? I couldn't find a straight answer.

Most articles on this repeat what each company says about itself, so I tested it: same queries, same browser, same day, a screenshot of every result. Below is the setup, the results, and the engines I couldn't test.

The setup

Date: October 6, 2026, one sitting of about 40 minutes.
Browser: Chrome 154 (154.0.8037.98) on a Mac, desktop window at 1366×900, signed out of everything, in a dedicated Chrome profile.
Location: a US exit IP (San Jose, California). A small script checks the IP with two services before the run and refuses to start if either one says it isn't US. It was a proxy, so a datacenter address, not a home connection. That likely played a part in the CAPTCHAs and blocks described below.
Automation: a Playwright script drove a visible Chrome window. For each query it opened the results URL, waited for the network to go quiet plus 8 seconds, then saved a full-page screenshot and the page text. Queries were 4 to 8 seconds apart. If a CAPTCHA appeared, the script paused so a person could solve it. If it stayed blocked, the cell was logged as blocked, not guessed.

The eight queries, locked before the first run:

Type	Query
knowledge	why is the sky blue
how-to	how to remove a stripped screw
health	symptoms of low iron
product	best budget noise cancelling headphones
person	who was Ada Lovelace
news	inflation news
comparison	baking soda vs baking powder
image	golden retriever puppy (image search)

Seven are web searches, and they're the ones the AI results below are counted on. The eighth is an image search, used to check for AI image filters.

What counted as AI: a generated answer, summary or Overview that shows up on its own, an AI chat or assistant panel, or AI-generated images in results. Ranking algorithms, spell check, autocomplete and knowledge panels didn't count. A tab or button that only does something AI-related after you click it is noted, but doesn't count as AI by default.

The results

Engine	Web queries with an AI answer	Notes
DuckDuckGo No-AI (`noai.duckduckgo.com`)	0 of 7	A Duck.ai link stays in the top bar. "AI images: hide" was on by default in image search.
Google with the Web filter (udm=14)	0 of 7	The AI Mode tab is still in the menu. The filter doesn't stick between searches.
Startpage	0 of 7	Results come from Google and Bing. Shopping ads can show on product queries.
SearXNG (`baresearch.org` instance)	0 of 7	Depends on the instance; I only tested this one.
Ecosia	no verdict	1 query loaded, then a Cloudflare challenge on the other 7.
Mojeek	no verdict	HTTP 403 on my test search.

Four with no AI answers (one of them is a workaround)

DuckDuckGo No-AI is a separate address, noai.duckduckgo.com, not a setting on the normal site. DuckDuckGo's help pages say it turns off Search Assist and Duck.ai and filters AI-generated images by default, and that's what I saw: no AI answer on any of the 7 web queries, and the image search had "AI images: hide" switched on. The regular duckduckgo.com can still show Search Assist.

Google with the Web filter also showed no AI Overview on any of the 7 queries. The Web filter is the "Web" option above the results (sometimes under "More"), or udm=14 in the URL. Two catches. Google's own help page says these features "cannot be turned off", so this is a workaround, and it resets on every new search unless you make that URL your default search engine (not tested yet). Also, I didn't run default Google in this round, so I can't say how often these queries get an AI Overview without the filter, only that the filtered page never had one.

Startpage showed no AI answers on any of the 7. It has no index of its own and passes your query to Google and Bing, so of the engines I tested, it's the nearest to Google results without the AI. There's no filter for AI-generated images.

SearXNG is open-source metasearch software that anyone can host, so "SearXNG" really means "one particular instance". On baresearch.org: 0 of 7. Another instance may be configured differently, and public instances go down or rate-limit you.

Two I couldn't test properly

Ecosia: the first query loaded with no AI answer, though there's an "AI Chat" tab in the top menu. Every query after that hit a Cloudflare "are you human" challenge. Ecosia's help pages describe an "AI-free searching" setting and say AI Overviews are only offered in Germany, France, the US and the UK. One query isn't a verdict.

Mojeek returned HTTP 403 on my test search, from both machines I tried. Mojeek runs its own crawler and index, so it's the one I want to retest first.

Two more on my list aren't in this write-up. Brave Search: my testing isn't finished (I still need to check the results page with its AI setting switched off), so I'll report it after the next round. Kagi: even the free trial needs an account, and I didn't sign up.

What surprised me

Bot protection was the biggest obstacle. My first attempt, a headless browser on a server outside the US, was nearly useless: Google, Mojeek and DuckDuckGo all blocked it or refused the connection. Even with a visible browser on a US IP, Google wanted a CAPTCHA on the first query, Ecosia blocked 7 of 8, and Mojeek refused my test search outright. If you try to automate this, you'll need a real browser, a residential connection and someone to solve CAPTCHAs.

"No AI" is mostly about the default, not the product. Two of the four clean results are opt-outs: a special subdomain (DuckDuckGo) or a URL parameter (Google). If you visit the normal homepage, you get the normal experience.

Location matters. From a Singapore IP, Ecosia showed no AI on the one query that loaded, which is expected if AI Overviews aren't offered there. A test from the wrong country can look clean when it isn't.

Limits of this test

One browser (desktop Chrome), one country (US), one day. No Firefox, Edge, Safari or phones yet.
Signed out. Signed-in results may differ.
It's a snapshot. I plan to rerun the same queries once a month.
Brave Search, Ecosia, Mojeek and Kagi need another round before I'd call any of them.

Where the screenshots live

I keep every screenshot, dated, plus a comparison table on a small site I run called Web Without AI. No ads or affiliate links there. The test rules are the ones in this post, and I'll update the table after each monthly rerun.

If you use a search engine I didn't cover, or you see different results in your country, tell me in the comments and I'll add it to the next round.

I drafted this article with help from an AI assistant. The test runs, screenshots and numbers come from my own test log, and I checked them before publishing.

I made Web Without AI to keep these results updated, including mobile workarounds.