Version 0.1 (15 March 2026)
The b6+ slide editor is a WYSIWYG editor for HTML slides that use the b6+ slide framework. It currently still has some limitations. It may not correctly read all slide decks made with other means and it cannot yet generate all the features of b6+.
The 
source of
the b6+ slide editor is on GitHub. To raise
issues, you can also use GitHub,
or send me email.
The toolbar contains:
codeThe slides panel contains a list of all slides and speaker notes in the current slide deck. The entries for slides are accompanied by a thumbnail image of the slide. Clicking on an entry in this list opens it in the editor.
The thumbnails may look slightly different from the full-size slide, because of limitations in the software library used to make them (html2canvas).
At the bottom of the list of slide are three buttons:
When the editor is in WYSIWYG mode, this area shows the
hierarchy of elements around the cursor. E.g., if the cursor
is in an <em> element inside a list item (<li>) of
a bulleted list (<ul>), this shows ul > li >
em. You can click on the element names to select the
whole of that element in the editor.
When the editor is saving a slide deck (and possibly its images and style sheet), the area will instead show what the editor is doing, e.g.: ‘Writing https://example.org/slides/myslides.html’
Different style sheet provide different layouts for slides and may also provide different slide transitions. The b6+ slide editor assumes that all style sheets provide layouts for cover slides (class=cover) and final slides (class=final), but in reality that may not the case. And style sheets may also provide several other kinds of slide layouts, such as part titles or slides that are half image and half text.
To learn what a style sheet supports, the editor looks for a file with the same name as the style sheet, but with the extension ‘.json’. If it exists and it is a JSON file, the editor looks for four properties: ‘documentation’, ‘supports-clear’, ‘layouts’ and ‘transitions’. Here is an example file:
{
"documentation": "../manual.html",
"supports-clear": true,
"layouts": [
{ "name": "Normal slide",
"class": "" },
{ "name": "Cover slide",
"class": "cover" },
{ "name": "Part title",
"class": ["part", "title"] },
{ "name": "Slide with left image",
"class": "side" },
{ "name": "Final slide",
"class": "final" }
],
"transitions": [
{ "name": "Default",
"class":"" },
{ "name": "Slide In",
"class": "slide-in" },
{ "name": "Slide Out",
"class": "slide-out" },
{ "name": "Move Left",
"class": "move-left" }
]
}
The ‘documentation’ property is the URL of the user manual of the style sheet. It may be a relative URL, in which case it is takne as relative to the JSON file itself.
If the ‘documentation’ property is absent, it is assumed there is no manual.
The ‘supports-clear’ property can be true or false. It indicates whether the style sheet defines the class ‘clear’ on slides. The purpose of that class is to suppress the slide number and possibly some decorative elements on the slide.
If the ‘supports-clear’ property is absent, it is assumed to be true.
The ‘layouts’ property contains a list of the slide layouts defined by the style sheet. Each entry in the list has a name to put in the editor's menu, and a class to add to the slide's class attribute. The class need not be a single word. And if there are multiple ways to get the same layout, there may be an array of classes. The example above declares that the style sheet defines five layouts and that the class ‘title’ is an alias for ‘part’.
If the ‘layouts’ property is absent, the editor assumes the following:
[
{ "name": "Normal slide",
"class": "" },
{ "name": "Cover slide",
"class": "cover" },
{ "name": "Final slide",
"class": "final" }
]
The ‘transitions’ property contains a list of slide transitions between a slide and the next one. Like for ‘layouts’, each entry has a name, which is used in the editor's menu, and a class to put in a slide's class attribute.
If the ‘transitions’ property is absent, the editor assumes the style sheets defines no slide transitions.