Advanced Multi Column
amatya-aditya3k downloadsAllows to create interactive multi-columns.
- Overview
- Scorecard
- Updates16
Advanced Multi Column
Create interactive, nested multi-column layouts — without losing sibling columns when editing in Live Preview.
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 —
+/xbuttons 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 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)
- 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-columnand click Add Plugin. - Enable Advanced Multi Column in Settings → Community Plugins.
Manual
- Download
main.js,manifest.json, andstyles.cssfrom 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
Other Plugins
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.