Why a 120 Pixel Minimum Height Was Only Half the Fix

The form had a text box that wasn’t there. No border, no height, no placeholder, and no console error. Clicking where it should have been and typing still worked, because the editor, a tool called Tiptap, was running fine. Tiptap is headless, which means it supplies the writing behavior and leaves the visible part to whoever builds the page. An empty editor collapses to a thin sliver nobody can see to click, and a page that reports nothing wrong gives no hint that a writing area is there.

The editor worked. Nothing told a person it was there.

There was no box, no short line inviting someone to write, no useful cursor cue. The page loaded and the editor started. The usual places we check when something is broken were silent.

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

What we had missed was the headless part. 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 lets a page 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, and a person cannot easily click what they cannot see.

Giving it room, then giving it words

The first fix was simple: give it a real footprint. The version we 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 a clear target for a mouse or a finger.

Next was the little message inside an empty box, such as “Write something…”. That message is called a placeholder. We 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 by marking the empty first line and carrying the words the message should show. The styling rule then made 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 silence 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.

Which field is active?

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 to answer a basic question for the person using it: which field is active right now?

The same goes after the first sentence. An editor can accept headings, lists, and paragraphs while still making them look like plain, unspaced words. 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.

“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 was true here. The second was not, and the gap between them was a blank rectangle.

The 120 pixel minimum height fixed only half of it. The placeholder still needed the Placeholder add-on and the styling rule to agree, and either one alone showed nothing and raised no error, which is 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.

A form field that accepts input can still be invisible, and a clean console does not show otherwise. With a headless editor such as Tiptap, check that an empty field has a visible footprint, a placeholder and a clear focus state before calling it done.

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/everyday-ai/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.