Introduction

In a previous post, I introduced a DOCX → TEI/XML Converter — a browser-based tool that converts Word documents to TEI/XML using the TEI Garage API.

After publishing, I received feedback from users requesting the ability to visually verify that the converted tags function as expected. With only the syntax-highlighted XML view, it was difficult to confirm how headings, notes, lists, and tables would actually render.

To address this, I added a TEI preview feature using CETEIcean.

Demo site: https://tei-converter.pages.dev/

What is CETEIcean?

CETEIcean is a JavaScript library developed by the TEI Consortium. It converts TEI/XML into HTML5 Custom Elements, enabling direct display in the browser.

Normally, displaying TEI/XML in a browser requires XSLT transformation to HTML. CETEIcean leverages the Web Components standard to register TEI element names as custom elements. For example, <p> becomes <tei-p>, and <head> becomes <tei-head>.

This means TEI elements can be styled purely with CSS, with no server-side transformation required.

New Features

XML / Preview Tab Switching

The result area now has two tabs: “XML” and “Preview”.

  • XML tab: The existing syntax-highlighted XML view
  • Preview tab: Visual rendering powered by CETEIcean

Switch between them with a single click.

Visual Rendering of TEI Elements

The preview tab visually renders the following TEI elements:

TEI ElementDisplay
<head>Headings (font size varies by nesting level)
<p>Paragraphs
<hi rend="bold">Bold text
<hi rend="italic">Italic text
<list> / <item>Lists (bulleted and numbered)
<table> / <row> / <cell>Tables
<note>Notes (popup on hover)
<titlePage>Title page (centered)
<pb>Page breaks
<teiHeader>Hidden (metadata section)

Note Popup on Hover

<note> elements are displayed as superscript numbers. Hovering over them shows the note content in a tooltip-style popup. This makes it easy to verify that note tags are functioning correctly.

Technical Details

Integrating CETEIcean

CETEIcean is loaded from a CDN.

<script src="https://cdn.jsdelivr.net/npm/CETEIcean@1.9.5/dist/CETEI.js"></script>

The converted XML string is simply passed to the makeHTML5() method to produce HTML5 custom elements.

function renderTeiPreview(xmlString) {
  teiPreview.innerHTML = '';
  const ct = new CETEI();
  ct.makeHTML5(xmlString, function(data) {
    teiPreview.appendChild(data);
  });
}

CSS Styling

The custom elements generated by CETEIcean use a tei- prefix, so styles can be defined directly with CSS selectors.

.tei-preview tei-head {
  display: block;
  font-weight: bold;
  margin: 1em 0 .5em;
}
.tei-preview tei-body > tei-div > tei-head { font-size: 1.5em; }
.tei-preview tei-div > tei-div > tei-head { font-size: 1.3em; }

The note popups are also implemented purely in CSS.

.tei-preview tei-note::before {
  content: "[" attr(n) "]";
  vertical-align: super;
}
.tei-preview tei-note:hover > * {
  display: block;
  position: absolute;
  background: #1d1d1f;
  color: #fff;
  /* ... */
}

File Separation

The tool was originally a single HTML file. With the addition of the preview feature, the growing CSS and JavaScript code was split into three files:

  • index.html — HTML structure only
  • style.css — All styles (base UI + TEI preview)
  • app.js — JavaScript (conversion, preview, and UI logic)

Conclusion

Using CETEIcean, a TEI/XML preview feature was implemented without any server-side XSLT transformation. Users can now compare the raw XML code and the rendered output side by side, making it quick to verify that tags function as expected.

Try it with the sample file:

https://tei-converter.pages.dev/