_mql

Author here.

For context: The original concept was discussed here 3 years ago:

https://news.ycombinator.com/item?id=35456083

Now the project has grown up and is ready for production.

The underlying editing technology has been extracted and is published separately (MIT-licensed). See:

https://svedit.dev

Author here. For context: I just released version 0.7.0 of the library.

Thanks to Johannes Mutter (mutter.co), 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.

Thanks for your feedback!

Thank you, let us know if any questions come up. And if you had a perfect experience, let us know too! :)

https://github.com/PostOwl/postowl/discussions

Been dedicating a ton of time to this goal lately. I released a "SvelteKit template for building CMS-free editable websites" earlier this year and the idea has evolved since. I started out with using Postgres + MinIO for storage, but have switched entirely to SQLite. I also added an in-place image cropper, to resize and optimize images on the client side (WebP output) before uploading and storing them in SQLite. I chose Svelte because it's easy to build classic Web pages (with minimal JS overhead), and at same time implement the reactive layer (e.g. editing) on top of it (will be loaded async). However we are also evaluating the possibility to port this to a LAMP stack at some point. Oh and everything is dynamic here, no build steps involved, edits are live immediately.

Just launched my first client project using this approach:

https://trails-shop.at?editable=true (hit the red button in the bottom-right corner)

Project website: https://editable.website

Source Code: https://github.com/michael/editable-website

HN discussion: https://news.ycombinator.com/item?id=35456083

Twitter Thread, that explains how it works under the hood: https://twitter.com/_mql/status/1655553156799922180

The editor payload now is loaded on demand (after you click edit), so it's truly progressively enhanced now. :)

Thank you Nils Kjellman for the patch. https://github.com/michael/editable-website/pull/8

Yeah I'm a bit undecided. I'm more obsessed with pushing quality than with operating a SaaS business (which can easily turn you from creator to manager). Let's see where this leads. For now I'd be glad to help people with their websites/apps. It's fun and rewarding!

Yeah, that's a known issue. Mobile browser's shift the viewport (including fixed elements) when the soft keyboard gets activated. There are workarounds, but I haven't found a satisfying one that doesn't introduce other problems.

For now just click "Done" to bring back the toolbar (the selection will be preserved).

These two claims you mentioned are directed towards the end-user, need to make that more clear maybe. The template is aiming at frontend developers, who want to control the layout in code, but allow end-users to make content changes (without having to learn anything).

It's not a page builder for non-technical people. But as a developer or agency you can offer your clients, that you build a website for them, that they can then self-maintain without any friction.

Yeah it's essentially bare-metal web development. Thanks to Svelte and ProseMirror, it's just much easier to enable functionality, which would otherwise only be possible through a CMS. It uses Postgres, but you could use any other database as well.

You could just use the filesystem indeed.

Exactly. This is for frontend developers, who want to control the layout in code, but allow end-users to make content changes (without destroying the layout :P).

If you or your end-users prefer to also define layout and style in a visual interface, that's what CMS and No-Code tools are made for.

As for earning money: I was thinking of creating specific templates (e.g. an editable artist portfolio website) and sell those at a one off price (in a similar way that Tailwind offers paid website templates). But I'm also really happy to do custom work. Like someone comes with a design and I execute it using this approach. I think there's much value for people who want a website but have not technical experience and still want to keep the content of their website up to date themselves. I could offer training for frontend developers to build editable websites with Svelte.

Thinking about it some more, I agree that a having "static mirror" of the editable site might be a nice thing. But that's for another day to implement. If someone else does I'd be curious to see it in action!

To clarify: It's a different concept. And it's more of a starting point, rather than a solution. Its goal is not to build full-fledged a page builder or prototyping tools (such as Framer or Webflow). The layout is entirely up to the developer (and expressed in code), the content (as in structured data) is made editable. It's how Facebook/LinkedIn/Twitter/Medium etc. work, with the benefit that in many cases, you can edit within the layout. Image upload, drag and drop is all possible. The limit is what you can do with Svelte.

"CMS-free" as in "does not depend on additional software to manage content". Postgres and S3 through MinIO are my preferred choices, but you can change that to anything you'd like to use instead.

Glad you like the in-place editing. I'm also for the first time happy with the experience. You can press CMD+E for editing and CMD+S saving, and there's no layout shift, so it's really convenient for quick edits. :)

Which link (url) gives you the 500? Would love to reproduce and fix.

Intentionally there isn't. I wanted to demonstrate that a website with "editing" capabilities is no magic, and to encourage people to hack on every piece.

My experience after 25 years of web development is that often examples > libraries. Not always true, but I think particularly for websites it works well and gives you full control over every pixel to be rendered.

Incremental Static Regeneration could help here, but it introduces a whole category of implementation challenges. It may be worth it for high traffic websites but one beauty of the purely dynamic design is that you can mostly forget about all "build" and "caching" problems.

Anyways, at this point I'm just happy that my 0.2 vCPU / 512 MB Node.js instance on Northflank survived a HackerNews spike at 60% CPU max.

I'm coming from a minimalist perspective. Of course a hand-crafted site like this template doesn't cover all the enterprise CMS use cases, such as image manipulation, video transcoding etc. It's not a one-size-fits-it-all solution but for for me personally, it speeds things and gives me 100% control. I'm the person who'd rather invest in developing a FFMPEG API endpoint tailored for my application than pulling in the complexity of a CMS.

Haha, yeah. I justify this decision by assuming that designer-folks wouldn't be afraid to touch the code if it were JavaScript but would it were TypeScript. :)

To me JavaScript does a great job (if you know what you are doing) and if you're working on a reasonably small project.

Yes, the challenge is taming contenteditable. I'm using ProseMirror under the hood with custom models for <Plaintext> and <Richtext> editing, which you can adapt to your needs. One limitation (of ProseMiror) is that you don't have shared undo/redo across multiple editable areas. That's something we've solved with our own library Substance.js a while ago, but the API would be too verbose for this type of use-case, and we didn't reach that level of stability that ProseMirror has today. Web-based rich text editing is a very interesting space to watch, that imo affects web development in general.

I wrote about it here in more detail: https://letsken.com/michael/how-to-implement-a-web-based-ric...

Excellent question. They do end up downloading the extra payload at the moment. It's something that could be optimized with `await import` in the future.

My general approach to this is considering website development as "minimal web app development". Think of it as developing your very own little Facebook thingie, where people could log in and post and edit stuff, without thinking about the technicalities.

My feeling is that, thanks to abstractions like Svelte, this is not super difficult anymore and my hope is that in many cases this approach could replace integrating a CMS. At least for me it feels much more natural like this, and really all I have to know is some HTML+CSS, the SvelteKit API and SQL to model my content. Just like in the old days, where you didn't have to depend on 100 things to make a website. :)

Hi there! Here's one of the developers of Texture. Alpha 3 got delayed a bit. It's a huge release, and it will be out in a couple of days. Stay tuned!