What if (now more than ever) you could do everything, but you still decide to do that one thing, and do it really well?

<SizableViewbox> is now ready to try out at editable.website in a first more or less stable version. Find the jellyfish and resize! ;) PS: You can also copy and paste .mp4 clips onto the page now.

I think pretext is really great news for web-based editors that define the layout 100%. Now you can take on text rendering yourself too, with the obvious benefits, not just for fixed width fonts (like thymer.com) but any rich text really.

Experimenting with a new primitive <SizableViewbox> for editable.website. Because sometimes you want to give site owners a few degrees of freedom in how they position and size media.

svedit.dev 0.8.0 introduces --node-caret-boundary: --some-anchor to fine-tune node gap placement in real apps, along with several bug fixes. Check the README and release notes for details. Thanks to @johannesmutter.bsky.social for additional contributions!

There's only two ways of operating: 1) Look around and try the new tools. 2) Ignore everything around me and build the thing I had in mind. Sure I can do both, but not at the same time.

Svedit 0.7.0 is out. 🥳 Thanks to @johannesmutter.bsky.social, you can now build content blocks with any layout while Svedit smartly places gap cursors using CSS Anchor Positioning. Also fixes several selection mapping bugs. Things should feel quite stable now. 👉 svedit.dev

We need @tailwindcss/vite be Vite 8 ready! FAST!! :))

AI writing is soulless. But that's just fine for iterating on an ARCHITECTURE.md doc for editable.website v2... 😛 github.com/michael/edit...

The PR @johannesmutter.bsky.social is working on is not only going to greatly improve UX of your next Svedit-based editor, but also a great source to learn about what's possible with modern CSS (Anchor Positioning et al.) github.com/michael/sved...

This is actually such a relief! :) Thank you!!! <3

Got an @atproto.com crash course by @flo-bit.dev this evening. Learned a lot! PS: We might experiment with wiring up editable.website with a PDS as a backend for storing pages, as well as figuring out how editable websites could best integrate standard.site for discovery.

Would like to invite anyone who's building websites/apps in Svelte to join the technical preview of editable.website. There's a link to a Google Form at the bottom of the page. See you! 🙌

Almost 3 years since editable.website won 2nd place at @sveltesociety.dev SvelteHack. Since then, I’ve been busy turning this from a prototype into something solid. A way to build CMS-free, in-place editable websites using only Svelte. This is v2. 🥳

Sneak peek: In Editable Website v2 you’ll be able to define a couple of colorsets (background, foreground, accent) in code. And then apply them with a keyboard combo as you edit your site.

Remember: for every thousand people speed-shipping an idea from last week, there’s an indie dev introducing their baby to the world after five years of obsessing over it. For those (like myself) who need to hear it: Slow craft is great, too.

Just thinking out loud... In editable.website v2 every piece of content is owned by a node, each having a unique id. This might enable new ways of deep-linking, that are only possible because of each page being modelled as data, not HTML. github.com/michael/edit...

Now that latest Firefox supports CSS Anchor Positioning (!!!🥳), I fixed (most!) of the remaining FF issues in Svedit and published a new release (v0.6.2). Now you can enjoy svedit.dev in Firefox too.

Block type 'Feature' more or less implemented in editable.website v2. Does the spacing feel alright at all breakpoints? (layouts designed by @johannesmutter.bsky.social)

I'm working on designing and balancing a number of core content types for editable.website. Each type comes with a number of layouts, and the challenge is to have a "layout intention" that you can recognize on desktop and mobile. Example: Feature.svelte github.com/michael/edit...

Svedit 0.6.1 is out. Fixes 2 regressions: fix: Ensure selection direction is preserved in when rendering text selections fix: Do not render selection highlight span for collapsed cursors, as this breaks Safari cursor navigation in empty nodes (see bugs.webkit.org/show_bug.cgi...)

v2 is born. Still very early days, but I decided to do development in the open, so y'all can follow along. github.com/michael/edit...

Grateful for the active discussions happening around the bug reports and feature requests I identified during svedit.dev development. github.com/w3c/editing/...

TIL the fastest way to bring up a contenteditable to try things is putting this into your browser's address bar: data:text/html,<body contenteditable>

Been struggling hard creating easy-to-maintain blocks that have 10+ layout variations for editable.website v2. Realization: A bit of redundancy in the layout bits is likely the better tradeoff, compared to having tons of parameters and a mess of conditional classes.

Great time and full house at yesterday’s @sveltesociety.dev meetup. Thank you @ermeen.com @jyc.dev and friends for having me!

Tomorrow, Tuesday December 2nd, at the @sentry.io headquarters in Vienna. See you tomorrow! 👋

Web-based editors + CSS Anchor position = <3 Here's how easy it is to position a CreateLink prompt (without any of the crazy positioning math) using Svedit 0.6.0:

Svedit 0.6.0 is out! 🥳 - All new Command API - Keyboard shortcuts - Batching of history entries - Immutable data structures (each change yields a new doc) - API docs!!! (in README) - much more... Enjoy! (Let me know which parts of the docs were hard to read, so I can improve them) svedit.dev

I think the "Small Web" is a great idea, and I believe it was the original idea of the internet. Hope that svedit.dev and the upcoming editable.website v2 can contribute to making the web smaller. :)

Excellent execution of generative visuals in combination with minimalist webdesign by @raphaelameaume.com. Love it!

The upcoming Svedit 0.6.0 (in the works since ~7 weeks) will be a huge step towards API stability. At the heart is the new Command API, that will give you a ton of flexibility to design your own editable websites and apps. Docs are already in the README: github.com/michael/svedit

I'll be speaking about "CMS-Free, Editable Websites with Svelte and Svedit" at next week's Svelte Meetup in Vienna. Very much looking forward to meeting the Austrian Svelte Society. See you there! :) www.meetup.com/svelte-socie...

Now part of the W3C Web Editing Working Group. Gave a presentation on "What is stopping developers from creating editors based only on input events?" at todays TPAC Meeting in Japan. Web-editing ftw! :)

If you haven’t found the right birthday present for me yet, worry not! Visit svedit.dev and play around. If you like what you see (and only if you really find it useful) leave a star on Github. Means the world to me knowing my work helps others. <3

In the next version of svedit.dev, you'll be able to take fine-grained control over editing behavior by defining commands, and binding them to a keymap.

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-...)

TIL you actually *can* cancel character composition input events. function oncompositionstart() { // aborts the IME, that was about to start; window.getSelection().removeAllRanges(); } * works in all browsers; this way i can prevent the situation where Svedit gets destroyed. 🥳

Is there way I can follow *every* Svelte person in the Bluesky? :D

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-...

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...

Tell me what I'm missing, but I don't understand why types in JavaScript needed a new syntax. JSDoc comments should have been the way. No compile step needed to run a program. Lets you copy and paste a snippet of code and run it in the browser console, etc. Why we needed .ts?

Will be chatting with @paolo.ricciuti.me later today (~4:30pm), and give a short demo on what's new for svedit.dev. See you there! :)

Browser mode testing! 🥳

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...

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...

Hey @danabra.mov. Thanks for this inspiring writeup! Got a two questions: Shouldn't we force (encourage?) any identity to also run their own server? Only then people truly own their data, no? What if we purposely didn't solve aggregation at all? It's the layer where people start to game the system

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. :(

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? - ???

svelte.dev/packages is now live! It's a convenient and easily discoverable place to find a sampling of high quality packages in the ecosystem. We hope it will give confidence in the Svelte ecosystem to newcomers and help them get started more easily.