Navigating a HyperDoc

hyperdoc

Navigation through a HyperDoc is not very different from browsing the Web, but there are a few important features that are not easily discoverable.

Links

Links inside the HyperDoc universe are shown as underlined black text. This makes them distinguishable from standard Web links, which are conventionally rendered in blue. HyperDoc links can point to any piece of data, not just to other HyperDoc pages.

Panes

When you click on a link, the panes to the right of the current one are closed, and a new pane is opened for the link destination to the right of the current one.

Shift-clicking opens the link destination in a new pane to the right of the rightmost open pane. No panes are closed. This is particularly useful for opening multiple panes for the same object and compare view side by side.

You can close a pane using the button in the top-right corner. To its left, there is a button for expanding the pane to the full browser window. One more step to the left, there's a button to redraw the pane after a change in the underlying code or data.

Looking behind the scenes

Alt-clicking provides access to background information. If you alt-click on an action button, you see the code that is run when you click the button. If you alt-click the title tab of a view, you see the view definition, including in particular its source code.

You can even access the implementation details of the object inspector that HyperDoc is built on. If you alt-click on the title bar of a pane, you get to inspect the pane object, from which you can navigate to the view objects and to their representation in the DOM or as HTML.

Computed text

HyperDoc text pages can contain computed text. It is indicated by dashed underlines (such as (str:concat "these" " " "words")), and when you hover over it with the mouse, you can see the expression that computes the displayed text.

Code examples

Code examples, introduced by a defexample form, are shown with a play button ► in front of the definition. You can run the example and inspect the result by clicking on this button.

Example:

the-answer