This figure shows the data flow from TEI input to Vue.js rendering.
The transformation is executed on the client side using SaxonJS.
The basic structure is probably the same as other web applications that render TEI-edited sources. However, in this application, instead of converting into HTML, the XSLT code here is designed to convert into the <template> part of the Vue.js code.
One .vue file is usually divided into two parts: the <template> and <script> parts. The former defines the view of the web page. The latter includes variables and methods to define the behavior of the web page.
In order to have the benefit of Vue.js and other modern frameworks, this web application is built as a single-page application (SPA). As a result, every content of the application is called through the main view.
The website structure is simple and straightforward:
Main View
├── Home
├── About
├── Edition (Currently containing 2 scholarly Editions)
├── Translation (not ready to publish)
├── Glossary (not ready to publish)
└── Analysis (not ready to publish)
In this web application, the Vue.js code converted from TEI is embedded in the “Edition” view, which serves as the primary source viewer.
As for the structure of the web application, the project directory is organized as follows:
arabic-tei/
├── docs/
├── node_modules/
├── public/
└── src/
├── assets/
├── image/
├── tei/
├── xslt/
├── components/
├── pages/
├── plugins/
├── router/
├── styles/
├── main.js
└── App.vue
Technically, once we generate a project folder and install plugins with a project
management tool (such as npm), Although those processes are not straightforward for those who are not familiar
with CUI, its description is omitted because it is not a main focus of this paper.
the development is largely confined to the src directory. Logic of the Conversion from TEI to Vue.js code
The file called edition.vue, located in /src/pages indicated above, renders TEI editions into a reader-friendly view. The webpage appears like this:
The “Edition” Page
This is the appearance of the initial state of the “Edition” page.
The left foldable column is a list of edited primary sources. When you press the title, the conversion process is executed, and the text of the chosen primary source appears on the right. In the conversion process, an XSLT program is invoked to process the TEI file corresponding to the chosen primary source.
The chosen text shows like this:
The Rendered Text
This is the appearance of the rendered text.
Here, the XSLT program processes mainly two parts. The part before the main text, which includes, the title, author and list of witnesses, is data extracted from the TEI header (i.e., <teiHeader>). The other part is the converted result of the <text> element in the TEI file.
In both cases, the conversion result has to follow the Vue.js and Vuetify.js coding conventions. For example, the list of the witnesses shown above consists of expansion panels provided from Vuetify.js. Thus, the converted code is supposed to be like:
<v-expansion-panels multiple class="mb-10">
<v-expansion-panel>
<v-expansion-panel-title class="text-h5">
[SHELF MARK]
</v-expansion-panel-title>
<v-expansion-panel-text>
[DETAIL INFO OF THE CODEX]
</v-expansion-panel-text>
･･･
</v-expansion-panel>
</v-expansion-panels>
Then, XSLT can be written as follows:
<xsl:element name="v-expansion-panels">
<xsl:attribute name="multiple"/>
<xsl:attribute name="class">mb-10</xsl:attribute>
<xsl:for-each select="fileDesc/sourceDesc/msDesc">
<xsl:element name="v-expansion-panel">
<xsl:element name="v-expansion-panel-title">
<xsl:attribute name="class">text-h5</xsl:attribute>
<xsl:value-of select="[SHELF MARK]"/>
</xsl:element>
<xsl:element name="v-expansion-panel-text">
<xsl:value-of select="DETAIL INFO OF THE CODEX"/>
</xsl:element>
</xsl:element>
</xsl:for-each>
</xsl:element>
Although most of the XSLT coding is straightforward and has no major difference from when converting into HTML, some of the Vue.js coding conventions cause a critical issue in XSLT execution.
The problem is processing colon (:). In Vue.js, a colon is involved in an attribute when using the v-bind feature in some of the cases. The v-bind gives a dynamic value to an attribute of an element. Therefore, it is almost inevitable to use it as long as using Vue.js. In the case of my web application, the following Vue.js code is desired:
<v-menu :nudge-width="150" :close-on-content-click="false">
:nudge-width is an abbreviated form of v-bind:nudge-width. In this way, we have to add a colon to use this feature in Vue.js. However, the colon is a reserved character in XSLT, which uses it to express namespaces. Therefore, if a colon is included in a value or attribute in XSLT, this causes errors during XSLT processing.
In my web application, I invented a workaround that lets JavaScript code in the Vue.js file convert colon-involved parts. In order to output the code above, the XSLT adds an intermediary id attribute like the following:
<xsl:element name="v-menu">
<xsl:attribute name="id">v-menu-config</xsl:attribute>
</xsl:element>
･･･
Then JavaScript replaces it:
while (!!doc.querySelector('#v-menu-config')) {
doc.querySelector('#v-menu-config').setAttribute(':nudge-width', '150')
doc.querySelector('#v-menu-config').setAttribute(':close-on-content-click', 'false')
doc.querySelector('#v-menu-config').removeAttribute('id')
}
This workaround highlights a broader compatibility issue between XML-based transformation pipelines and modern JavaScript frameworks. The proposed solution is not limited to this project but can be applied to similar cases where XSLT-generated output must conform to framework-specific syntactic constraints.
Aside from this problem, XSLT can easily create Vuetify.js GUI components, which makes the website look quite well organized and equipped with dynamic features without extra effort. For specific website GUI features, please refer to the website.
Benefits of Using Vue.js The improvements over conventional TEI rendering applications can be summarized as
follows. The first is low running cost. To run a Vue.js application, we do not need a fully
equipped server space. GitHub Pages or other so-called BaaS, such as Firebase, which only
requires an inexpensive subscription, would be enough to host a Vue.js application. This is an
affordable running cost for any researcher, even for those who do not receive research funds.
The second is the simple application structure. We only have to edit a few of the folders in
the project folder, which does not require any complicated configurations or stylesheets. This
enables one or a few persons to develop the entire application without taking time. This is
also appropriate from a maintainability standpoint. The third is efficient but powerful GUI
development. The use of Vue.js and Vuetify.js (which can be other GUI frameworks for Vue.js)
not only allows us to use sophisticated GUI components, but also to make them dynamic quickly.
This is because a Vue.js file includes both template and script parts. In other words, it is
straightforward to map methods and variables in the script to the GUI component in the
template. Compared to alternative approaches such as server-side rendering or static HTML
transformation, Vue.js enables a tighter integration between transformed TEI content and
interactive user interfaces through its component-based architecture. This could promote more
scholars to consider editing primary sources in TEI. Further Possibilities of the Web Application As explained above, one of the advantages of creating scholarly editions digitally is
being able to update. There are also several plans for my web application in the dissertation
project. Some can be implemented without taking much time and effort. Others may require more
time to learn to do so. The former is, for example, to create a glossary of the technical
terms of a specific topic. In the case of my scholarly editing project, generating the list of
substances used in alchemy out of all edited sources would be useful. As long as terms are
tagged by the element such as <term type="substance">, XSLT can easily
extract those words.
More difficult plans are implementing analyzing tools based on natural language theories or AI-related features. In terms of natural language processing, LSA (latent semantic analysis) is a good method for finding similar passages within a corpus. If we can use LLM (large language model) APIs in a web application, we can analyze the corpus more flexibly. Of course, since LLMs are not always accurate, their use should be limited to a heuristic tool.
Conclusion Many historians would think that developing one’s own web application to render
TEI-edited primary sources is an unfeasible task. This represents a major obstacle to the
creation of digital editions for most scholars. That is, due to the poor readability of TEI
code, it is almost impossible to use it to consult primary sources. Only after it is rendered
into a reader-friendly format do TEI editions become usable sources to refer to. Therefore,
unless we can reduce the effort required to develop rendering applications, wider adoption of
TEI among scholars is likely to remain challenging. This paper demonstrates a practical and
reproducible method for integrating TEI and modern front-end frameworks with minimal technical
overhead. Developing the web application with Vue.js could at least make scholars feel less
overwhelmed, though many of them might still hesitate to try. Even those who might still
hesitate to develop web applications can take advantage of the recent availability of LLM
chatbots, which can assist with some of the most time-consuming tasks, such as coding. The
more digital scholarly editions are created, the more we can analyze primary sources using
computational methods, leading to new insights into historical sources. References
Brinis, Fazia, Mohammed Ourabah Soualah, and Farida Bouarab. “Comparative Study of Encoding Formats for Digitized Ancient Arabic Manuscripts.”
2023 24th International Arab Conference on Information Technology (ACIT), 2023, 1–11. doi:10.1109/ACIT58888.2023.10453686.
The Chymistry of Isaac Newton. https://chymistry.org/.
GitHub. https://github.com/.
Inoue, Takatomo. “Alchemy in Medieval Islam and Abū Bakr al-Rāzī.” PhD diss., Indiana University Bloomington, 2025.
Lancioni, Giuliano. “Encodings, genres, texts: issues in Arabic corpus linguistics.”
Langues et Littératures du Monde Arabe 9 (2011): 84–93.
Lancioni, Giuliano, and N. Peter Joosse. “The Arabic Diatessaron Project: Digitalizing, Encoding, Lemmatization.”
Journal of Religion, Media and Digital Culture 5, no. 1 (2016): 205–227. doi:10.1163/21659214-90000075.
Maraoui, Hajer, Kais Haddar, and Laurent Romary. “Encoding Prototype of Al-Hadith Al-Shareef in TEI.”
ICALP 2017 - The 6th International Conference on Arabic Language Processing, 2017, 217–229. doi:10.1007/978-3-319-73500-9_16.
MDN. https://developer.mozilla.org.
Newman, William R.
Newton the Alchemist: Science, Enigma, and the Quest for Nature’s ‘Secret
Fire’. Princeton: Princeton University Press, 2024.
Saxonica. https://www.saxonica.com/welcome/welcome.xml.
Sayre, Meridith Beck, Michelle Dalmau, Wallace Hooper, William R. Newman, James R. Voelkel, and John Walsh. “Encoding Newton’s Alchemical Library: Integrating Traditional Bibliographic and Modern Computational Methods.”
Journal of the Text Encoding Initiative 11 (2020). doi:10.4000/jtei.2866.
The Text Encoding Initiative Consortium. https://tei-c.org.
Vue.js. https://vuejs.org/.
Vuetify.js. https://vuetifyjs.com/.
Walsh, John A., and Wallace Edd Hooper. “The Liberty of Invention: Alchemical Discourse and Information Technology Standardization.”
Literary and Linguistic Computing
27 (2012): 55–79. doi:10.1093/llc/fqr038.
MS. Fatih 5309. Süleymaniye Library, Istanbul.
MS. Haci Mahmut 4224. Süleymaniye Library, Istanbul.