diff --git a/README.md b/README.md
index e89fb1a..796af30 100644
--- a/README.md
+++ b/README.md
@@ -40,10 +40,18 @@ What can you acheive? See a variety of features in another example at [examples/
   * [Organizing](#organizing)
 - [Structure](#structure)
   * [Frame `<article>`](#frame-article)
+      - [`data-duration`](#data-duration)
+      - [`data-transition-duration`](#data-transition-duration)
+      - [`data-spread-frames`](#data-spread-frames)
+      - [`data-x`, `data-y`](#data-x-data-y)
+      - [`data-loop`](#data-loop)
+      - [`id`](#id)
+      - [`<!-- presenter's notes -->`](#---presenters-notes---)
   * [Frame content](#frame-content)
       - [`data-step`](#data-step)
         * [Step styling](#step-styling)
       - [`data-step-class`](#data-step-class)
+      - [`data-step-shown`](#data-step-shown)
       - [`data-step-li`](#data-step-li)
       - [`data-step-duration`](#data-step-duration)
       - [`data-step-transition-duration`](#data-step-transition-duration)
@@ -54,6 +62,8 @@ What can you acheive? See a variety of features in another example at [examples/
       - [Panoramatic images](#panoramatic-images)
       - [Preload](#preload)
     + [`<video>`](#video)
+      - [`data-playback-rate`](#data-playback-rate)
+      - [`data-video`](#data-video)
     + [Text](#text)
   * [Map](#map)
     + [`<article-map>` frame](#article-map-frame)
@@ -129,53 +139,64 @@ Every frame is represented by an `<article>` tag.
 
 Which contains arbitrary HTML code, such as images or videos (by default, one per slide). Use control attributes:
 
-* `data-duration=0`: How many seconds will a frame step last. By default, indefinitely (waiting for a user action).
+### `data-duration`
+(default `0`) How many seconds will a frame step last. By default, indefinitely (waiting for a user action).
 
-    ```html
-    <article data-duration="0.5">Short frame</article>
-    <article>You have to click to get further</article>
-    <article data-duration="0.5">Short frame</article>
-    ```
-    Note a video frame is an exception: will hold till the video finishes and then change frame.
-
-* `data-transition-duration=0`: How many seconds will it take to change a frame.
-* `data-spread-frames=spiral`: A viewport stands for a chessboard field. This is how the frame are positioned in the chessboard.
-    * `true=spiral`
-    * `diagonal`
-* `data-x`, `data-y`: Valid only for `data-spread-frames=dialogal`. Overrides the default position. Attention, do not let the frames share the same position.
-* `data-loop`: If present, images in the body will rapidly loop, creating a funny animation. (Currenly allowed only `true` value for an infitite loop.)
-    ```html
-    <article data-loop>
-        <img src="pic1.jpg" />
-        <img src="pic2.jpg" />
-    </article>
-    ```
-* `id`: Standard HTML ID serves for navigation.
-    ```html
-    <article>
-        <a href="#my_frame">go to a specific frame</a>
-        <a href="#my_section">go to the first frame in a specific section</a>
-        <a href="#2">go to the second frame (number may change if you add frames later)</a>
-    </article>
-    <section id=my_section>
-        <article>...</article>
-        <article id=my_frame>...</article>
-    </section>
-    ```
-* `<!-- presenter's notes -->` You may use HTML comments just before the frame or as the first frame child. These will be displayed in the auxiliary window while presenting.
-    Before the frame:
-    ```html
-    <!-- I should talk about cats. -->
-    <article><img src='cat.jpg' /></article>
-    ```
+```html
+<article data-duration="0.5">Short frame</article>
+<article>You have to click to get further</article>
+<article data-duration="0.5">Short frame</article>
+```
+Note a video frame is an exception: will hold till the video finishes and then change frame.
 
-    Inside the frame:
-    ```html
-    <article>
-        <!-- I should talk about cats. -->
-        <img src='cat.jpg' />
-    </article>
-    ```
+### `data-transition-duration`
+(default `0`) How many seconds will it take to change a frame.
+
+### `data-spread-frames`
+(default `spiral`) A viewport stands for a chessboard field. This is how the frame are positioned in the chessboard.
+* `true=spiral`
+* `diagonal`
+### `data-x`, `data-y`
+Valid only for `data-spread-frames=dialogal`. Overrides the default position. Attention, do not let the frames share the same position.
+
+### `data-loop`
+If present, images in the body will rapidly loop, creating a funny animation. (Currenly allowed only `true` value for an infitite loop.)
+```html
+<article data-loop>
+    <img src="pic1.jpg" />
+    <img src="pic2.jpg" />
+</article>
+```
+
+### `id`
+Standard HTML ID serves for navigation.
+```html
+<article>
+    <a href="#my_frame">go to a specific frame</a>
+    <a href="#my_section">go to the first frame in a specific section</a>
+    <a href="#2">go to the second frame (number may change if you add frames later)</a>
+</article>
+<section id=my_section>
+    <article>...</article>
+    <article id=my_frame>...</article>
+</section>
+```
+### `<!-- presenter's notes -->`
+You may use HTML comments just before the frame or as the first frame child. Markdown syntax is supported. These will be displayed in the auxiliary window while presenting.
+
+Before the frame:
+```html
+<!-- I should talk about cats. -->
+<article><img src='cat.jpg' /></article>
+```
+
+Inside the frame:
+```html
+<article>
+    <!-- I should talk about cats. -->
+    <img src='cat.jpg' />
+</article>
+```
 
 ## Frame content
 
@@ -351,7 +372,9 @@ When having thousands of images, your browser may choke. Use `data-src` instead
 * The `<video>` tag benefits from standard attributes like `loop`, `muted`, `autoplay` and `controls` (so that controls are visible). In Chromium based browsers, only `muted` video respects `autoplay` so we recommend using `controls` too so that you may start the video with the <kbd>Space</kbd>.
 * When a new frame appears, first video gets focus. Whether `autoplay` is present, it starts playing. Keys like <kbd>Space</kbd>, <kbd>Left</kbd>, <kbd>Right</kbd> stop working for frame switching to avoid interfering with the video controls.
 
-* `data-playback-rate`: The speed of the video.
+#### `data-playback-rate`
+The speed of the video.
+
 Tip: Can be adjusted by <kbd>Numpad +/-</kbd> while presenting.
 ```html
 <article> <!-- fast video -->
@@ -362,23 +385,25 @@ Tip: Can be adjusted by <kbd>Numpad +/-</kbd> while presenting.
 </article>
 ```
 
-* `data-video='autoplay controls'`: All `<video>` tags inherits its value as attributes (`autoplay controls muted loop`). Tip: toggle muted by <kbd>Alt+M</kbd> while presenting.
-    ```html
-    <article data-video="autoplay muted">
-        <video> <!-- becomes <video autoplay muted> -->
-            <source src="my_video.mp4#t=8,10" type="video/mp4">
-        </video>
-    </article>
-    <article>
-        <video src="my_video.mp4"> <!-- becomes <video autoplay controls> because that is the default --></video>
-    </article>
-    <article>
-        <video data-video='muted' src="my_video.mp4"> <!-- becomes <video muted> --></video>
-    </article>
-    <article>
-        <video muted src="my_video.mp4"> <!-- becomes <video autoplay controls muted> --></video>
-    </article>
-    ```
+#### `data-video`
+(default `'autoplay controls'`) All `<video>` tags inherits its value as attributes (`autoplay controls muted loop`). Tip: toggle muted by <kbd>Alt+M</kbd> while presenting.
+
+```html
+<article data-video="autoplay muted">
+    <video> <!-- becomes <video autoplay muted> -->
+        <source src="my_video.mp4#t=8,10" type="video/mp4">
+    </video>
+</article>
+<article>
+    <video src="my_video.mp4"> <!-- becomes <video autoplay controls> because that is the default --></video>
+</article>
+<article>
+    <video data-video='muted' src="my_video.mp4"> <!-- becomes <video muted> --></video>
+</article>
+<article>
+    <video muted src="my_video.mp4"> <!-- becomes <video autoplay controls muted> --></video>
+</article>
+```
 
 ### Text
 
diff --git a/slidershow/aux_window.js b/slidershow/aux_window.js
index 80eae79..895f60c 100644
--- a/slidershow/aux_window.js
+++ b/slidershow/aux_window.js
@@ -75,7 +75,7 @@ class AuxWindow {
         switch (e.action) {
             case "info":
                 this.$current_frame.html(e.frame)
-                this.$notes.html((e.notes || "").replace("\n", "<br>")).toggle(Boolean(this.$notes.html())) // hide notes if empty
+                this.$notes.html((e.notes || "")).toggle(Boolean(this.$notes.html())) // hide notes if empty
                 this.$next_frame.html(e.next_frame || "END")
             case "update-step":
                 // Highlight the element to be revealed in the next step
diff --git a/slidershow/change_controller.js b/slidershow/change_controller.js
index aaf4e0d..5f7bff3 100644
--- a/slidershow/change_controller.js
+++ b/slidershow/change_controller.js
@@ -11,18 +11,47 @@ class ChangeController {
    */
   constructor(playback) {
     this.playback = playback
+    /** @type {boolean} Use to check whereas the undo operation is running.
+     *  While performing the undo operation, it is not possible to register a new one.
+     *  This is to prevent a common situation when restoring the state will attempt
+     *  to re-register the undo operation.
+     *  */
+    this.performing = false
     /**
      * @type {Array<Array>}
      */
     this.changes = []
+
+    this.$button = $("<button/>", { "text": "undo", })
+      .on("click", () => {
+        this.undo()
+        return false
+      })
+      .prop("disabled", !this.changes.length)
   }
 
+
   /**
    *
    * @param {Function} undo
+   * @param {*} identity Prevent registering two successive events with the same identity check in a row.
+   * @param {*} extra Any parameter given to the undo callback. TODO not used
+   * @returns
    */
-  change(undo) {
-    this._change(this.CALLBACK, undo)
+  change(undo, identity = null, extra = null) {
+    if (identity && this.changes.length && this.changes.slice(-1)[0][2] === identity) {
+
+      console.log("43:  identity", identity) // TODO
+
+      return
+    }
+
+    console.log("48:  identity", identity) // TODO
+
+    if (this.performing) { // already doing an undo operation
+      return
+    }
+    this._change(this.CALLBACK, undo, identity, extra)
   }
 
   deleteItem($el) {
@@ -31,9 +60,10 @@ class ChangeController {
   }
 
 
-  _change(name, instructions) {
-    this.changes.push([name, instructions])
+  _change(name, instructions, identity = null, extra = null) {
+    this.changes.push([name, instructions, identity, extra])
 
+    this.$button.prop("disabled", false)
     $(window).on('beforeunload', () => true)
   }
 
@@ -45,7 +75,7 @@ class ChangeController {
     if (!this.changes.length) {
       return
     }
-    const [name, instructions] = this.changes.pop()
+    const [name, instructions, _, extra] = this.changes.pop()
     switch (name) {
       case this.DELETE_EL:
         const [originalIndex, $deletedItem, xpath] = instructions
@@ -60,7 +90,9 @@ class ChangeController {
         )
         break;
       case this.CALLBACK:  // Undo the operation with a non serialized callback
-        instructions()
+        this.performing = true
+        instructions(extra)
+        this.performing = false
         break;
       default:
         this.playback.hud.alert(`Could not undo ${name}`)
@@ -68,7 +100,12 @@ class ChangeController {
     }
 
     if (!this.changes.length) {
+      this.$button.prop("disabled", true)
       this.unblock_unload()
     }
   }
+
+  get_button() {
+    return this.$button
+  }
 }
\ No newline at end of file
diff --git a/slidershow/frame.js b/slidershow/frame.js
index 3b1daea..9434d09 100644
--- a/slidershow/frame.js
+++ b/slidershow/frame.js
@@ -723,16 +723,33 @@ class Frame {
         if ($el.data("wzoom")) {
             return $el.data("wzoom") // already initialized
         }
-        const maxScale_default = 3
+        const maxScale_default = 5
+        let last_scale = null
         const wzoom = WZoom.create($el.get()[0], {
             maxScale: maxScale_default,
             minScale: 1,
-            speed: 1,
+            speed: 1.5,
             // We can wheel in for ever but keeping maxScale on leash.
             // Because the click takes us to the current bed (and second click zooms out).
-            rescale: wzoom =>
-                wzoom.content.maxScale = Math.max(maxScale_default, wzoom.content.currentScale + 3)
+            rescale: wzoom => { // the function seems to be called unintuitively with grab moving
+                const scale = wzoom.content.currentScale
+                wzoom.content.maxScale = Math.max(maxScale_default, scale + 3)
+                $el.trigger("wzoomed", [wzoom, last_scale===scale])
+                last_scale = scale
+            },
+            dragScrollableOptions: {
+                onDrop: (_, wzoom) => $el.trigger("wzoomed", wzoom)
+            }
         })
+        // Why correcting viewport? When having data-step-points and calling `zoom_set` from `prepare`,
+        // the frame is not at the viewport yet, thus the values are wrong. Such image seem to work
+        // but whenever manually zoomed, it vanishes out of the screen.
+        // Besides, we should center the image to a parent. However, we do not want to wrap it,
+        // this simulates the parent.
+        wzoom.viewport.originalLeft = $el.position().left
+        wzoom.viewport.originalTop = $el.position().top
+        wzoom.viewport.originalWidth = $el.width()
+        wzoom.viewport.originalHeight = $el.height()
 
         $el
             // we have zoomed in, do not playback further
@@ -772,22 +789,12 @@ class Frame {
     */
     zoom_set($el, left = 0, top = 0, scale = 1, transition_duration = null, duration = null) {
         const wzoom = this.zoom_init($el)
-
         transition_duration ??= prop("step-transition-duration", $el, null, "transition-duration")
-
-        const c = wzoom.content
-        if (!c) {
-            return console.warn("Zoomed img does not exist", $el, wzoom)
-
-        }
-        c.currentLeft = left
-        c.currentTop = top
-        c.currentScale = scale
-        const orig = wzoom.options.smoothExtinction
-        wzoom.options.smoothExtinction = transition_duration
-        wzoom._transform()
-        wzoom.options.smoothExtinction = orig
-        this.add_effect(resolve => $(c.$element).on("transitionend", () => resolve()))
+        const orig = wzoom.options.smoothTime
+        wzoom.options.smoothTime = transition_duration
+        wzoom.transform(top, left, scale)
+        wzoom.options.smoothTime = orig
+        this.add_effect(resolve => $el.on("transitionend", () => resolve()))
         return duration ?? prop("step-duration", $el, null, "duration")
     }
 
@@ -816,7 +823,8 @@ class Frame {
      */
     get_notes() {
         const frame_dom = this.$frame.get()[0]
-        return find_comment(frame_dom.previousSibling, "previousSibling") || find_comment(frame_dom.firstChild, "nextSibling")
+        const txt = find_comment(frame_dom.previousSibling, "previousSibling") || find_comment(frame_dom.firstChild, "nextSibling")
+        return this.playback.menu.markdown.makeHtml(txt)
 
         /**
          *
diff --git a/slidershow/hud.js b/slidershow/hud.js
index 53298fa..f997934 100644
--- a/slidershow/hud.js
+++ b/slidershow/hud.js
@@ -34,7 +34,8 @@ class Hud {
     }
     toggle_properties() {
         this.$hud_properties.toggle()
-        if (this.properties_visible) {
+        if (this.properties_visible && this.playback.frame) {
+            // when restoring session from the hash, frame is not ready yet
             this.properties(this.playback.frame)
         }
         this.playback.session.store()
@@ -167,114 +168,97 @@ class Hud {
      * Thumbnail ribbon
      * @param {Frame} frame
     */
-    properties(frame) {
+    async properties(frame) {
+        await this.fetch_help()
+        const pp = new PropertyPanel(this)
         const $frame = frame.$frame
         const $actor = frame.$actor
-        const props = ["duration", "transition-duration", "step-li"] // XX step-li might be checkbox
-        this.$hud_properties
+        const $props = this.$hud_properties
             .html($("<p/>").html("Properties panel (Alt+P)"))
-            .append(props.map(p => this._input_ancestored(p, $frame)).flat())
 
+        // undo button
+        this.$hud_properties.append(this.playback.change_controller.get_button(), "<br>")
+
+        // element properties
         if ($actor.length) {
-            if ($actor.prop("tagName") === "VIDEO") {
-                this.$hud_properties.append(["playback-rate"].map(p => this._input_ancestored(p, $actor, "number")).flat())
+            if ($actor.prop("tagName") === "IMG") {
+                // handle [data-property=step-points]
+                const step_inputs = pp.input_ancestored("step-points", $actor)
+
+                console.log("183:  step_inputs", step_inputs) // TODO
+
+                $props.append(step_inputs)
+                $(step_inputs.filter(a => a.is?.("input"))).map((_, el) => pp.gui_step_points(frame, $(el)))
+            } else if ($actor.prop("tagName") === "VIDEO") {
+                $props.append(["playback-rate"].map(p => pp.input_ancestored(p, $actor, "number")).flat())
 
                 const original = frame.get_filename($actor).split("#")[1]
 
-                this.$hud_properties.append(this._input("video-cut", $actor, "", original, "text", "t=START[,STOP]", val => {
+                $props.append(pp.input("video-cut", $actor, "", original, "text", "t=START[,STOP]", val => {
                     const src = $actor.attr("src")
                     if (src) {
                         $actor.attr("src", [src.split("#")[0], val].join("#"))
                     } else {
-                        this.playback.hud.alert("Not implemented changing this syntax of video URL")
+                        this.alert("Not implemented changing this syntax of video URL")
                     }
                 }))
 
                 // The `video` attribute can be derived also from the real HTML attributes which is not here implemented to bear.
-                this.$hud_properties.append(this._input_ancestored("video", $actor))
+                $props.append(pp.input_ancestored("video", $actor))
             }
         }
+
+        // frame properties
+        // XX step-li might be checkbox, some of them can go to any element, not just its frame
+        const props = ["duration", "transition-duration", "step-li", "step-duration", "step-class", "step-shown", "step-transition-duration"]
+        $props
+            .append(props.map(p => pp.input_ancestored(p, $frame)).flat())
         // XX data-step could be implemented for any focused element
     }
 
-    /**
-     * Generate <input type=number> into the Properties panel.
-     * Recursively generate such input for the ancestors (<section>) too.
-     * @param {string} p Property name (ex: 'duration')
-     * @param {jQuery} $el $frame or its parents up to main (elements having properties)
-     * @param {string} name Tag name, prepended to the property <label>
-     * @returns
-     */
-    _input_ancestored(p, $el, type="text", name = "") {
-        const original = $el.data(p)
-        const element_property = this._input(
-            p, $el, name, original, type,
-            prop(p, $el.parent()),
-            v => {
-                // v is "" when user deletes input
-                // v is undefined when we undo a change and the original value was undefined
-                //  (and not converted to the empty string via <input> value)
-                if (v === "" || v === undefined) {
-                    $el.removeAttr(`data-${p}`)
-                    $el.removeData(p)
-                } else {
-                    $el.attr(`data-${p}`, v)
-                    $el.data(p, v)
-                }
+    async fetch_help() {
+        if (!this._help) {
+            this._help = await $.ajax({
+                dataType: "text",
+                url: DOCS_URI
             })
-
-        // Ask all the parents to the same property (duplicating the <input>)
-        if ($el.parent().length && !$el.is("main")) {
-            $.merge(element_property, this._input_ancestored(p, $el.parent(), type, $el.parent().prop("tagName")))
         }
-        return element_property
     }
 
-    /**
-     * Generate <input> into the Properies panel.
-     * @param {string} p Property name (ex: 'duration')
-     * @param {jQuery} $el $frame or its parents up to main (elements having properties)
-     * @param {string} name Tag name, prepended to the property <label>
-     * @param {string} value Initial value.
-     * @param {string} type <input> type, like "text"
-     * @param {string} placeholder HTML placeholder
-     * @param {Function} change Callback to revert changes
-     * @returns
-     */
-    _input(p, $el, name, value, type, placeholder, change) {
-        const pl = this.playback
-        const original_frame = pl.frame.index
-        return [
-            $("<label/>", { "text": `${name} ${p}: ` }),
-            $("<input />")
-                .attr("type", type)
-                .attr("placeholder", placeholder)
-                .attr("name", `${name}${p}`)
-                .val(value)
-                .on("change", function () {
-                    const previous = value
-                    value = $(this).val()
-                    change($(this).val()) // change the property in the DOM
-                    pl.change_controller.change(() => { // undo change
-                        // Other frame contents was changed. We have to return there first.
-                        // Note that we do not return in case of a common <section> or <main>.
-                        const $fr = pl.frame.$frame
-                        if (!($fr.closest($el).length || $fr.find($el).length)) {
-                            pl.goToFrame(original_frame)
-
-                        }
-                        // Change the properties panel <input> back
-                        // Why accessing via name?
-                        // Since we could changed the slide (and refreshed the panel HTML),
-                        // the original element does not have to exist.
-                        $(`[name=${$(this).attr("name")}]`).val(previous).focus()
-                        change(previous)
-                        value = previous
-
-                        // TODO General shortcuts should be disabled when editing inputs here. Like "n".
-                    })
-                }),
-            "<br>"
-        ]
+    get_help(property, short = false, display = true) {
+        let text
+        if (!this._help) {
+            this.fetch_help()
+            text = "Loading docs, try again"
+        } else {
+            const real_name = "data-" + property
+            const rr = short ? `#+ \`${real_name}\`\\n([\\s\\S]*?)(?=\\n)` : `#+ \`${real_name}\`\\n([\\s\\S]*?)(?=\\n#)`
+            const r = new RegExp(rr, "m")
+
+            const m = this._help.match(r)
+            if (m) {
+                if (short) {
+                    text = m[1]
+                } else {
+                    const docs_link = `<a href="${HOME_PAGE}#${real_name}">→ docs</a>`
+                    // point internal links to the homepage
+                    const links = m[1].replaceAll("`](#", "`](" + HOME_PAGE + "#")
+                    // TODO check XSS risk
+                    const markdown = this.playback.menu.markdown.makeHtml(links)
+                    text = docs_link + markdown
+                }
+            }
+        }
+
+        const error = `Cannot fetch help for ${property}`
+        if (display) {
+            if (!text) {
+                this.alert(error)
+            } else {
+                new $.Zebra_Dialog(text, { type: "information", title: property })
+            }
+        } else {
+            return text || error
+        }
     }
 }
\ No newline at end of file
diff --git a/slidershow/launch.js b/slidershow/launch.js
index 4dae8e3..367523c 100644
--- a/slidershow/launch.js
+++ b/slidershow/launch.js
@@ -4,6 +4,11 @@ const $hud = $("#hud")
 const FRAME_SELECTOR = "main article,main article-map"
 const FRAME_TAGS = "article, article-map" // Can be used only in the <main> context. Because sometimes FRAME_SELECTOR is too strict.
 
+/** To fetch docs */
+const DOCS_URI = "https://cdn.jsdelivr.net/gh/CZ-NIC/slidershow@main/README.md"
+/** To link docs */
+const HOME_PAGE = "https://github.com/CZ-NIC/slidershow/"
+
 /**
  * When exporting: Setting src directly on more than few hundred photos would kill the tab instantanely;
  * hence we use EXPORT_SRC instead. (The browser will not start loading.)
@@ -37,10 +42,12 @@ Private attributes that are not documented in the README because the user should
 * [data-templated] This element was inserted only temporarily throught a template (ex: footer in an article or a <head> vendor script). Should not be exported.
 * [data-preloaded] The frame has already been preloaded.
 * data("step-original") Temporarily change [data-step] value.
+* data("hud-stringified") The attribute data is not a scalar.
 * .step-shown Frame step index has greater value so we see this element.
 * .step-hidden Frame step index has lower value so we do not see this element.
 * .step-not-yet-visible Auxiliary window highlights not-yet-seen elements.
 * <img-temp-animation-step> Tags that help distinguish image zoom step from the image step.
+* trigger("wzoomed") Img with wzoom action.
 */
 
 // var variables that a hacky user might wish to change. Might become data-attributes in the future.
diff --git a/slidershow/menu.js b/slidershow/menu.js
index 95ba484..bc4894f 100644
--- a/slidershow/menu.js
+++ b/slidershow/menu.js
@@ -6,6 +6,7 @@ class Menu {
         this.aux_window = new AuxWindow()
         this.$menu = $("menu").show(0)
         this.$start_wrapper = $("#start-wrapper")
+        this.markdown = new showdown.Converter()
 
         this.$start = $("#start").focus().click(() => this.start_playback())
 
diff --git a/slidershow/property_panel.js b/slidershow/property_panel.js
new file mode 100644
index 0000000..b17d6ba
--- /dev/null
+++ b/slidershow/property_panel.js
@@ -0,0 +1,183 @@
+class PropertyPanel {
+    constructor(hud) {
+        this.hud = hud
+        this.playback = hud.playback
+    }
+
+
+    /**
+     * Step-points GUI
+     * @param {Frame} frame
+     * @param {jQuery} $input <input> for a [data-step-points] element
+     */
+    gui_step_points(frame, $input) {
+        const $wrap = $("<div />").insertAfter($input)
+        const cc = this.playback.change_controller
+        const $actor = frame.$actor
+        const points = JSON.parse($input.val() || '[]')  // load set of points from the given <input>
+
+        $wrap.append(points.map(p => new_point(p)))
+        $input // refresh from either: user editing <input>, user did undo, not from us having edited <input>
+            .off("change.step-points undo-performed")
+            .on("change.step-points undo-performed", () => {
+                $wrap.remove()
+                $button.remove()
+                $actor.off("wzoomed")
+                this.gui_step_points(frame, $input)
+            })
+
+        // new point button
+        const $button = new_tag("+")
+            .on("click", () => {
+                const $new_point = new_point(frame.zoom_get($actor), true).trigger("click").appendTo($wrap)
+                cc.change(() => $new_point.trigger("dblclick"))
+            })
+            .insertAfter($wrap)
+
+        function new_point(point, push = false) {
+            if (push) {
+                points.push(point)
+            }
+
+            const $point = new_tag(point, true)
+                .on("click", function () { // zoom to given point
+                    if ($(this).hasClass("active")) { // blur
+                        $("div", $wrap).removeClass("active")
+                        $actor.off("wzoomed")
+                        return
+                    }
+                    $("div", $wrap).removeClass("active")
+                    $(this).addClass("active")
+                    $actor
+                        .off("wzoomed")
+                        .on("wzoomed", (_, wzoom, minor_move) => {
+                            const { currentLeft, currentTop, currentScale } = wzoom.content
+                            point[0] = Math.round(currentLeft)
+                            point[1] = Math.round(currentTop)
+                            point[2] = Math.round(currentScale)
+                            $("span", this).html(JSON.stringify(point))
+                            refresh_points(minor_move)
+                        })
+
+                    // why timeout? This would prevent dblclick
+                    setTimeout(() => frame.zoom_set($actor, ...point), 0)
+                })
+                .on("dblclick", function () { // remove given point
+                    const index = points.indexOf(point)
+                    points.splice(index, 1)
+                    $(this).fadeOut()
+                    refresh_points()
+                    cc.change(() => {
+                        points.splice(index, 0, point)
+                        $(this).fadeIn()
+                        refresh_points()
+                    })
+                })
+            return $point
+
+            function refresh_points(minor_move = false) {
+                // Why `change.$`? We want to ignore our `change.step-points`
+                // that would create a loop and delete this very container.
+                $input.val(JSON.stringify(points))
+                if (!minor_move) {
+                    $input.trigger("change.$")
+                }
+            }
+        }
+        function new_tag(html, stringify = false) {
+            return $("<div />", {
+                "html": "<span>" + (stringify ? JSON.stringify(html) : html) + "</span>",
+                "class": "hud-point"
+            })
+        }
+    }
+
+
+    /**
+     * Generate <input type=number> into the Properties panel.
+     * Recursively generate such input for the ancestors (<section>) too.
+     * @param {string} p Property name (ex: 'duration')
+     * @param {jQuery} $el $frame or its parents up to main (elements having properties)
+     * @param {string} name Tag name, prepended to the property <label>
+     * @returns
+     */
+    input_ancestored(p, $el, type = "text", name = "") {
+        const original = $el.data(p)
+        const element_property = this.input(
+            p, $el, name, original, type,
+            prop(p, $el.parent()),
+            v => {
+                // v is "" when user deletes input
+                // v is undefined when we undo a change and the original value was undefined
+                //  (and not converted to the empty string via <input> value)
+                if (v === "" || v === undefined) {
+                    $el.removeAttr(`data-${p}`)
+                    $el.removeData(p)
+                } else {
+                    $el.attr(`data-${p}`, v)
+                    $el.data(p, $el.data("hud-stringified") ? JSON.parse(v) : v)
+                }
+            })
+
+        // Ask all the parents to the same property (duplicating the <input>)
+        if ($el.parent().length && !$el.is("main")) {
+            $.merge(element_property, this.input_ancestored(p, $el.parent(), type, $el.parent().prop("tagName")))
+        }
+        return element_property
+    }
+
+    /**
+     * Generate <input> into the Properies panel.
+     * @param {string} p Property name (ex: 'duration')
+     * @param {jQuery} $el $frame or its parents up to main (elements having properties)
+     * @param {string} name Tag name, prepended to the property <label>
+     * @param {string} value Initial value.
+     * @param {string} type <input> type, like "text"
+     * @param {string} placeholder HTML placeholder
+     * @param {Function} change Callback to revert changes
+     * @returns
+     */
+    input(p, $el, name, value, type, placeholder, change) {
+        const pl = this.playback
+        const original_frame = pl.frame.index
+
+        if (typeof value === "object") {
+            $el.data("hud-stringified", true)
+            value = JSON.stringify(value) // ex: step-points
+        }
+
+        return [
+            $("<label/>", { "text": `${name ? " - " + name : p}: `, "title": this.hud.get_help(p, true, false) })
+                .on("click", () => this.hud.get_help(p)),
+            $("<input />")
+                .attr("type", type)
+                .attr("placeholder", placeholder)
+                .attr("name", `${name}${p}`)
+                .attr("data-property", p)
+                .val(value)
+                .on("change", function (_) {
+                    const previous = value
+                    value = $(this).val()
+                    change($(this).val()) // change the property in the DOM
+                    pl.change_controller.change(() => { // undo change
+                        // Other frame contents was changed. We have to return there first.
+                        // Note that we do not return in case of a common <section> or <main>.
+                        const $fr = pl.frame.$frame
+                        if (!($fr.closest($el).length || $fr.find($el).length)) {
+                            pl.goToFrame(original_frame)
+
+                        }
+                        // Change the properties panel <input> back
+                        // Why accessing via name?
+                        // Since we could changed the slide (and refreshed the panel HTML),
+                        // the original element does not have to exist.
+                        $(`[name=${$(this).attr("name")}]`).val(previous).focus()
+                        change(previous)
+                        value = previous
+                        $(this).trigger("undo-performed")
+                    })
+                }),
+            "<br>"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/slidershow/slidershow.js b/slidershow/slidershow.js
index e85548b..d74cdd1 100644
--- a/slidershow/slidershow.js
+++ b/slidershow/slidershow.js
@@ -22,20 +22,20 @@ loadjQuery(() => {
             referrerpolicy: "no-referrer"
         },
         {
-            src: "https://cdn.jsdelivr.net/npm/vanilla-js-wheel-zoom@6.21.0/dist/wheel-zoom.min.js",
-            integrity: "sha256-iew84VMdav48KUPfYXOXyChG413xDhB4NlDngkmVfTg=",
+            src: "https://cdn.jsdelivr.net/npm/vanilla-js-wheel-zoom@8.1.0/dist/wheel-zoom.min.js",
             crossOrigin: "anonymous"
         },
         { src: "https://cdn.jsdelivr.net/npm/js-circle-progress@0.2.4/dist/jquery.circle-progress.min.js" },
         { src: "https://cdn.jsdelivr.net/gh/e3rd/WebHotkeys@0.8.1/WebHotkeys.js" },
         { src: "https://cdn.jsdelivr.net/npm/exif-js" },
+        { src: "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js" },
         MAP_ENABLE ? { src: "https://api.mapy.cz/loader.js" } : null,
         { src: "https://cdn.jsdelivr.net/npm/zebra_dialog@3.0.5/dist/zebra_dialog.min.js" }
     ].filter(Boolean).map(f => loadScript(f))
 
     const vendor_styles = ["https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/materialize/zebra_dialog.min.css"].map(f => loadStyle(f))
 
-    const local = ["static.js", "frame_factory.js", "frame.js", "place.js", "map.js", "hud.js", "shortcuts.js", "change_controller.js", "menu.js", "playback.js", "session.js", "aux_window.js"].filter(Boolean).map(f => loadScript({ src: DIR + f }))
+    const local = ["static.js", "frame_factory.js", "frame.js", "place.js", "map.js", "hud.js", "property_panel.js", "shortcuts.js", "change_controller.js", "menu.js", "playback.js", "session.js", "aux_window.js"].filter(Boolean).map(f => loadScript({ src: DIR + f }))
 
     /**
      When there were 60 photos and 10 videos in a 230 MB presentation file, these were started before we could
diff --git a/slidershow/static.js b/slidershow/static.js
index 35ccb5c..ae8687d 100644
--- a/slidershow/static.js
+++ b/slidershow/static.js
@@ -7,9 +7,9 @@ class Interval {
      *  Auto-delaying/boosting depending on server lag.
      *  Faking intervals by timeouts.
      *
-     * @param {type} fn If callback is set, the interval directly starts.
-     * @param {type} delay
-     * @param {bool} blocking If true, the fn is an AJAX call. The fn will not be called again unless it calls `this.blocking = false` when AJAX is finished.
+     * @param {Function} fn If callback is set, the interval directly starts.
+     * @param {number} delay
+     * @param {boolean} blocking If true, the fn is an AJAX call. The fn will not be called again unless it calls `this.blocking = false` when AJAX is finished.
      *      You may want to include `.always(() => {this.blocking = false;})` after the AJAX call. (In 'this' should be instance of the Interval object.)
      *
      *      (Note that we preferred that.blocking setter over method unblock() because interval function
@@ -86,10 +86,10 @@ class Interval {
      * @return {Interval}
      */
     call_now() {
-        this.stop();
-        this._delayed();
-        this.start();
-        return this;
+        this.stop()
+        this._delayed()
+        this.start()
+        return this
     }
 
     /**
@@ -98,27 +98,27 @@ class Interval {
      */
     toggle(start = null) {
         if (start === null) {
-            this.toggle(!this.running);
+            this.toggle(!this.running)
         } else if (start) {
-            this.start();
+            this.start()
         } else {
-            this.stop();
+            this.stop()
         }
-        return this;
+        return this
     }
 
     set blocking(b) {
         if (b === false) {
-            let rtt = +new Date() - this.time1;
+            const rtt = +new Date() - this.time1
             if (rtt > this._delay / 3) {
                 if (this._delay < this.delay * 10) {
-                    this._delay += 100;
+                    this._delay += 100
                 }
             } else if (rtt < this._delay / 4 && this._delay >= this.delay) {
-                this._delay -= 100;
+                this._delay -= 100
             }
             if (this.running) {
-                this.start();
+                this.start()
             }
         }
     }
@@ -165,4 +165,15 @@ function lookupElementByXPath(path) {
     var evaluator = new XPathEvaluator();
     var result = evaluator.evaluate(path, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
     return result.singleNodeValue;
-}
\ No newline at end of file
+}
+
+/**
+ * Are elements of the arrays equal?
+ * https://stackoverflow.com/a/39967517/2036148
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {Boolean}
+ */
+function arraysEqual(a, b) {
+    return a.length === b.length && a.every((el, ix) => el === b[ix])
+  }
diff --git a/style.css b/style.css
index d5c991a..17c7d0b 100644
--- a/style.css
+++ b/style.css
@@ -161,6 +161,28 @@ frame-preview > article-map [data-step].step-not-yet-visible {
   background-color: lightgray;
   color: black;
   padding: 10px;
+  overflow: auto;
+}
+#hud #hud-properties label {
+  cursor: help;
+}
+#hud #hud-properties .hud-point {
+  display: block;
+  margin-bottom: 2px;
+}
+#hud #hud-properties .hud-point > span {
+  cursor: pointer;
+  display: inline-block;
+  background-color: lightyellow;
+  border-radius: 5px;
+  padding: 3px;
+}
+#hud #hud-properties .hud-point.active > span {
+  background-color: yellow;
+}
+#hud #hud-properties > .hud-point {
+  padding: 5px;
+  display: inline-block;
 }
 #map-hud {
   position: fixed;
diff --git a/style.less b/style.less
index 0d0cdc6..3f4341d 100644
--- a/style.less
+++ b/style.less
@@ -209,6 +209,34 @@ frame-preview {
 
         color: black;
         padding: 10px;
+        overflow: auto;
+
+        label {
+            cursor: help;
+        }
+
+        .hud-point {
+            display: block;
+            margin-bottom: 2px;
+
+            >span {
+                cursor: pointer;
+                display: inline-block;
+                background-color: lightyellow;
+                border-radius: 5px;
+                padding: 3px;
+            }
+
+            &.active>span {
+                background-color: yellow;
+            }
+
+        }
+
+        >.hud-point {
+            padding: 5px;
+            display: inline-block;
+        }
     }
 }