Michael Aufreiter

Michael Aufreiter

@michaelaufreiter.com

On a mission to make the internet editable. Building https://editable.website and https://svedit.dev.

437 followers621 following542 posts

Pinned

For your next website… Skip the CMS Define structure and layout in code with Svelte Let clients edit text, images, and videos directly on the page — easily and safely, without breaking your design This is Editable — launching in preview today Install now: editable.website

With Editable 2.0 Preview 11, your website turns into an MCP server. Claude & friends can then write and update pages on your behalf. In other words: Prompt to code for layout changes (needs redeploy) Prompt to data for content changes (updates live) editable.website

Soon it'll be easier to build custom apps on top of editable.website. Add custom code through defined interfaces, while still keeping your copy in sync with upstream Editable. There might still be conflicts to resolve, but they'll be less likely.

Is there or is there planned a concept of organizations in @atproto.com? Like so I can use my personal handle to manage data on behalf of an org’s handle. (Much like on Github I’m logged in as michael but creating an issue in the svelte repo at the sveltejs org…)

Oh boy! This is already looking promising... Thanks to CSS Custom Highlights syntax highlighting can be on during editing, without messing with Svedit's selection mapping.

Michael Aufreiter@michaelaufreiter.com

Now is the time: Will try to sprinkle some TWINKLEPLOP into editable.website this weekend. 😁

Now is the time: Will try to sprinkle some TWINKLEPLOP into editable.website this weekend. 😁

pngwn@pngwn.at

After about a year, on and off, I am veeeery happy to release TWINKLEPLOP, a syntax highlighter of tremendous power! The speed of prism with the customisation of Shiki. twinkleplop.pngwn.at

Oh, and how could I forget to mention: We are running on SvelteKit 3 now. 🔥

Michael Aufreiter@michaelaufreiter.com

Big one: Editable 2.0 Preview 9 is out — Native support for multilingual sites — Copy link to block (aka deep linking) — Improve video processing (better quality, smaller file size) — Preserve structure and formatting when pasting HTML from clipboard github.com/michael/edit...

Big one: Editable 2.0 Preview 9 is out — Native support for multilingual sites — Copy link to block (aka deep linking) — Improve video processing (better quality, smaller file size) — Preserve structure and formatting when pasting HTML from clipboard github.com/michael/edit...

Michael Aufreiter@michaelaufreiter.com

I think this might be the easiest way to translate website content. What do you think? 😊

Been doing a lot of content editing on Editable sites over the past few days. At this point, I’m pressing Cmd + E from muscle memory on other websites I visit, hoping they’ll become fully editable. 😄

May be soon time for another attempt to bring syntax highlighted codeblocks to editable.website.

pngwn@pngwn.at

After about a year, on and off, I am veeeery happy to release TWINKLEPLOP, a syntax highlighter of tremendous power! The speed of prism with the customisation of Shiki. twinkleplop.pngwn.at

Editable has a minimalist single-user architecture, so adding an MCP would require some sort of multi-user realtime collab functionality. With computer use there's still just one user clicking/changing things, so nothing to complicate. :)

Editable 2.0 Preview 8 is out! — Carousel layout for galleries — Decent tooltips that bring the keyboard shortcuts to attention — Platform-dependent display of keyboard shortcuts — Pretty 404 page — And lots of smaller fixes and improvements...

Michael Aufreiter@michaelaufreiter.com

Nothing to see here... Just an in-place editable.website carousel. (Illustrations by bookofshapes.com)

Selection rectangle is CSS anchor-positioned. Focal point (crosshair) is relative positioned inside it. Scrolling the wrapping container moves the rectangle correctly but the focal point is doing silly things. Scratching my head... Safari anchor positioning bug?

What a cool person she was! RIP

Alexander Van der Bellen @bundespraesident.at

Fast ein Jahrhundert wurde Erni Mangold alt. Heute ist diese Ausnahme-Künstlerin verstorben. Erni Mangold war so vieles, Schauspielerin im Theater und im Film, Lehrerin und Vorbild – und auf unerklärliche Weise war sie immer jung, voller Energie, neugierig und geradlinig. 1️⃣

This is how you create a blog post on an Editable website. There's no concept of collections or posts. Everything is a page, and you can link them up. And get creative with how you do that.

Overwhelmingly positive reactions to editable.website. With concerns: — Can I really skip the CMS? — Is it battle-tested? — Does it support collections (posts)? — Multi-lang? Planning a series of blog posts, that should help you decide, if Editable's right for you (yet).

editable.websiteEditable — the website you can edit on the pageEditable lets you build and edit a Svelte website without adding a separate CMS. Editors work directly on the page, while the content model, components, layouts, and styling is defined in code.

Oh wow! 493 git clones of michael/editable only yesterday alone. Can't wait to see what you'll build with it! Know HTML + CSS? You're good to get started. Worked with Svelte already? Even better! If you have questions, please post them on the forum: github.com/michael/edit...

Michael Aufreiter@michaelaufreiter.com

For your next website… Skip the CMS Define structure and layout in code with Svelte Let clients edit text, images, and videos directly on the page — easily and safely, without breaking your design This is Editable — launching in preview today Install now: editable.website

Editable wouldn't have been possible without @svelte.dev. Thank you @rich-harris.dev, @paolo.ricciuti.me @dummdidumm.bsky.social, and crew for the best framework to power CMS-free websites you can edit on the page: - Tiny editing runtime overhead (thx compiler!) - Surgical DOM updates as you type

Michael Aufreiter@michaelaufreiter.com

For your next website… Skip the CMS Define structure and layout in code with Svelte Let clients edit text, images, and videos directly on the page — easily and safely, without breaking your design This is Editable — launching in preview today Install now: editable.website

Oh and Svelte being HTML-first makes actually accessible for people outside the JavaScript frameworks world. If you know HTML and CSS, you are ready to shape the pixels of your Editable website. 😁

For those curious: editable.website runs on a tiny Fly.io machine with 256MB RAM. Content is stored SQLite. Assets are just files on the volume. It's fully self-contained in a `data` folder. I did set a Cloudflare caching rule for /assets/* so all the images and video clips are served from a CDN.

Michael Aufreiter@michaelaufreiter.com

For your next website… Skip the CMS Define structure and layout in code with Svelte Let clients edit text, images, and videos directly on the page — easily and safely, without breaking your design This is Editable — launching in preview today Install now: editable.website

Oh, and you can install Editable on your machine with just a few commands and try the full functionality, including: - Creating new pages - Linking between pages - Uploading images and videos (processed in the browser) - Setting your own colors and fonts - Editing HTML/CSS in (Svelte components)