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
- Look for the Insert Block button in most editors.
- For the Markdown syntax, check out the Content Blocks section of the Markdown reference guide.