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

Source: Dev.to

Why typography matters in Directus

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, missing non‑breaking spaces, or slightly broken English next to slightly broken anything else—my brain immediately switches from reading content to spot the typo game. Once you notice this stuff in a CMS, you start seeing it everywhere.

The directus‑extension‑typograf

We use Directus a lot, and at some point it became obvious that the problem needed a fix. I stopped complaining and wrote a tiny extension 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. When you press the button, Typograf runs 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.

How it works

• 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.

• 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.

Why not “fix it on render”

We tried the usual “fix it on render” approach first: adding a frontend helper, a filter, or a higher‑order component that pipes all visible text through Typograf. On paper this sounds fine, but in reality it turned 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.

Benefits for editors

From an editor’s point of view, nothing dramatic changes. They still see a familiar field and 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.

Installation / Source

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

Feedback

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. If you run into odd edge cases, especially with Markdown or specific languages, I’m happy to hear about them and improve the extension.