ImageWiki.js

Content blocks are dynamic content sections you can include into your pages.

They are self-contained Lit Web Components.
While Wiki.js includes many popular blocks out of the box, it's quite easy to create your own.

Included Blocks

  • Badge — A short status label in a line of text, such as Beta, New or Deprecated.
  • Color — A colour code in a line of text, with a swatch of the colour beside it.
  • Countdown — Counts down to a date and time.
  • Diagram — Draws a Mermaid diagram — flowchart, sequence, class, state, ER, gantt and more.
  • Draw.io — A diagram drawn in draw.io, stored as its own XML and edited on a canvas.
  • Image Gallery — Displays a grid of images, each opening full size in a lightbox.
  • Include — Transclude the contents of another page inside this one.
  • Index — Displays a list of pages contained in a folder.
  • Infobox — A summary box beside the text, filled in from a list of facts.
  • KaTeX — Typesets a TeX formula with KaTeX, including chemical equations written with mhchem.
  • Keyboard Shortcut — A keyboard shortcut in a line of text, drawn as keys for the reader's own keyboard.
  • Kroki — Draws a diagram through a Kroki server — Graphviz, D2, BPMN, Vega, Structurizr, TikZ and two dozen more.
  • Links Grid — A custom grid of cards, each linking to a page or an external URL.
  • Map — Shows a location on an OpenStreetMap map.
  • MathJax — Typesets a TeX formula, including chemical equations written with mhchem
  • Measurement — A distance, weight, volume, speed or temperature in a line of text, shown in the reader's own units.
  • Media Player — Plays an audio or video file inline.
  • PDF Viewer — Displays a PDF document in a viewer, page by page.
  • PlantUML — Draws a PlantUML diagram — sequence, class, state, activity, mindmap, gantt and the rest.
  • Progress — A small progress bar in a line of text, from a percentage or a count like 7/10.
  • QR Code — Shows a QR code for a link or a piece of text.
  • Spoiler — Hides content behind a cover until it is clicked.
  • Steps — Draws a numbered list as a sequence of steps.
  • Terminal Recording — Plays an asciinema recording — a .cast file — in a terminal player.
  • Timestamp — A date and time in a line of text, shown in the reader's own timezone.
  • Youtube Player — Embeds a YouTube video.

Usage