Forem: Anton Kovalev

I Got Tired of Messy Text in Directus, So I Built a Typograf Button

Anton Kovalev — Sat, 06 Dec 2025 19:19:54 +0000

I care way too much about how text looks.

If I see straight quotes instead of proper ones, random hyphens where a dash should be, no non-breaking spaces, slightly broken English next to slightly broken anything else — my brain immediately switches from «reading content» to «spot the typo game». And once you notice this stuff in a CMS, you start seeing it everywhere.

We use Directus a lot, and at some point it became obvious:
if the text is stored «ugly» in the admin panel, it will stay ugly everywhere it goes — website, emails, mobile app, PDFs, whatever. Nothing magically fixes it on the way.

So I stopped complaining and wrote a tiny extension.

What I built

The project is called directus-extension-typograf.

It’s a custom interface for Directus that behaves almost like a normal text field, but with one extra thing: a small «typography» button next to it.

You type your content.
You click the button.
The extension runs the value through Typograf using language-specific rules and puts the cleaned-up text back into the same field.

No magic behind the scenes, no hidden pipeline — you see exactly what changed before you hit «Save».

The interface supports different use cases:

single-line input for titles,
multiline textarea for longer copy,
Markdown,
WYSIWYG with HTML.

The important part: HTML/Markdown structure is preserved, only the text nodes are touched.

Why typography in the CMS, not on the frontend

We did try the usual «fix it on render» approach before.

Add a frontend helper, or a filter, or a nice higher-order component, pipe all visible text through it, and call it a day. On paper this sounds fine. In reality it turns into:

one project uses the helper, another one doesn’t;
emails and PDFs get the raw text;
someone copies content straight from Directus into a presentation;
the same field looks different depending on where it’s rendered.

Typography is deterministic. If you run it once at the source of truth — the CMS — you can stop thinking about it later. For editors the mental model is very simple:

«I wrote a paragraph, pressed the button, checked the result, saved it. This is now the final version.»

That’s the whole idea.

What the button actually fixes

Under the hood the extension relies on Typograf, which has rules for a bunch of languages (Russian, English, German and many others).

You can either hard-code a language in the field settings or let the interface pick it automatically from a language code field in your translations.

On the text level it does the things editors usually do manually:

converts straight quotes to proper ones, depending on the language;
turns hyphens into dashes where it makes sense;
adds non-breaking spaces in places that often break layouts;
removes extra spaces and other small garbage.

It’s not trying to be smart about meaning. It just removes the boring mechanical work that doesn’t really deserve human attention.

How it feels for editors

From an editor’s point of view, nothing dramatic changes.

They still see a familiar field, they still type the same way. The only difference is that, from time to time, they hit a small icon, watch the text tidy itself up, maybe tweak a word or two, and then save.

There is no «mysterious backend process» silently rewriting their content later. Everything happens in front of them, at the moment they’re already focused on that text.

For me that was important: the extension should not fight for control, it should just help.

If you want to try it

The code and more details live here:
👉 https://github.com/antonko/directus-extension-typograf

If you’re using Directus, work with multilingual content and get slightly annoyed by crooked quotes and weird spaces — you’ll probably enjoy having a «make it pretty» button right inside the CMS.

And if you run into odd edge cases, especially with Markdown or specific languages, I’m always happy to hear about them and improve the extension.

Blurhash and Directus: How to Add Blurred Image Loading

Anton Kovalev — Mon, 17 Feb 2025 18:32:27 +0000

Blurhash is a compact text-based representation of an image that enables you to display an appealing blurred preview before the original fully loads. This technology not only makes the interface feel more responsive but also provides a more visually engaging waiting experience. Blurhash is an impressive and forward-looking development that offers new possibilities for web and mobile applications.

Implementing Blurhash in Directus has become extremely straightforward thanks to specialized plugins. Whether you're using Next.js, Flutter, or any other framework, the result will be equally compelling. Below, we'll walk through how to integrate this into your project.

Why Use the directus-extension-blurhasher Plugin?

directus-extension-blurhasher automatically generates a Blurhash for images upon upload and stores it in the database. You can choose a detail level (Low, Medium, High), which affects both the length of the Blurhash string and processing speed. The plugin also provides an option for full regeneration: on the next Directus restart, it recalculates the Blurhash for all previously uploaded images. Thanks to automatic migration upon installation, integration is virtually instantaneous.

Installing the Plugin

Through Docker

If you use Docker, add the following snippet to your Dockerfile:

FROM directus/directus:10.10.4

USER root
RUN corepack enable
USER node

RUN pnpm install directus-extension-blurhasher

If you have a Directus fork, just add the dependency:

npm install directus-extension-blurhasher

Then restart Directus. The plugin will automatically perform a migration and be ready for use.

New Settings in Directus

After installing the plugin, two new settings appear in Directus:

Blurhasher Detail Level: Sets the level of detail (Low, Medium, High). Higher levels produce more accurate blur but require more processing time.
Blurhasher Regenerate on Restart: When enabled, instructs Directus to regenerate the Blurhash for all previously uploaded images on the next restart. Once the process is complete, this setting automatically turns off.

The Result

After installing the plugin, any file request (for example, GET https://localhost/files/{id}) returns a new blurhash field containing the generated Blurhash string. You can use this string in any frontend—Next.js, Flutter, or another framework—to display a blurred preview before the original image is fully loaded.

Below is an example API response showing the blurhash field:

{
  "data": {
    "id": "bca3eab2-12c3-49fc-9ae9-ce6c91b81166",
    "storage": "local",
    "filename_disk": "bca3eab2-12c3-49fc-9ae9-ce6c91b81166.jpg",
    "filename_download": "basta_1280х1280.jpg",
    "title": "Basta 1280х1280",
    "type": "image/jpeg",
    "folder": null,
    "uploaded_by": "3810105c-9a6c-41ec-bd43-867b9920bf77",
    "created_on": "2024-12-26T14:46:27.462Z",
    "modified_by": null,
    "modified_on": "2024-12-26T14:46:28.367Z",
    "charset": null,
    "filesize": "916978",
    "width": 1280,
    "height": 1280,
    "duration": null,
    "embed": null,
    "description": null,
    "location": null,
    "tags": null,
    "metadata": {},
    "focal_point_x": null,
    "focal_point_y": null,
    "tus_id": null,
    "tus_data": null,
    "uploaded_on": "2024-12-26T14:46:28.014Z",
    "blurhash": ":sIy@7}Q$fxHENf9n%R-=sX7Nxs.NHsms.R*aLR.Rkn$kBWVoJWXoMoeWBWCoeR+WCo1j?WXWDf6odfkWqoLxGWCWCj[WWj[ayj[s.WVWCoLa}j[jZjZsojtR+jss:a}WVa|"
  }
}

Now that you have the generated blurhash string, all that’s left is to display it on your frontend. There are plenty of libraries that can help you do just that—links and documentation can be found in the official BlurHash repository. Let’s keep pushing the boundaries of UX and make our interfaces as pleasant and responsive as possible!

Conclusion

Be sure to support the project on GitHub and share your integration experiences!