Writing for the Web should not force a choice between a basic rich-text field and a heavyweight page builder tied to a particular technology. Vanilla HTML Designer, or VHD, offers a middle path: a lightweight, modular and embeddable visual editor written in native JavaScript.

The project is intended for developers, website publishers, CMS platforms and business applications that want to provide visual composition without losing control of their data.

Between a text editor and a page builder

A traditional WYSIWYG editor works well for writing an article, but quickly reaches its limits when content needs multiple columns, reusable components or precise structural control. At the other end of the spectrum, a complete page builder can offer extensive capabilities at the cost of heavier integration and content that may be difficult to reuse elsewhere.

VHD was designed to occupy the space between those approaches. The author works in a visual interface while the host application retains a structured JSON representation of the document. The content can then be exported as HTML for public display.

JSON remains the editable source and HTML becomes the publishable result. An application can save the project, reopen it without losing its structure, and produce a standalone HTML version whenever required.

Structured page composition

A document is organised into sections, columns and content blocks. Each section can contain between one and six responsive columns. Authors add and rearrange the components they need inside those columns.

VHD includes text, headings, images, buttons, dividers, spacers, editable tables and secure Free HTML. Images can be used as standalone blocks or inserted directly into a text area.

Sections and blocks can be reordered directly. An add button below the last item makes it easy to continue building the document without returning to the top of the interface.

Editorial formatting rather than decoration alone

The two-row toolbar keeps essential writing commands visible. It remains available while a long document scrolls and supports bold, italic, underline, strike-through, superscript, subscript, colours, links, alignment and letter spacing.

Paragraph commands cover headings, quotations, code, lists, indentation and line height. Several list styles are available, and existing dashes can be detected and removed when plain text is converted into a list.

VHD also provides more editorial features, including configurable drop caps. Their height, colour and spacing can be adjusted. Clear Formatting acts on the selection and returns plain text even when it contains headings, quotations, code or lists.

Connect an existing media library

The editor does not impose its own media manager. A host application can connect an existing gallery through a URL or an asynchronous callback. VHD receives the image address, alternative text and title.

Images include controls for width, alignment, borders, rounded corners and captions. This approach lets an application reuse its media library instead of duplicating file management inside the editor.

Tables that remain genuinely editable

The Table component is more than a fixed grid. Authors can edit cells directly, add or remove rows and columns, resize columns, select rectangular cell ranges and merge cells.

Borders, spacing, colours and alignment can be configured. The output remains portable HTML table markup, while the information required for future editing stays in the JSON project.

Free HTML with safeguards

Some integrations require a specific HTML fragment. The Free HTML component supports that need without turning the editor into an arbitrary execution environment.

Content is sanitised before use. Scripts, event handlers, forms, unsafe protocols, embedded styles and risky positioning rules are removed. Unapproved iframe sources are rejected as well. A host application can hide the component entirely when custom HTML is not appropriate.

Consistent undo and redo

Undo and Redo cover text changes, component properties, table operations and custom actions. A quotation adjustment, colour change, move or insertion can therefore be reversed as predictably as ordinary typing.

Designed to be embedded

VHD depends on neither React, Vue, Angular nor jQuery. Its source consists of native JavaScript modules and requires no compilation step.

<link rel="stylesheet" href="/Vanilla-HTML-Designer/src/html-designer.css">
<div id="htmlDesigner"></div>

<script type="module">
import HtmlDesigner from '/Vanilla-HTML-Designer/src/HtmlDesigner.js';
import en from '/Vanilla-HTML-Designer/src/lang/en.js';

const editor = new HtmlDesigner('#htmlDesigner', {
    translations: en
});
</script>

The API can load a JSON project, import existing HTML, return editable data or export final HTML. Toolbar commands and available content types can be filtered to suit the host application. A plugin system can also register new actions, properties and block families without modifying the editor core.

Who is VHD for?

  • A CMS that needs more than a conventional rich-text field.
  • A back office used to produce structured pages or records.
  • A blog that needs columns, tables, quotations and media.
  • A business application that needs a controllable JSON model.
  • A project that does not want to adopt a framework solely for its editor.

VHD does not aim to become a complete website-building service with hosting, themes and publishing. It provides the editing component that a host application can adapt to its own data model, media library, permissions and saving workflow.

An open project that can already be tested

Vanilla HTML Designer is distributed under the GNU Affero General Public License v3.0. Its interface is available in English and French. The public demonstration makes it possible to explore layouts, typography, images, quotations and tables immediately.

The project was initiated, directed and validated by François Milhiet. Its design and development are carried out in collaboration with OpenAI's ChatGPT, while functional direction, architectural decisions, real-world testing and final validation remain the responsibility of the project's initiator.