Electron Changelog
The following page lists the most important features and changes brought by each Electron version update. A focus is put on the features that are most likely to be used by Obsidian developers.
New Electron versions can be installed by running the Obsidian installer again.
Minimum supported Obsidian installer version: 0.14.5
(Electron v18)
This is the last version that will still receive Obsidian updates, as communicated by the developers.
Obsidian installer update notice: 1.5.12
(Electron v28)
From this version onwards, Obsidian will display a notice to the user telling them upgrade to the latest installer version.
- JS
<dialog>
toggle
andbeforetoggle
events: Detect when a dialog is shown or hidden - JS Capture video for a specific Element
- CSS Customize
<details>
and<summary>
elements - CSS
@page
margin boxes: Control the margins of printed pages - CSS
sideways-rl
andsideways-lr
writing-mode
rules: Determine the direction of text - Devtools Performance insights in Performance tab
- Devtools Ignore anonymous
() => {}
functions in stack traces - Devtools Real-time updates for CSS attributes in Elements tab
- JS
.yield()
: Temporarily yield long-running tasks to the event loop - JS
Intl.DurationFormat
: Format time durations in any language - JS Document PIP: Allows PIP modes for any element, not just
<video>
- HTML Keyboard focusable scrollers
- CSS Animate intrinsic sizes: Allow smooth animations for
min
,max
andfit-content
sizes - CSS Anchor position rule renames: Some anchor-based CSS rules have been renamed
- CSS
box-decoration-break
: Define how split-up elements should be rendered - Devtools Search for requests in
Network
tab - Devtools Stack traces for
performance.mark
and.measure
- Devtools Force more pseudo-classes on elements
- Devtools Scroll overflowed elements are marked with a badge
- Devtools Find detached elements with only JS reference usign Memory snapshots
- JS
Promise.try
: Errors in (sync/async) function are always returned as a rejected promise - JS Distinguish different pens via
deviceProperties
- CSS
font-size-adjust
: Decrease size for a fallback font - Devtools Gemini Console insights
- Devtools Inspect CSS anchor positions
- Devtools
Never pause here
option for breakpoints - Devtools User timings included in
Performance
summary - Devtools Improved Network request inspection in
Performance
panel - Devtools Cleaner Memory snapshots and more descriptive labels
- Devtools Live editing of
@keyframes
animation while inspecting
- JS Gamepad API rumble support
- JS Compute Pressure API: Represent how busy the system is on CPU level
- CSS Anchor Positioning: Natively position elements relative to other elements
- CSS
round()
,mod()
,clamp()
functions have been added - Electron
WebSQL
support has been removed - Electron Added support for the
File System API
web standard - Devtools Capture CSS selector statistics for long-running selectors in
Performance
tab - Devtools Hide and reorder tracks in
Performance
tab - Devtools
Console
tab will now show chain of error causes, instead of just the last error - Devtools Enable automatic
pretty-printing
of minified code - Devtools 20x CPU throttling speed option for
Performance
inspection
- JS
Websocket Stream API
, regulates the flow of data between client and server - CSS
light-dark(light_val, dark_val)
, which returns a value based oncolor-scheme
- Devtools WebRTC throttling
- Devtools Scroll-driven animations inspection
- Devtools Improved visualization of nested CSS
- Devtools Value editors for
var()
fallbacks - Devtools Enabled/Disable all breakpoint in
Sources
tab - Devtools UIX improvements for
Performance
tab
- JS Capture and record specific HTML Elements via
Element Capture API
- JS Programmatically open
<select>
elements viashowPicker
method - CSS Set
scrollbar-color
andscrollbar-width
to customize scrollbars - CSS Customize
::spelling-error
and::grammar-error
pseudo-elements - CSS Define
font-palette
for COLRv1 fonts - Devtools Breadcrumbs in the
Performance
timeline - Devtools Initiator of event (handler) is now shown via arrow in
Performance
timeline - Devtools Set devtools theming to match Chrome color theme
- Devtools Improved filtering of
Performance
tabs - Devtools Indentation markers in
Sources
tab
- JS Creating
<details>
groups with name attribute - JS
CloseWatcher API
for detecting closing of modals. - CSS
:user-invalid
and:user-valid
pseudo-classes for form interaction - CSS Relative color syntax for
color
- Electron Support for ESM/ECMAScript modules
- Devtools Improved animation debugging
- JS
Array.groupBy()
for grouping array values - CSS
@scope selector rules
, matches to closest ancestor - CSS Smooth entry/exit animations
- Devtools Mock/override contents of fetch requests in
Network
tab - Devtools Search improvements, shows all matches and faster
- Devtools
Sources
pane l reordering
- JS Document PiP
- CSS Custom Scroll Animators
- Devtools Specificity inspection
- Devtools Syntax highlight for preprocessed CSS
- JS Popover API
- CSS
text-wrap:balance
:A cleaner way to balance your text, max. 6 lines
- JS View Transitions API
- CSS Nesting style rules
- CSS CSS Color Level 4
- CSS
sin()
,cos()
,tan()
trigonometric functions - CSS More
:nth-child()
S syntax selectors
- JS
MathML Core
support - CSS
lh
length unit, equal to the computed line height of the element - CSS
hyphenate-limit-chars
: specifies the minimum number of characters in a hyphenated word - CSS
:picture-in-picture
: Pseudo-class for Picture-in-Picture mode - CSS
initial-letter
: Style the first letter of a block - Electron
app.getPreferredSystemLanguages()
: Get the user’s preferred system languages
- CSS Dynamic viewport units for creating better adaptive UIs
- CSS Variable COLRv1 fonts
- CSS CSS animated grid layouts
- JS
Sanitizer
API: HTML sanitization for untrusted strings - JS
Intl
number formatting API - HTML Popup elements
- CSS
:has()
selector and pseudo-class for selecting elements with specific children - CSS
ic
unit for specifying the width of ideograms
- JS Local Font Access API: Enumerate local fonts on the user’s device
- JS
AbortSignal.timeout()
for setting a timeout signal on fetch requests - CSS Range media queries: specify intervals for media queries
- CSS
overflow-clip-margin
: how far content is allowed to overflow before clipping
- HTML
inert
property: Make an element non-interactive - CSS
hwb()
color function for specifying colors
- JS
showPicker()
: Programmatically open<input>
elements - JS Multi-screen window placement API
- CSS
CSS Cascade Layers
: Control the order of CSS rules
- JS Web Transport API: Client-server messaging with low latency
- JS
findLast
andfindLastIndex
array methods - CSS COLRv1 fonts: Color fonts with multiple layers
- JS
URLPattern
: Match URLs with patterns - JS Eye Dropper API: Get color values from the screen
- JS Specify color space for
<canvas>
elements - JS WebCodecs API: Encode and decode media streams
- JS WebGPU API: Low-level graphics API
- CSS
scrollbar-gutter
: Control the space between the scrollbar and the content
- JS Read files from clipboard
- CSS
overflow: clip
: Clip content without any scrollbars
- JS Pointer Lock API: Control mouse movement and acceleration
- CSS
aspect-ratio
: Set the aspect ratio of an element
- CSS
:focus-visible
: Style elements that are focused by keyboard
- JS Web Animations API: Control animations with JavaScript
- CSS
content-visibility
: Skip rendering of off-screen elements - CSS
@property
: Define custom CSS properties
- JS
measureMemory
: Measure memory usage of a page - CSS
@supports
: Provide feature detection for CSS selectors