Advanced Multi Column

Create interactive, nested multi-column layouts — without losing sibling columns when editing in Live Preview.

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

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.
Click inside each column preview area to edit.
Drag the vertical divider between columns to resize.
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 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)

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

USing BRAT Plugin

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

Manual

Download main.js, manifest.json, and styles.css from the latest release.
Create folder: .obsidian/plugins/advanced-multi-column/
Copy the files into that folder.
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

Advanced Multi Column

Description

Reviews

Stats

Latest Version

Changelog

README file from