I like the loading spinner in the mobile nav. Nice detail!

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

The bigger question for me is how I can layer custom annotations (e.g. a link) on top of the text, as well as inline non-text content — a tiny graphic or visualization — that behaves like a text character. I’d need to account for those in “computing the lines”.

The cool thing is that you’d already know the dimensions of the text box, before rendering it on screen. This unlocks so many possibilities.

Possibly there could be a mixed approach: To define the layout of a block, CSS is just fine. But for text, the current <AnnotatedText> could be replaced with a new primitive that renders via pretext. The user would anyways not be concerned with rendering the text itself.

For svedit.dev in particular, I don’t know yet if and where pretext might best fit. Svedit is aimed at people who can write HTML and CSS to design web pages, and have them editable by default. Giving them a line-renderer interface might be much less intuitive.

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.

README: github.com/michael/sved...

Release notes: github.com/michael/sved...

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.

In-depth explanation of the solution by @johannesmutter.bsky.social here:

x.com/JohannesMutt...

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

CodeMirror is the right choice for editing here.

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

Actually you can test using the latest preview deployment: svedit-gnrkbvk0w-michael-aufreiters-projects.vercel.app

See here: x.com/JohannesMutt...

But you can also check out the branch of the PR and see for yourself.

Svedit Node Cursor by johannesmutter · Pull Request #209 · michael/svedit This continues the work from my PR #68, which replaced the JavaScript-based orientation detection with a CSS --is-horizontal variable and improved cursor trap aesthetics. That PR was closed after M...

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

Hello! And thank you. Curious to find out all the ways you succeed or fail to break Editable Website! Please sign up for the TP!

PPS: Still think SQLite should be the source of truth for content (no external dependencies and no network between server and db) but the idea of connecting websites via @atproto.com to take part in a network/neighborhood feels exciting.

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.

You can also hook up your own multi-user auth system by overriding getCurrentUser

github.com/michael/edit...

There's an ADMIN_PASSWORD set for each site. You enter it at /login to create a session.

See:

github.com/michael/edit...

And:
github.com/michael/edit...

(v2 doesn't have the backend ready yet, but will basically work the same)

Thank you!

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! 🙌

SQLite. You'd deploy a small Node.js application on a VPS where your site.sqlite3 file sits in a volume connected to that machine. Currently using Fly.io for deploying my own project, but could be any VPS or your own hardware on a Hetzer machine or something.

That's intentional. ;) All "editable websites" have that Cmd / Ctrl+E easteregg, though changes are not persisted. :)

That should work! :)