Beyond paragraphs and headings, the editor handles the structured blocks that make up real documentation and blog posts.

Tables

Insert a table from the toolbar or the slash menu. Once the caret is inside one, the table toolbar gives you:

• Insert row above or below
• Insert column left or right
• Delete row, delete column, delete table
• Cell borders — top, right, bottom, left, all outside, none, or clear

Toolbar buttons that can’t apply inside a table are hidden while your cursor is in one.

Code Blocks

Insert with mod+Alt+8, from the toolbar, or by typing ``` on an empty line.

Each block has a language picker. Syntax highlighting covers the full highlight.js language set, and the default for a new block is JavaScript.

Nothing inside a code block is auto-formatted, auto-substituted, or analyzed by the SEO tools — code stays exactly as typed.

Mermaid Diagrams

Set a code block’s language to mermaid and the editor renders a live diagram next to your source.

```mermaid
flowchart LR
  Draft --> Review --> Publish
```

The diagram redraws as you type. If the syntax is invalid you’ll see Invalid Mermaid syntax instead of a broken render, so you can fix it before saving.

Flowcharts, sequence diagrams, class diagrams, state diagrams, and the rest of the Mermaid syntax all work. Whether they render on your published site depends on your site’s own Mermaid setup — Sitepins renders the preview, your static site generator renders the output.

Math

Two forms, both KaTeX:

• Inline — type $E = mc^2$ to get an inline equation
• Block — type $$ on its own line for a centered display equation

Click any equation to edit its source.

iframe Embeds

Paste an <iframe> tag into the editor and it becomes an embed block with a live preview of the embedded content — a YouTube video, a CodePen, a map, a form.

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>

Sitepins reads the src, width, and height attributes and renders the real iframe inline, so you can see what you embedded without publishing first. The raw HTML is preserved exactly in your Markdown.

Images

There are four ways to get an image into a document.

From the media library

Click the Image button in the toolbar to open the media picker. Browse your project’s media folders with breadcrumbs, search by filename, or upload a new file right from the picker without leaving the editor.

From an external URL

The same picker has a field to paste an external image URL. The image is referenced at that URL rather than copied into your repository — useful for assets on a CDN you already manage.

Pasted from a web page

Copy an image from a web page and paste it into the editor. Sitepins downloads it, gives it a unique filename inside your media folder, inserts it, and commits the file along with your content when you publish. You don’t have to upload it separately.

Dropped in

Drag an image file from your desktop straight onto the editor. It uploads and inserts at the drop position.

Captions and sizing

Click an image to select it, then:

• Add a caption below it
• Resize it by dragging the handles on its edges
• Preview it full-size in a dialog

Captions are supported on images.

Shortcodes, Components, and Raw HTML

Hugo shortcodes, MDX/JSX components, and raw HTML blocks are all first-class. The editor keeps them as editable blocks and writes them back out unchanged — it won’t rewrite your {{< notice >}} into something else, or strip attributes off a component.

If you use the same block repeatedly, save it as a snippet and insert it from the toolbar.

Horizontal Rules

Type --- or ___ on an empty line.