Quick document editing demonstrations

Structured-document editors guide the user with a document template while editing. This is quite different from rich text editors : the user does not need to format or to typeset her document since those parameters are inherited from the document template. The resulting user interface has a different look and feel : there are no more huge formating and styling panels, and mouse trajectories are minimized.

The first benefit is that the user can focus on the document content. The second benefit is that once the structured documents are recorded, they can be automatically processed by a computer. A minimal processing for instance can format the document for screen display or for printing, enforcing a strong graphical identity. Some other examples of processing could be to interpret parts of the document to generate diagrams or tables, to trigger external actions, or to generate applications just to cite a few. Search engines can take benefit from the instrinsic semantic of the document structure.

This page gives access to some demonstrations of template-driven authoring in the browser. All the examples use the AXEL Javascript library.


Restaurant menu card editor. The menu card is an obvious structured document example, have a look at its XML source to convince yourself.


Sample document model for editing multiple-choice questions (MCQ). This demonstration is part of a joint effort to extend eBook authoring environments with data edited online with our partner publiwide.


A simple HTML page template. The document structure does not go beyond the basic HTML semantic, however it is useful in replacement of rich text editors to create editable web sites. In most cases this template is extended with specific components to model information such as event programs, project descriptions, work package descriptions, persons, etc.


A very experimental HTML page template designed on a grid (currently the Bootstrap grid). It contains the same elements as the webpage template but in addition you can control layout on a grid. It is used on this web site. We will improve the user experience of the styling menu (see this issue). Does not work on iPad because of styling menu display mode.