Features • Usage • Legacy Usage • Quick Start • Syntax • Installation • Troubleshooting

Why this plugin?

The problem with existing multi-column plugin? In Live Preview, when you click into one column to edit it, Obsidian collapses the entire block — sibling columns disappear, replaced by raw markup. You lose all visual context of the layout while editing.

Advanced Multi Column fixes this. It uses lightweight comment markers (%% col-start %%, %% col-break %%, %% col-end %%) instead of wrapping content in a single callout or codeblock. This means when you edit one column, the other columns stay rendered. You always see the full layout, making multi-column editing feel natural instead of fighting the editor.

Features

• Marker-based syntax — %% col-start %%, %% col-break %%, %% col-end %%
• Live Preview + Reading View — renders in both modes, toggleable independently
• Nested columns — columns inside columns, unlimited depth
• Drag to reorder — grab handle or Alt+drag to rearrange columns
• Resize by dragging — drag the vertical divider between columns
• Right-click style popover — per-column and container styling
• Inline editing — click to edit with live markdown preview
• Wikilink autocomplete — [[ triggers file suggestions inside column editors
• Image paste — paste images to auto-save and insert ![[image.png]]
• Style tokens — portable styling via marker parameters (b:, bc:, t:, sb:, hd:)
• Quick add/remove — + / x buttons in each column header
• Global settings — default layout, colors, borders, dividers

Quick Start

1. Open the command palette and run Insert 2-wide layout, or right-click in the editor and select Insert Column Layout from the context menu.
2. Click inside each column preview area to edit.
3. Drag the vertical divider between columns to resize.
4. Right-click a column to open style options.

Basic syntax

%% col-start %%
%% col-break %%
Left column content
%% col-break %%
Right column content
%% col-end %%

Content between %% col-start %% and the first %% col-break %% is ignored.

Syntax Reference

Markers must be on their own lines.

Container markers

Marker	Purpose
%% col-start %%	Start a column block
%% col-end %%	End a column block

col-start accepts optional container style tokens:

%% col-start:b:secondary,bc:accent,sb:1 %%

Column markers

Marker	Purpose
%% col-break %%	Start a new column (equal width)
%% col-break:40 %%	Start a column at 40% width
%% col-break:w:40 %%	Explicit width form

Width and style tokens can be combined:

%% col-break:35,b:blue-soft,bc:blue,t:text,sb:1 %%

Style tokens

Token	Property	Values
b:	Background	transparent, primary, secondary, alt, accent-soft, red-soft, orange-soft, yellow-soft, green-soft, cyan-soft, blue-soft, pink-soft
bc:	Border color	gray, accent, muted, text, red, orange, yellow, green, cyan, blue, pink
t: / tc:	Text color	Same as border color
sb:	Show border	1/0, true/false, yes/no, on/off
h: / hd:	Horizontal dividers	Same as show border

Nested Layout Example

%% col-start %%
%% col-break:40 %%
# Column 1
Top-level content.
%% col-break:60 %%
# Parent column
This column contains nested columns.

%% col-start %%
%% col-break %%
## Child column 1
Nested content.
%% col-break %%
## Child column 2
Nested content.
%% col-end %%
%% col-end %%

Commands

Command	Description
Insert 2-wide layout	Two equal columns
Insert 3-wide layout	Three equal columns
Insert 4-wide layout	Four equal columns
Insert layout (custom count)	Uses default count from settings
Insert nested layout	Parent with child columns template

Editing

• Click preview content to enter edit mode
• Tab / Shift+Tab — indent/unindent list items, or cycle through columns
• Esc — commit and exit edit mode
• [[ — wikilink suggestions
• Ctrl/Cmd+B — bold, Ctrl/Cmd+I — italic
• Paste image — auto-saves and inserts ![[...]]
• Drag handle or Alt+drag — reorder columns
• + — add column, x — remove column

Right-Click Style Popover

Right-click any column to:

• Style current column (background, border, text, toggles)
• Style parent container
• Add column / add child column
• Reset styles (column or parent)
• Clear all styles recursively

Settings

Settings → Community Plugins → Advanced Multi Column

• General — enable/disable live preview and reading view, default column count, minimum column width, drag handles
• Appearance — style target (all or specific column), container background/border/radius/text, vertical and horizontal divider configuration

Installation

Community Plugins (Not Available now)

1. Open Settings → Community Plugins.
2. Disable Restricted mode.
3. Search for Advanced Multi Column.
4. Install and enable.

USing BRAT Plugin

1. Install the BRAT plugin if you haven't already.
2. Open Settings → BRAT → Add Beta Plugin.
3. Enter https://github.com/amatya-aditya/advanced-multi-column and click Add Plugin.
4. Enable Advanced Multi Column in Settings → Community Plugins.

Manual

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Create folder: .obsidian/plugins/advanced-multi-column/
3. Copy the files into that folder.
4. Reload Obsidian and enable the plugin.

Legacy Syntax

CSS for older callout-based layouts ([!col] / [!col-md-*]) is supported. Marker syntax is recommended for new notes for extended features.

Use nested sibling callouts in this format:

> [!col]
> > [!col-md]
> > Left column
>
> > [!col-md]
> > Right column

If [!col-md] appears as plain text, the nested callout structure is malformed.

Development

npm install
npm run dev      # watch mode
npm run build    # production

Other Plugins

• RSS Dashboard
• Media Slider
• Zen Space

Support

If you find this plugin useful, consider supporting development:

☕ Buy me a coffee   •   Ko-fi   •   Discord

Privacy

This plugin runs locally in your vault and does not include telemetry.