A Working Text Editor Had No Visible Box Because One CSS File Was Missing

A Tiptap editor in a form rendered as zero visible space: no box, no border, no height, no placeholder, and no console error. Clicking where it should have been and typing still worked, because Tiptap is headless and supplies the writing behavior without any of the visible part. An empty editor collapses to a thin sliver that nobody can see to click, and a page that reports nothing wrong gives no hint that a writing area is there.

The editor worked. There was simply nothing that told a person it was there.

No box. No short line inviting someone to write. No useful cursor cue. No border. No height that said, “This is a place you can click.” There were no error messages either. The page loaded. The editor started. The usual places I would check when something is broken were quiet.

At first, I treated it like a broken piece of software. I checked whether the page had complained. I checked whether the editor had failed to start. I checked the console, which is the running list of complaints a browser can show. Nothing. That did not fix anything, because there was no failure in the usual sense. The cost was time and patience. I was trying to solve a problem that had already done the one thing it was supposed to do: accept words.

The missed fact was that Tiptap is a headless editor. That sounds more mysterious than it is. It means the tool supplies the writing behavior, but leaves the visible part to the person building the page. Think of buying a kitchen sink with the pipes and drain included, but no counter around it. Water can still go down the drain. It is not yet a place anyone would recognize as a sink.

That choice is not bad. It gives a page a chance to make the editor match the rest of the form instead of dropping in a box that looks borrowed from somewhere else. But it also means an empty editor begins as almost nothing. With no writing inside it, it can shrink to a thin sliver. A person cannot easily click what they cannot see.

The first useful fix was simple: give it a real footprint. The version I landed on used a minimum height of 120 pixels. That is not a magic number. It is just enough room for an empty writing area to look like a place where writing belongs. Even before someone types a word, there is now a clear target for a mouse or a finger.

The next piece was the little message inside an empty box, such as “Write something…”. That message is called a placeholder. I had the styling rule that could show it, but the rule needed a matching signal from the editor. Without that signal, the page had nothing to display. The Placeholder add-on supplied it. The add-on marks an empty first line and carries the words the message should show. The styling rule then makes those words visible.

It was a two-piece lock. The styling without the add-on showed nothing. The add-on without the styling showed nothing. Neither half made a fuss when the other was missing. That quiet failure was the heart of the problem. Nothing crashed, yet the person facing the form still had no reason to think there was a writing space waiting for them.

There was one more small decision. A browser has its own default way of showing that a person has clicked into something. On an empty, almost flat editor, that signal was cramped and easy to miss. Removing that default only makes sense if the surrounding form gets a deliberate focus treatment in return, such as a border or a soft ring. The point is not to make the page prettier. The point is to answer a basic question for the person using it: where am I typing now?

The same principle applies after the first sentence. An editor can accept headings, lists, and paragraphs while still making them look like plain, unspaced words. The writing surface needs some care for readability, not just enough code to let someone type. A minimum height, a visible empty message, a clear focus state, and readable text are part of the product. They are not cosmetic leftovers for later.

This was a useful reminder that “working” has two meanings. One is that the software can do its job. The other is that a person can tell what the job is and begin without being coached. The first meaning was true here. The second was not. The gap between them was a blank rectangle.

The 120 pixel minimum height fixed only half of it. The empty editor now had a footprint, but the placeholder still needed two pieces to agree: the Placeholder add-on marking the empty first line, and the styling rule reading that mark. Either half alone showed nothing and raised no error, which is exactly why the blank rectangle survived a clean console. The editor accepted words from the first click. What it lacked was a way to tell anyone it would.

dxdev LESSON · paste into your AI coding agent
LESSON: A headless editor with no failure mode can still fail the user completely
SOURCE: dxdev.com/blog/2026-02-24_editor-was-working-nobody-could-see-it
WHAT HAPPENED: A Tiptap rich-text editor replaced a plain textarea and functioned correctly, clicking into the empty space and typing worked, but the editor rendered as an invisible empty box: no minimum height, no placeholder text, no visible focus state, and no console errors to point at. The root cause was that Tiptap is a headless editor, meaning it supplies writing behavior but leaves every visible affordance to the page author, and an empty editor with no content can collapse to almost no visible footprint. Placeholder text specifically required two separate pieces working together, a CSS rule and Tiptap's Placeholder extension, and either half alone displayed nothing.
THE RULE: "Works" and "is discoverable" are two different bars. A headless library shifts the entire visible-affordance burden onto the integrator, and a feature that technically functions but gives a first-time user no visual cue that it exists has not actually shipped yet.
CHECK MY CODE, then report PASS or FAIL with file:line for each:
  1. Any headless editor or widget integration missing an explicit minimum height or defined empty-state visual footprint.
  2. Any placeholder-text feature that depends on two separate mechanisms, a styling rule and a library extension or flag, without verifying both are present together.
  3. Any interactive control with no visible focus state, especially one where the browser's default focus outline was removed without a replacement.
THEN PRINT: a table (check, PASS/FAIL, evidence, fix) + a verdict (applies / partially / OUT_OF_SCOPE / no) + the single most important next action.