Documents Live, a web authoring and publishing system
Documents Live, a web authoring and publishing system
If you see this, something is wrong
First published on Wednesday, Aug 27, 2025 and last modified on Sunday, Feb 22, 2026
This guide introduces the basics of LaTeX, and then shows that Documents Live is a powerful integrated platform for authoring and publishing to the web. The LaTeX novice will discover that, if you forget mathematics, LaTeX is quite a simple language to learn.
This guide is a Documents Live publication. This means that it is spead across several web pages. To navigate between the different part of the guide, use the buttons at the top left of this page. The button that says Publication content will display the table of contents of the publication. The arrow buttons at the left and right of the previous button lets you navigate back and forth in the list of the documents in the publication.
This overview contains many references to specific lessons in the guide; do not hesitate to click on them.
Sections 3 and 4 present concepts which belong to traditional LaTeX. Section 5 presents extensions of the LaTeX language which are specific to Documents Live, and which are dedicated to the layout and styling of documents for the web.
In parallel to these lessons, a tutorial document is available to learn and test your knowledge on actual source code. More info on this tutorial document is here .
All the documents in this guide have been written in LaTeX using exclusively Documents Live tools.
LaTeX is primarily used for publishing scientific documents. At Documents Live, we are convinced that it can be much more than that. It is a language that is well adapted to the authoring and publication of general documents, and Documents Live makes an accessible tool to write and publich content on the web.
With Documents Live, you can create engaging documents on the web without knowing any HTML, CSS or Javascript. This guide is here to introduce you to LaTeX and show how it can be used to produce complete web documents.
If you do not use math, LaTeX is a pretty easy language to learn. Its root features make it a natural tool for publishing documents, as it concentrates on notions which are at the heart of document authoring. Here is the outline of our intoduction to LaTeX.
Since LaTeX is a document description language, it must make a distinction between the document content itself and the features of the language which are used for the document preparation. This is why our first lesson introduces that main features of the LaTeX language.
Once this is done, we dive into the various components of a document, such as they are handled by LaTeX.
We start with the main element which is text. In Documents Live, text is UTF-8 encoded, which means in practice that you can use characters from almost all scripting systems natively.
Text can be styled and re-sized. You can also do many other things, but we will explore this in a dedicated section.
Ather this, we have a look at a very important feature of a LaTeX, which is its sectioning. This introduces the hierarchical structure of a LaTeX document. Our next lessons will be devoted to the simplest components of a LaTeX document.
We have a look at lists, which can be Documents Live simple lists, or more complex LaTeX lists. Note that the versatility of web list styling blurs the line between ordered and un-ordered lists.
Then we have a look at the media components of Documents Live, which are much richer on the web than in print (or PDF for that matter). Figures can be expanded to fill the browser window, and videos can be expanded to fill the whole screen.
Tables are ugly beasts. At best, they are difficult to read on print; at worst they are a clumsy way of displaying data. Fortunately, Documents Live tables make use of standard web principles to make them more appealing. If you forget about the gruesome details of traditional LaTeX tables, they just consist in data separated by row and columns separators.
This lesson details how to make footnotes and quotations, insert code and produce “margin notes”.
You are going to say: I do not need theorems! And I will answer: no, and … perhaps yes.
You do not need theorems as mathematical statements. You may use them, however, as plain statements.
Generally speaking, theorems are versatile environments that let you emphasize and set aside a portion of a document. It may be an important clause of a contract, or just anything on which you want to bring attention and be memorized. Here, I use theorem environments to set aside the summary of a lesson. And, you can give any name to your theorem classes.
Here is a reference to the summary of the lesson about theorems.
Now that we can make statements stand out, it may be useful to reference them in other parts of the document. To do so, one must attach a label to the object to be referenced using the \label command. To reference the object elsewhere, apply the \ref command to the label. In Documents Live it is also possible to reference objects that belong to other Documents Live documents (this is such a reference).
Documents, as a generality, should not look like a Christmas tree, but sensible usage of color can be very rewarding. Colors must be first defined, and then used.
Custom command can be defined in documents by using the \newcommand command. Macros can be simple or complex.
If you want to simplify coding by recycling code chunks, macros are the way to go. More in the lesson .
What follows is only possible using the Documents Live system.
You can arrange blocks of content into a grid. To maintain readability, the blocks are given a minimum width. When the browser window is too narrow, the blocks “wrap” to the next line.
Here is an example (resize the browser window to see what happens).
Dad and son
Space. The final frontier.
Lorem ipsum esse, laboris pariatur magna nostrud cillum, veniam, sed in occaecat enim ad dolore, amet ut. Mollit duis sint amet ea aliqua in cillum ea in ex do reprehenderit ea excepteur dolore.
Click here to see the syntax.
You can also define columns in Documents Live. The behavior of columns is slightly different from the behavior of grids.
You first define your column setup for large displays. For small devices the behavior of the columns is the following.
The setup for large screens essentially follows two patterns.
In the second configuration, the number assigned to each column specifies how many slots its width would take on a total of twelve. Here is an illustration with various slot allocations.
Here is an example with a 2/3 - 1/3 repartitions. Resize the browser window to see what happens. The layout is preserved at tablet size (because there are only two columns), and its collapses at mobile size.
Some important lorem text
Lorem ipsum consequat, non aliquip enim et aliquip ex veniam, magna ad sed, cupidatat. Ex culpa reprehenderit, commodo nostrud labore amet adipiscing excepteur, laborum laboris, amet, in. Culpa quis nisi dolore aliquip minim, irure dolore, dolor consequat, amet voluptate, culpa.
Lorem ipsum incididunt reprehenderit ut in ex velit et in id do dolor consequat cupidatat dolor ut do. Mollit aute mollit in, occaecat proident, velit aute, in reprehenderit est nisi in ex et dolor fugiat. Veniam laborum irure laborum mollit proident, esse minim ad cupidatat quis proident culpa sed esse, sint do.
For more details, refer to the online help . Click here to see the syntax.
In a web page, styling is separate from content. Styling can be used to define many, many things. Here is a very short list.
In the next section we introduce a general purpose LaTeX2Web environment which is dedicated to the styling of content.
latexDiv
latexDiv is a environment that
The styling is performed by using two (optional) commands and one (optional) environment. Here is the list.
\class command applies one or several (CSS) classes to the latexDiv.
\css command applies one or several CSS commands to the latexDiv.
style environment applies a set of LaTeX2Web specialized styling commands that are designed to make the syling process easier.
The styling commands are applied to specific parts of a web page. In our case, they will be applied to the latexDiv.
The first approach to styling is to directly attach CSS code to an element in the web page.
Instead of using this direct approcah, one may use a two step process.
If you are familiar with bootstrap , you can use bootstrap classes in Documents Live.
Finally, one can avoid using classes and CSS code by using specific Documents Live styling commands, which are easier to grasp.
In section 5.2.1.2 we give a styling example which uses classes and CSS. In section 5.2.1.3, we achieve the same result using only Documents Live styling commands.
Let us give an example. We want apply to some content the following styling elements:
lightyellow)
We will use pure CSS for the background color and for the border, and we will use a bootstrap class for the padding. Here is the code.
\begin{latexDiv}
\class{p-3 mb-3}
\css{border: solid black 3px; border-radius: 5px; background-color: lightyellow}
... content ...
\end{latexDiv}Here is the result.
Lorem ipsum incididunt cillum excepteur est nostrud incididunt in in nisi dolore, sed incididunt cillum laboris do. Laborum dolore velit laboris nulla, esse nostrud, tempor tempor, sint in elit in et amet ex. Veniam elit quis tempor ea velit ut, nisi in nulla ut dolore duis deserunt est, est.
Lorem ipsum amet aute ut, laboris dolor in eu in, mollit, in elit, reprehenderit tempor proident sint nostrud. Elit ut occaecat, incididunt dolore quis sint veniam sint, sunt eu deserunt, ullamco aliqua consectetur ea, ullamco. Cillum aliquip amet, incididunt deserunt deserunt laborum cupidatat laboris sint quis, excepteur dolor veniam ut et proident.
Of course, we do not expect our users to dive into the complexities of CSS and Bootstrap to style their content. This is why Documents Live has a dedicated set of commands designed to cover the most common usage of content styling. The whole detail is in the online help about the latexDiv .
What we do next is use only Documents Live commands to achieve what was previously done with CSS and bootstrap. In addition, we will narrow the width of the content to 70% of the content width, at least on large displays. Here is the code.
\begin{latexDiv}
\begin{style}
\border{black 3 rounded}
\background{lightyellow}
\padding{15}
\margin{bottom-15}
\width{70}
\end{style}
... content ...
\end{latexDiv}Here is the result.
Lorem ipsum incididunt cillum excepteur est nostrud incididunt in in nisi dolore, sed incididunt cillum laboris do. Laborum dolore velit laboris nulla, esse nostrud, tempor tempor, sint in elit in et amet ex. Veniam elit quis tempor ea velit ut, nisi in nulla ut dolore duis deserunt est, est.
Lorem ipsum amet aute ut, laboris dolor in eu in, mollit, in elit, reprehenderit tempor proident sint nostrud. Elit ut occaecat, incididunt dolore quis sint veniam sint, sunt eu deserunt, ullamco aliqua consectetur ea, ullamco. Cillum aliquip amet, incididunt deserunt deserunt laborum cupidatat laboris sint quis, excepteur dolor veniam ut et proident.
Here is a summary of the LaTeX2Web styling commands. These commands are inside a style environment.
Summary 1
The LaTeX2Web command which are dedicated to styling are the following.
\border specifies the border of the object. If this command is not used, the border still exists but it is invisible.
\padding specifies the amount of space between the border and the object.
\margin specifies the amount of space between the border and surrounding object.
\background specifies the background of the object+the padding space. It can be a color, an image, or both.
\width specifies the width of the object, as a percentage of the width of the surrounding object.
\overlay command specifyes a semi-opaque color that will be applied between the image and the object itself.
\shadow creates a drop shadow for the object.
The following commands affect the text inside the object.
\textcolor changes the color of standard text color.
\linkcolor changes the color of links and references.
\textalign changes the text alignment inside the object.
Grid blocks and individual columns can be styled the same as a latexDiv. Here is an example with columns of respective sizes 8 and 4. The code is below the example.
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”
So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.
In another moment down went Alice after it, never once considering how in the world she was to get out again.
As promised, here is the code.
\begin{columns}
\begin{col}[8]
\begin{style}
\background{alice}
\padding{15}
\textcolor{white}
\border{white rounded}
\end{style}
... text ...
\end{col}
\begin{col}[4]
\includegraphics{cover.jpg}
\end{col}
\end{columns}
alice is a color which is a darker version of the backgound of the cover of the book.
Sliders embed a slide show in your Documents Live page. Below is the summary from the corresponding lesson .
Summary 2
A LaTeX2Web slider can have mixed content. It is a high level component, that can, for instance, contain theorems such as this one.
The slider is created by using a slider environment. Inside a slider, each slide is delimited by a slide environment. The LaTeX2Web code editor has dedicated commands to create sliders easily.
Here is the syntax.
\begin{slider}
\begin{slide}
... content ...
\end{slide}
\begin{slide}
... content ...
\end{slide}
\end{slider}Cards are common web page component which provide a decent layout for simple content. For details, see the lesson .
Summary 3 (card components)
A card has four components.
Each of these parts is a LaTeX2Web chunk.
Here is an example
Why cats are cute
Cats are so cute because their features and behaviors trigger our instinctive affection—large, round eyes, soft fur, and tiny, agile paws all resemble the characteristics we find endearing in human babies. Their playful curiosity, gentle purring, and comically expressive faces add to their charm, making them both entertaining and heartwarming companions. Whether they are stretching luxuriously in a sunny spot or kneading a blanket with contentment, cats effortlessly invite our warmth and attention, blending innocence with mystery in a way that irresistibly appeals to our sense of delight.
Chunks are components of Documents Live widgets such as cards.
Each chunk can include one or more of the following LaTeX2Web terminal object types.
Each chunk can be styled using the rules detailed in the lesson about the latexDiv .
Click here to see a styled version of the previous card with a cat.
LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs.
A tab group is defined by a tabGroup. Inside, each tab is defined by a tab environment.
LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs. Here we have tab style.
Chunks are simple LaTeX2Web components which are terminal objects types. Theses objects cannot include other LaTeX2Web objects.
Every chunk can be styled. Styling is not encouraged for the tab styled tab groups.
Each tab is enclosed in a tab environment. The tab itself has two parts.
\caption command.
LaTeX2Web lets you organize content in tabs. Each tab content is a chunk. The appearence of the tab group can be classical tabs or “pill” tabs. Here we have pill style.
This tab has been given a border.
Chunks are simple LaTeX2Web components which are terminal objects types. Theses objects cannot include other LaTeX2Web objects.
Every chunk can be styled. The pill style is adapted to custom styling.
This tab has been given a border and a light yellow background.
Summary 4
Tabbed content is defined by a tabGroup environment. The tab group can have two styles.
tab (which is the default)
pill which lends itself more to tab styling.
Each tab is defined by a tab environment. The text of the tab button is defined with the \caption command. The rest is the the tab content.
The content of a tab is a chunk which can be styled.