The Visual Editor

The Visual Editor

Write naturally. Give complex content the structure it deserves.

A publishing editor needs to accommodate more than a few paragraphs. A detailed article might combine an introduction, several levels of headings, quotations, a comparison table, a technical example, and images that need proper descriptions. The challenge is to support all of that without turning the writing process into a page-building exercise.

VerdinCore's visual editor is built for this middle ground: a focused writing surface with the formatting and content tools needed for substantial publications. It is used for both Posts and Pages, so the writing experience remains familiar even when the material serves a different purpose.

Writing stays at the centre

The editing workspace has a deliberate arrangement. The title and excerpt sit above the main content area. A toolbar stays available as you work, while surrounding panels handle publication decisions and content settings. The text itself occupies the centre of the screen.

This separation matters. Choosing a publication status, assigning a topic, or adjusting access is part of publishing, but none of those decisions should interrupt every sentence you write.

The editor is powered by Tiptap 3, with a VerdinCore-specific toolbar and controls for media, links, tables, and embeds. It works directly with formatted content: you do not need to write HTML to create a heading, insert a list, or add an image caption.

((Screenshot from VerdinCore Admin > Edit Post: open a realistic draft titled "Designing a Faster Publishing Workflow". Show the title, excerpt, sticky formatting toolbar, and a well-structured article with an H2 heading, paragraph, bold emphasis, bulleted list, and part of a figure or code block. Keep the left Status/Info sidebar and right actions visible. Capture at approximately 1920 × 1080, with the editor as the visual focus. Hide private content, account information, and internal URLs. Suggested caption: "The VerdinCore editing workspace keeps writing in focus while publishing controls remain close at hand."))

Familiar formatting, without a crowded interface

Most editorial work depends on a relatively small set of reliable building blocks. VerdinCore provides them through straightforward toolbar actions:

Undo and redo are available from the same toolbar. For the usual writing tasks, the controls remain recognizable; for elements that need more decisions, a dedicated panel appears when it is needed.

That distinction is central to the experience. A paragraph should be easy to write. A table should be possible to manage. Neither should require a wall of permanent controls.

Rich content belongs in the article

Different subjects require different forms of explanation. VerdinCore supports those forms without splitting the article into separate editing systems.

Images with a purpose

An image can sit within the body of an article, rather than being limited to the featured image at the top of a Post or Page. The insertion panel accepts an image upload and provides fields for alt text and an optional caption. Existing image elements can have those details edited later.

The distinction is useful: alt text describes an image for accessibility and other contexts where the image is unavailable; a caption gives readers additional context. Neither should be treated as an interchangeable decoration.

When content images are uploaded, VerdinCore's media processing prepares responsive image variants for delivery. The detailed image workflow is covered separately in Images & Media.

((Screenshot from VerdinCore Admin > Edit Post > Insert Image: open the image panel after uploading a demonstration photograph. Show the preview, a meaningful Alt text value such as "Notebook beside a laptop on a wooden desk", and a short optional Caption such as "Planning an editorial workflow". Include a small amount of the article and toolbar behind the panel for context. Capture at approximately 1400 × 850. Hide local file paths and private material. Suggested caption: "Image insertion includes descriptive alt text and an optional caption, directly within the writing workflow."))

Tables for information that needs comparing

Sometimes a paragraph is the wrong format. Product specifications, feature comparisons, or tabular data are easier to understand as rows and columns.

The editor offers a visual grid for inserting a table. Once the cursor is inside a table, the same toolbar control opens table-specific options: adding or deleting rows and columns, merging or splitting cells, changing the header row, and removing the table. There is no need to leave the article to perform these operations.

The editing experience and the public rendering are related but distinct. How a wide table behaves on a narrow screen is determined by the site's presentation styles. We explore the table workflow and embed handling in Tables & Embeds.

Code and embedded media

Technical publications need a clean way to distinguish code from ordinary prose. VerdinCore includes code blocks, allowing an author to place a technical example in the article without pretending it is part of the surrounding paragraph.

For external media, the editor accepts iframe embed code, including supported YouTube embeds. Notably, an embed is represented by its markup inside the editing surface rather than by automatically loading the external player there. The article can contain an embed without the editor becoming a collection of third-party interfaces.

External content still depends on its provider at viewing time. An embed should be used when it adds something the article cannot communicate as effectively on its own.

Small signals that help while writing

The editor updates a word count and an estimated reading time as the content changes. These are modest features, but useful ones: they give the author immediate context about the size of a draft without requiring a separate calculation.

The reading time is an estimate, not a promise about how quickly every reader will finish. Likewise, a word count is information for editorial judgment, not a substitute for that judgment.

Combined with the content-specific side panels, these signals help an editor keep track of both the document and the decisions surrounding it.

From the editing surface to the website

The visual editor is part of a publishing system, not an isolated text box. When the author chooses Save, the editor submits its formatted content with the other Post or Page fields. The server sanitizes that HTML before storing it, while the website's theme determines how the resulting content is presented to readers.

This gives content a consistent authoring format while leaving room for different site designs. The editor does not need to reproduce every detail of the final public layout to make the article understandable and editable.

Publication status, scheduling, access, and related editorial decisions remain separate responsibilities. They are explained in Publishing Workflows, rather than being hidden inside the formatting toolbar.

An editor that supports the work

There is no prize for fitting the greatest number of controls into a toolbar. The more useful question is whether an author can produce a clear, substantial article without fighting the interface.

VerdinCore keeps ordinary writing direct and gives more demanding content its own focused tools. A heading stays a heading. An image can carry a meaningful description. A table can be edited where it appears. Technical examples and external media have a place without taking over the workspace.

The editor should help an author express an idea, not make the author think like a page designer.

That is the goal: enough capability for serious publishing, with as little unnecessary friction as possible.

Continue exploring: Tables & Embeds · Images & Media · Posts & Pages