HN user
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! :)
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 up 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!
Thank you very much for your comments! A few notes from the authors:
Texture's first goal is its use at publishers, during their review and QC processes. Word or InDesign submissions are converted to JATS using the converter from Open Journal Systems (OJS) and from then on are treated with Texture until publication.
Once journals have adopted JATS in their editing workflow, I'm sure they are willing to switch allowing submissions in JATS. Then authors have an incentive to write their papers in Texture from the beginning.
Texture is hackable and can be extended via packages implemented in JS (think Github Atom editor). Each JATS node type is implemented as a package already, with still many of them missing (math, figgroups, ...). A package implementation looks like this:
https://github.com/substance/texture/tree/develop/lib/taggin...
We understand that publishers have different needs and allow them to configure and customize the editor to any degree. We also want to open up the editor to community contributions, e.g. one could implement an R-backed visualization content type (see https://stenci.la/), that could live right in the editor. This would require introducing custom tags in the JATS serialization format, which we think is valid, if you are aware of the implications.
Texture is at an Alpha state, but a number of organisations committed to funding it's development, so we should see stable versions in the coming months. You are invited to join the Substance Consortium, which drives the development of Texture.
http://substance.io/consortium/
See the current product brief, until we have published a public roadmap.
https://docs.google.com/document/d/1v01mfeJw0IHgN7EIKE6JtEkE...
For the scientific editor mobile is not a priority atm. However we work on better mobile support for Substance in general. Beta 5 is dedicated to that among other things.
You are right. I may have broken that with the last update. Will be fixed soon. Generally, LensWriter is still in experimental state but we are working with publishers to integrate into their workflows. During April there will be a push on enabling LensWriter to read and write JATS XML files.
Just published an example that shows realtime collab capabilities:
I think the approaches of Substance and ProseMirror are quite similar. We map DOM coordinates to model coordinates and the other way around. That way we can use the native DOM for cursor navigation (not trivial to implement), but all input is applied on the model first and then updated in the view component.
I had a brief talk with the author of ProseMirror the other day. From my point of view the difference lies in scope. ProseMirror's focus is providing an editor widget that can be extended but works out of the box with HTML + markdown. With Substance you basically start from zero, and you probably have to invest more time to get going. But then you could build apps that are not limited to one isolated editor area for instance. You could build a custom title editor, body editor and metadata editor and have a shared toolbar for them and shared undo/redo history. Substance also provides a bunch of top-level UI components that you can but don't have to use. A ScrollPane with a visual scrollbar for instance. A Table Of Contents component, TwoPanel editor layout etc.
Hi Mickael!
Each content type consists of the following pieces:
- Node (model) [1] - Component (visual representation) [2] - Converter (optional, used to map from and to XML/HTML) [3]
The verbose output for heading1 you see is just the DOM projection of the data, which is custom and can be specified in the Component implementation [2]. Often you need to add extra markup and interactive elements, so that's why for Substance content (data) is not rendered 1:1 but through a custom renderer component.
Please have a look at the examples [4], which includes minimal but functional implementations using most of the available concepts.
[1] https://github.com/substance/substance/blob/master/packages/... [2] https://github.com/substance/substance/blob/master/packages/... [3] https://github.com/substance/substance/blob/master/packages/... [4] https://github.com/substance/examples#substance-examples
Thank you for sharing this on HN. Just wanted to add our introduction blog post, which may clarify some of the questions asked here.
https://medium.com/@_mql/build-your-own-editor-with-substanc...
And some usage examples:
Scientific Writing - http://substance.io/lens - https://github.com/Coko-Foundation/pubsweet-core Spreadsheet Software - https://stenci.la/demo/sheets/iris Digital Archives: - https://medium.com/@_daniel/publish-interactive-historical-d...
Hi! To clarify: Substance is compatible with Browserify and Webpack. It runs in Node and in the browser. It doesn't come as one big module, instead it lets you deep require individual files so your bundle only includes what you explicitly required. e.g. require('substance/collab/CollabServer').
I've deleted the amd.boot.js file as it's no longer supported.
Hi! I'm the developer behind the original version of Prose:
http://developmentseed.org/blog/2012/june/25/prose-a-content...
I'm no longer involved in the development. However, I do understand your security concerns. But I think this is not just a discussion about the limitations of OAuth Scopes. When using a hosted service, you always pay the price of loosing full control of your data. In return it's very convenient.
I wrote an article about decentralized publishing the other day.
https://medium.com/p/626055376c81
I would also like to mention the project I'm working on right now, Substance. It is an easy-to use self-publishing system, which runs locally and thus gives you full control about your content. (at least until you publish it, because then there's no way back ;))
See: http://substance.io
Cheers, Michael