Name: Custom Note Width – Obsidian Plugin · Obsidian Stats
Rating: 66 (36 reviews)
Author: 0skater0

by 0skater0

Score: 66/100

Install Code

Description

Category: Note Enhancements

#width #note

The Custom Note Width plugin allows users to fine-tune their note-taking experience in Obsidian. With this plugin, you can adjust the width of individual notes to suit your writing style and preferences. This means you can have a wider view for detailed notes or narrower views for focused notes. The plugin also supports different widths for different types of notes, giving you ultimate control over your note layout. Say goodbye to cluttered or cramped notes and hello to a more organized and efficient note-taking experience.

Reviews

No reviews yet.

Stats

stars

21,024

downloads

forks

1,014

days

total PRs

open PRs

closed PRs

merged PRs

total issues

open issues

closed issues

commits

Latest Version

3.0.0

18 days ago

Changelog

Internal refactor to satisfy the Obsidian Community Directory guidelines (#13). No user-visible feature changes: every setting, command and status-bar behaviour of 2.4.1 works the same way in 3.0.0. Bumped to a major version because the code around the note-width application path was rewritten end-to-end.

Changed

Per-leaf width is now driven by CSS variables and shared stylesheet rules. The plugin no longer creates or maintains a <style> element in <head>. Each tagged leaf receives --cnw-note-width inline via setCssProps; styles.css feeds that value into Obsidian's --file-line-width with a scoped [data-cnw-id] selector. The bridge rule keeps !important (this is a deliberate exception to the community guideline) because Obsidian's own defaults for --file-line-width sit on more specific selectors like .markdown-source-view.mod-cm6.is-readable-line-width, and themes may also mark the property !important. Without the marker the plugin would silently lose against those rules.
Code block width modes are now body-scoped classes. enableCodeBlockWidth plus the three mode toggles (reading / source / live preview) map to cnw-cb-reading, cnw-cb-source, cnw-cb-livepreview on document.body. One toggle affects every open leaf, same as before, but without regenerating a stylesheet on every change.
All inline styles moved to CSS classes or setCssStyles. Modals, the status-bar wrapper, the donation button, the version footer, the reset-overrides list and every other UI surface now style themselves through styles.css classes prefixed with cnw-. Dynamic values (slider width, progress bar) go through setCssStyles / setCssProps.
DOM creation goes through Obsidian's helpers. document.createElement is replaced everywhere with createEl / createDiv / createSpan (or the parent-scoped parent.createEl(...) / parent.createDiv(...)) so the plugin works correctly in popout windows.
Window-scoped timers. setTimeout, clearTimeout and requestAnimationFrame calls now go through window. so they behave correctly in popout windows.
Cross-window-safe DOM type checks. The instanceof HTMLInputElement / instanceof HTMLSpanElement guards on the status-bar text element go through Obsidian's .instanceOf() extension, so the checks stay correct across popout windows.
console.log startup / shutdown messages are now console.debug. They are still visible in the developer console at the Verbose log level; other levels stay quiet, matching Obsidian's own logging expectations.
onunload is no longer marked async. All cleanup is synchronous. registerEvent also takes care of removing the workspace and vault listeners on unload, so the manual deregistration path was removed.
Legacy settings migration is now type-safe. The migration logic in SettingsManager.loadSettings reads its input through a dedicated LoadedSettings type instead of any, so both current and pre-2.0 saved data flow through the same guarded path. Dangerous keys (__proto__, constructor, prototype) are stripped from the loaded object before it is merged with the defaults, so a hand-edited data.json can no longer poison the settings prototype chain.
YAML frontmatter key input is now guarded. The settings tab rejects __proto__, constructor and prototype as YAML keys so a batch frontmatter write cannot tamper with the callback's own object.
layout-change re-applies the width via requestAnimationFrame. The event fires on split, sidebar toggle and other layout mutations that remount leaf containers; matching the existing active-leaf-change path keeps the plugin's --cnw-note-width the last writer to the container in every layout scenario.
Bundler no longer depends on the builtin-modules npm package. esbuild.config.mjs uses Node's built-in module.builtinModules list instead.
Release workflow installs from the lockfile. npm ci replaces npm install so the build the attestation is signing is the exact one the lockfile pins.
manifest.json.description typo fixed (Let's you → Lets you).
Dev-only dependencies pruned. @eslint/js and typescript-eslint are no longer direct dev-dependencies; both are still pulled in transitively by eslint-plugin-obsidianmd.

Added

getSettingDefinitions() on the settings tab. Placeholder implementation returning an empty list so the plugin no longer trips Obsidian 1.13's declarative-settings scanner. Full search integration is deferred to a follow-up.
GitHub artifact attestations for release assets. The release workflow now runs actions/attest-build-provenance@v2 against main.js, manifest.json and styles.css, so the community directory can verify the published binaries against the workflow that produced them.

Removed

Release ZIP asset. The three release files (main.js, manifest.json, styles.css) are still uploaded individually; the extra custom-note-width.zip upload was dropped to keep the release contents aligned with Obsidian's expected asset set.
!important from styles.css. The remaining transition: max-width 0s !important rule was rewritten with a selector chain scoped by data-cnw-id, which is specific enough on its own.

Tests

End-to-end test suite under e2e/. Playwright drives an isolated Obsidian instance against a git-tracked reference vault (test-vault-master/), reproducibly, in English + Dark Mode. 112 tests across 57 groups cover every public code path plus a dedicated regression test for every historical bug in the CHANGELOG. Full run ~75 seconds. Details in e2e/README.md.

See all version on GitHub

README file from

Github

Obsidian Custom Note Width

Latest release License Open issues Last commit

Control the line width of every note in Obsidian — individually, per note, or globally. A small control in the status bar gives you instant access, YAML frontmatter persists widths per note, and a new Pills mode lets you switch between presets with a single click.

Demo GIF

Features

Per-note widths — stored in the note's frontmatter, kept locally on your device, or held only until the note is closed
Status-bar controls — choose between a classic slider or Pills (three preset buttons)
Three width units — %, px, ch
Independent code block width — so narrow prose and wide code can coexist
Hotkey-ready commands for every width operation
Full English, German and Russian UI

Installation

From Community Plugins

Open Settings → Community plugins
Browse → search "Custom Note Width"
Install → Enable

Manual

Download main.js, manifest.json and styles.css from the latest release
Copy them into <vault>/.obsidian/plugins/custom-note-width/
Restart Obsidian and enable the plugin

Requirement: Obsidian's Readable line length setting must be enabled (Settings → Editor → Readable line length).

Usage

The plugin modifies Obsidian's --file-line-width CSS variable. Control it three ways:

Method	Best for
Status-bar control (slider or pills)	Quick adjustments while reading/editing
YAML frontmatter (`custom-width: 60`)	Persisting a specific width per note
Commands (palette / hotkeys)	Power users, keyboard-driven workflows

Width units

% — relative to the editor pane (0–100)
px — absolute pixels (100–4000)
ch — character widths (10–200)

Switch units via the unit label next to the slider/value (slider mode) or inside a preset editor (pills mode).

Pills mode

Enable under Settings → Control mode → Pills. The status bar shows three buttons with your configured preset values. Click to apply. The button matching the currently applied width is highlighted; no button is active when the width is a custom value.

Settings

Setting	Description	Default
Language	Plugin UI language (Auto / English / Deutsch)	`Auto`
Enable slider	Shows the width control in the status bar	`on`
Control mode	Slider (draggable) or Pills (three preset buttons)	`Slider`
Slider width (Slider mode)	Horizontal size of the slider in pixels	`85`
Pill preset 1–3 (Pills mode)	Value and unit per preset	`30%` / `50%` / `100%`
Value display in status bar	Editable input, read-only text, or hidden for a slider-only status bar	`Editable`
Show unit selector in status bar (slider mode)	Show the unit dropdown (%, px, ch) next to the slider; off keeps the unit fixed	`on`
Default width unit	Unit used for the global default width	`%`
Default width	Width applied when a note has no per-note width	`50`
% range	Min / max for percentage unit	`0 / 100`
px range	Min / max for pixel unit	`100 / 4000`
ch range	Min / max for character unit	`10 / 200`
Enable per-note width	Let notes have their own width instead of the global default	`on`
Where per-note width is stored (per-note mode)	Frontmatter (in the note), Local (kept in the plugin, note untouched), or View only (kept until the note is closed)	`frontmatter`
Reset local width overrides (local mode)	Removes every per-note width you have stored locally	button
YAML front matter key	Frontmatter key used to store the per-note width	`custom-width`
Enable code block width	Give code blocks an independent width	`off`
Code block width unit	Unit for code block width	`px`
Code block width	Size applied to code blocks	`800`
Reading mode	Apply code block width in preview	`on`
Source mode	Apply code block width in source view	`on`
Live preview mode	Apply code block width in live preview	`on`

Commands

All commands appear in the palette and can be bound to hotkeys under Settings → Hotkeys (filter: Custom Note Width):

Command	Action
Change the width of the open note	Opens a modal, applies width to current note
Change the default note width	Opens a modal, updates the global default
Change the width for all notes	Opens a modal, rewrites every note's YAML width
Apply pill preset 1 / 2 / 3	Applies the given preset (Pills mode only)

Theme compatibility

Disclaimer: The plugin modifies --file-line-width. Custom themes may override this variable; there is no guarantee the plugin works with every theme.

Theme	Status	Obsidian Version	Notes
Default	Works	1.12.4	Fully functional
Things	Works	1.12.4	Fully functional

Your theme isn't listed? Open a PR adding a row — see CONTRIBUTING.

Reporting bugs

Please include:

Obsidian version (Settings → General)
Plugin version (Settings → Community plugins)
Theme name (Settings → Appearance → Themes)
Operating system
Console errors — open DevTools (Ctrl+Shift+I / Cmd+Option+I), Console tab, copy anything red referencing custom-note-width
Steps to reproduce and what you expected vs what happened
Screenshots or screen recordings help a lot — tools like LICEcap or ShareX work well