Web BDF/uInt array PIXEL FONT EDITOR

This app is a BDF font/uInt array pixel font editor/creator contained within a single .html file, using vanilla JavaScript.

I wanted to have tool like this since I’ve started dabbling with neopixel matrixes and esp32, and now moving to led panels and BDF fonts, made me want to have a tool like this again so I decided to try Clude AI to create it as a web app, as I professionally work with databases, and frontend development is only one of my hobbies.

While Claude provided core, I’ve also made multiple manual UI and JS tweaks to make sure it can look and work how I envisioned it. The code isn’t the prettiest, but it has gone through a few iterations until I was satisfied with the performance (from my tests it should be able to load fonts containing even 3000 glyphs swiftly).

After all the changes and hours spent on it I thought it would be a shame to keep it for myself and not share it with others, even despite how imperfect it may be.

Is it safe?

The app itself is a single .html file using vanilla JavaScript, it can be ran locally offline using any modern browser. The only external dependency are google fonts used in the UI, which will work fine without them.
The save/autosave function uses browser localStorage (which means it is only saved locally within your browser) to keep editor state as json.
The code is also publicly available in the repo: GitHub - B4rt0/BDF-uInt-array-PIXEL-FONT-EDITOR: Web BDF/uInt array PIXEL FONT EDITOR · GitHub

Features

  • Import and export BDF fonts
  • Import and export .h files (uInt array, only for files created with editor)
  • Create font from scratch
  • Set glyph size and offset
  • Modify existing or Create new glyphs
  • Clone, name, remove glyphs
  • Grid helpers: Center mark and helper lines
  • Copy currently edited glyph as BDF/uInt array
  • Text preview
  • Separate zoom for glyph editor and text preview
  • Save/Autosave editor state using browser’s localStorage
1 Like