Michael Aufreiter
@michaelaufreiter.com
Worked on svedit.dev all summer! Now building editable.website v2 on top of it.
My homepage joined a social network → michaelaufreiter.com.
Previously: postowl.com and letsken.com.
My homepage joined a social network → michaelaufreiter.com.
Previously: postowl.com and letsken.com.
With the latest commit, svedit.dev may have become the first editor that handles ALL inputs before they modify the DOM (no more DOM reconciliation needed - BIG STEP!)
(few workarounds were needed, which I hope can be removed over time — see github.com/michael/web-...)
(few workarounds were needed, which I hope can be removed over time — see github.com/michael/web-...)
November 7, 2025 at 10:59 PM
With the latest commit, svedit.dev may have become the first editor that handles ALL inputs before they modify the DOM (no more DOM reconciliation needed - BIG STEP!)
(few workarounds were needed, which I hope can be removed over time — see github.com/michael/web-...)
(few workarounds were needed, which I hope can be removed over time — see github.com/michael/web-...)
This week is dedicated to documenting and reproducing browser bugs, related to contenteditable et. al.
Issues: github.com/michael/web-...
Repros: github.com/michael/web-...
Issues: github.com/michael/web-...
Repros: github.com/michael/web-...
October 27, 2025 at 4:32 PM
This week is dedicated to documenting and reproducing browser bugs, related to contenteditable et. al.
Issues: github.com/michael/web-...
Repros: github.com/michael/web-...
Issues: github.com/michael/web-...
Repros: github.com/michael/web-...
There's a future in which you can ditch the CMS and develop and edit (!) websites and apps *all in Svelte*.
Sneak peek into editable.website v2, powered by svedit.dev.
Full video on Youtube: youtube.com/watch?v=o4kc...
Sneak peek into editable.website v2, powered by svedit.dev.
Full video on Youtube: youtube.com/watch?v=o4kc...
October 27, 2025 at 3:59 PM
There's a future in which you can ditch the CMS and develop and edit (!) websites and apps *all in Svelte*.
Sneak peek into editable.website v2, powered by svedit.dev.
Full video on Youtube: youtube.com/watch?v=o4kc...
Sneak peek into editable.website v2, powered by svedit.dev.
Full video on Youtube: youtube.com/watch?v=o4kc...
The need for TSDoc is a symptom of a bad decision, no? For what you want to express to document code, inline type definitions are not enough anyways?
October 25, 2025 at 6:21 PM
The need for TSDoc is a symptom of a bad decision, no? For what you want to express to document code, inline type definitions are not enough anyways?
A Svedit user asked if there's support inline (uneditable/dynamic) nodes.
Well, not yet. But this morning I spent an hour or so replicating ProseMirror's Dinos example. Not done yet, but kinda works.
Convo: github.com/michael/sved...
PR: github.com/michael/sved...
Well, not yet. But this morning I spent an hour or so replicating ProseMirror's Dinos example. Not done yet, but kinda works.
Convo: github.com/michael/sved...
PR: github.com/michael/sved...
October 14, 2025 at 8:01 PM
A Svedit user asked if there's support inline (uneditable/dynamic) nodes.
Well, not yet. But this morning I spent an hour or so replicating ProseMirror's Dinos example. Not done yet, but kinda works.
Convo: github.com/michael/sved...
PR: github.com/michael/sved...
Well, not yet. But this morning I spent an hour or so replicating ProseMirror's Dinos example. Not done yet, but kinda works.
Convo: github.com/michael/sved...
PR: github.com/michael/sved...
Been working on the design of a storage layer for Svedit docs. A key challenge is sharing parts (e.g. a nav) of a doc (e.g. a page) for reuse.
Svedit (the client) will always see one self-contained doc, but the server might split it up into sub-docs.
github.com/michael/sved...
Svedit (the client) will always see one self-contained doc, but the server might split it up into sub-docs.
github.com/michael/sved...
October 7, 2025 at 7:32 PM
Been working on the design of a storage layer for Svedit docs. A key challenge is sharing parts (e.g. a nav) of a doc (e.g. a page) for reuse.
Svedit (the client) will always see one self-contained doc, but the server might split it up into sub-docs.
github.com/michael/sved...
Svedit (the client) will always see one self-contained doc, but the server might split it up into sub-docs.
github.com/michael/sved...
I wish SvelteKit could provide/enable an idiomatic way of running stand-alone scripts that "just works" (and robustly respects-or-ignores Svelte/Kit-specific syntax).
vite-node is brittle. :(
vite-node is brittle. :(
October 6, 2025 at 2:11 PM
I wish SvelteKit could provide/enable an idiomatic way of running stand-alone scripts that "just works" (and robustly respects-or-ignores Svelte/Kit-specific syntax).
vite-node is brittle. :(
vite-node is brittle. :(
How about this? Counter.svelte.js becomes env-angostic Counter.js, that takes a "counter state" in the constructor. This state can either be a POJO or a proxied state (when used in a Svelte component).
svelte.dev/playground/2...
svelte.dev/playground/2...
October 4, 2025 at 10:47 PM
How about this? Counter.svelte.js becomes env-angostic Counter.js, that takes a "counter state" in the constructor. This state can either be a POJO or a proxied state (when used in a Svelte component).
svelte.dev/playground/2...
svelte.dev/playground/2...
In Svedit I got Document.svelte.js, holding reactive state that drives the editor.
However, I want to use that Document class outside of Svelte/Kit, like in a Node.js migration script.
What options do I have?
- vite-node?
- move all $state outside of Document?
- ???
However, I want to use that Document class outside of Svelte/Kit, like in a Node.js migration script.
What options do I have?
- vite-node?
- move all $state outside of Document?
- ???
October 4, 2025 at 8:43 AM
In Svedit I got Document.svelte.js, holding reactive state that drives the editor.
However, I want to use that Document class outside of Svelte/Kit, like in a Node.js migration script.
What options do I have?
- vite-node?
- move all $state outside of Document?
- ???
However, I want to use that Document class outside of Svelte/Kit, like in a Node.js migration script.
What options do I have?
- vite-node?
- move all $state outside of Document?
- ???
Svedit 0.5.0 is out.
It's all about better copy and paste.
Try selecting and copying a couple of images in your filesystem and paste them into Svedit.
Oh and since Svedit is growing up now, it's got its own domain.
svedit.dev
Enjoy!
It's all about better copy and paste.
Try selecting and copying a couple of images in your filesystem and paste them into Svedit.
Oh and since Svedit is growing up now, it's got its own domain.
svedit.dev
Enjoy!
October 1, 2025 at 8:20 PM
Svedit 0.5.0 is out.
It's all about better copy and paste.
Try selecting and copying a couple of images in your filesystem and paste them into Svedit.
Oh and since Svedit is growing up now, it's got its own domain.
svedit.dev
Enjoy!
It's all about better copy and paste.
Try selecting and copying a couple of images in your filesystem and paste them into Svedit.
Oh and since Svedit is growing up now, it's got its own domain.
svedit.dev
Enjoy!
You can fully control what happens on image paste, by utilizing the hande_image_paste hook.
September 26, 2025 at 12:12 PM
You can fully control what happens on image paste, by utilizing the hande_image_paste hook.
You can now select and copy images from your file system and paste them into Svedit.
Depending on your cursor position it will insert the correct node type (e.g. here it creates image grid items)
Try it yourself at svedit.vercel.app
Depending on your cursor position it will insert the correct node type (e.g. here it creates image grid items)
Try it yourself at svedit.vercel.app
September 26, 2025 at 12:11 PM
You can now select and copy images from your file system and paste them into Svedit.
Depending on your cursor position it will insert the correct node type (e.g. here it creates image grid items)
Try it yourself at svedit.vercel.app
Depending on your cursor position it will insert the correct node type (e.g. here it creates image grid items)
Try it yourself at svedit.vercel.app
And here's highlights in action:
September 15, 2025 at 7:48 AM
And here's highlights in action:
One last step: You want to create some UI to toggle highlights on/off. It’s up to you if you want to have a fixed toolbar (like the Svedit demo) or if you prefer to render tools in a contextual overlay, close to the cursor.
September 15, 2025 at 7:47 AM
One last step: You want to create some UI to toggle highlights on/off. It’s up to you if you want to have a fixed toolbar (like the Svedit demo) or if you prefer to render tools in a contextual overlay, close to the cursor.
Finally, you need to register this new component in the node_components registry. It’s part of the config object that you can use to inject any app-specific configuration.
September 15, 2025 at 7:47 AM
Finally, you need to register this new component in the node_components registry. It’s part of the config object that you can use to inject any app-specific configuration.
Now you write a component to render your annotation. Note, that unlike with other rich text editing frameworks, everything is Svelte-native (no 3rd-party rendering API’s).
An anchor-name is derived from the path, it can be used to position overlays relative to the annotation.
An anchor-name is derived from the path, it can be used to position overlays relative to the annotation.
September 15, 2025 at 7:47 AM
Now you write a component to render your annotation. Note, that unlike with other rich text editing frameworks, everything is Svelte-native (no 3rd-party rendering API’s).
An anchor-name is derived from the path, it can be used to position overlays relative to the annotation.
An anchor-name is derived from the path, it can be used to position overlays relative to the annotation.
Next, you need to whitelist annotations on text properties where you want to allow them. Here we specify that within a ‘story’ node the title and the description can have highlights.
September 15, 2025 at 7:47 AM
Next, you need to whitelist annotations on text properties where you want to allow them. Here we specify that within a ‘story’ node the title and the description can have highlights.
Svedit 0.4.0 introduces schema-aware text annotations.
Here’s how you can now define a custom annotation ‘highlight’. Annotations can also hold properties like any other node (see ‘link’).
Here’s how you can now define a custom annotation ‘highlight’. Annotations can also hold properties like any other node (see ‘link’).
September 15, 2025 at 7:47 AM
Svedit 0.4.0 introduces schema-aware text annotations.
Here’s how you can now define a custom annotation ‘highlight’. Annotations can also hold properties like any other node (see ‘link’).
Here’s how you can now define a custom annotation ‘highlight’. Annotations can also hold properties like any other node (see ‘link’).
Character composition in iOS Safari works differently than anywhere else, hence it was still broken in Svedit 0.2.0.
However, I just pushed a fix, and now on svedit.vercel.app you should be able to type Korean/Japanese/Chinese. Finally! 🥳
However, I just pushed a fix, and now on svedit.vercel.app you should be able to type Korean/Japanese/Chinese. Finally! 🥳
September 8, 2025 at 12:07 PM
Character composition in iOS Safari works differently than anywhere else, hence it was still broken in Svedit 0.2.0.
However, I just pushed a fix, and now on svedit.vercel.app you should be able to type Korean/Japanese/Chinese. Finally! 🥳
However, I just pushed a fix, and now on svedit.vercel.app you should be able to type Korean/Japanese/Chinese. Finally! 🥳
Svedit 0.3.0 is a big release focusing on stability & cross-browser compatibility.
You can now use character/word composition (IME), grapheme clusters (emojis) are properly recognized, and lots of bugs related to contenteditable have been fixed.
Demo: svedit.vercel.app
You can now use character/word composition (IME), grapheme clusters (emojis) are properly recognized, and lots of bugs related to contenteditable have been fixed.
Demo: svedit.vercel.app
September 3, 2025 at 7:47 PM
Svedit 0.3.0 is a big release focusing on stability & cross-browser compatibility.
You can now use character/word composition (IME), grapheme clusters (emojis) are properly recognized, and lots of bugs related to contenteditable have been fixed.
Demo: svedit.vercel.app
You can now use character/word composition (IME), grapheme clusters (emojis) are properly recognized, and lots of bugs related to contenteditable have been fixed.
Demo: svedit.vercel.app
To build an editor on top of contenteditable is like walking on eggshells. So many sneaky browser bugs, like this one in Safari 😱😱😱
svelte.dev/playground/h...
svelte.dev/playground/h...
September 3, 2025 at 12:10 AM
To build an editor on top of contenteditable is like walking on eggshells. So many sneaky browser bugs, like this one in Safari 😱😱😱
svelte.dev/playground/h...
svelte.dev/playground/h...
Just learned that Svedit — the editing library for Svelte, not the Swedish version of Reddit — was featured in yesterday's bytes.dev newsletter. 🥹
Thank you, to whoever found it - and the right words. ;)
Thank you, to whoever found it - and the right words. ;)
August 23, 2025 at 9:30 AM
Just learned that Svedit — the editing library for Svelte, not the Swedish version of Reddit — was featured in yesterday's bytes.dev newsletter. 🥹
Thank you, to whoever found it - and the right words. ;)
Thank you, to whoever found it - and the right words. ;)
Character composition now working in the live demo.
However, when doing a longpress "a" and then confirm by pressing a number, there's no compositionstart event triggered, so I miss that.
Any idea how I can detect this character selection popup, without funky timing heuristics?
However, when doing a longpress "a" and then confirm by pressing a number, there's no compositionstart event triggered, so I miss that.
Any idea how I can detect this character selection popup, without funky timing heuristics?
August 22, 2025 at 10:20 PM
Character composition now working in the live demo.
However, when doing a longpress "a" and then confirm by pressing a number, there's no compositionstart event triggered, so I miss that.
Any idea how I can detect this character selection popup, without funky timing heuristics?
However, when doing a longpress "a" and then confirm by pressing a number, there's no compositionstart event triggered, so I miss that.
Any idea how I can detect this character selection popup, without funky timing heuristics?
Svedit 0.1.0 is out, and available via npm for both JavaScript and TypeScript consumers. 🥳
Hundreds of hours went into this so far, and hundreds more to come. 😅
Enjoy!
Demo: svedit.vercel.app
Code: github.com/michael/svedit
Example repo: github.com/michael/hell...
Hundreds of hours went into this so far, and hundreds more to come. 😅
Enjoy!
Demo: svedit.vercel.app
Code: github.com/michael/svedit
Example repo: github.com/michael/hell...
August 19, 2025 at 2:22 PM
Svedit 0.1.0 is out, and available via npm for both JavaScript and TypeScript consumers. 🥳
Hundreds of hours went into this so far, and hundreds more to come. 😅
Enjoy!
Demo: svedit.vercel.app
Code: github.com/michael/svedit
Example repo: github.com/michael/hell...
Hundreds of hours went into this so far, and hundreds more to come. 😅
Enjoy!
Demo: svedit.vercel.app
Code: github.com/michael/svedit
Example repo: github.com/michael/hell...
In Svedit we've got NodeArray and NodeSelection as core primitives.
But how how to name these "gaps" between the nodes, which when focused represent a "collapsed NodeSelection" aka a "NodeCursor"?
Candidates:
- NodeCursorTrap
- NodeCursorGap
But how how to name these "gaps" between the nodes, which when focused represent a "collapsed NodeSelection" aka a "NodeCursor"?
Candidates:
- NodeCursorTrap
- NodeCursorGap
August 18, 2025 at 11:12 AM
In Svedit we've got NodeArray and NodeSelection as core primitives.
But how how to name these "gaps" between the nodes, which when focused represent a "collapsed NodeSelection" aka a "NodeCursor"?
Candidates:
- NodeCursorTrap
- NodeCursorGap
But how how to name these "gaps" between the nodes, which when focused represent a "collapsed NodeSelection" aka a "NodeCursor"?
Candidates:
- NodeCursorTrap
- NodeCursorGap