A SvelteKit template for building CMS-free editable websites

by _mql • 3 years ago

240 82 3 years ago

cfuendev• 3 years ago

This is awesome! Admin panels are fine to me, but honestly this is a much more beautiful and productive approach. Very cool project.

Is an Astro template/integration a possibility? I'd love an editable static site that triggers Netlify builds. I actually have an Astro project on Netlify CMS that I wouldn't mind moving to this.

candrewlee14• 3 years ago

SvelteKit is such a breath of fresh air, glad to see it used on this.

Fergusonb• 3 years ago

It really is - writing a svelte component feels like writing something in vanilla html/js/css, but you get all the advantages that come with a framework.

iamdbtoo• 3 years ago

This is the primary reason I love working with it. Coming from the times of jQuery, I can think in those terms like I used to and don't have to constantly translate it into React patterns.

no_wizard2• 3 years ago

I just can't get over the `$:` reactive label syntax.

TypeScript support can be hit or miss, and there could be more improvements around the stores API

lawkwok• 3 years ago

It almost feels like a pretty PHP in the way you can mix HTML and template code inline.

nonethewiser• 3 years ago

I edit the website and then refresh and changes don’t persist. Obviously they don’t want people editing their production website, but is it otherwise supposed to persist? If not, what’s the point?

For this reason I find the demo a bit confusing.

CharlesW2• 3 years ago

Obviously they don’t want people editing their production website, but is it otherwise supposed to persist?

The repo notes that persistence requires editors to in with the (shared?) admin user and password.

Although the pitch is "CMS-free", this is a Postgres- and S3-backed content management system.

The in-place editing is extremely cool.

_mql17• 3 years ago

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

baobabKoodaa• 3 years ago

Why is Postgres needed here? Couldn't everything be saved in static files published in S3 or any other CDN?

thelittleone• 3 years ago

Very cool.

Clicking the menu Blog link gives me a 500 error.

_mql17• 3 years ago

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

berkle4455• 3 years ago

This is the same flow as Frontpage had in 1998. You edited a live-edited your site, and when you clicked publish, a static site was deployed to the world.

blacksmith_tb• 3 years ago

Sure, and Concrete5 in 2003[1]. Hard to beat editing directly (as long as you also have authentication handled) though it might be slower, if you have to tiptoe around formatting.

1: https://en.wikipedia.org/wiki/Concrete_CMS

waboremo• 3 years ago

Nice work, congrats!

It's like a great mix of TinaCMS and Dropbox Paper.

kitsunesoba• 3 years ago

Cool idea, and I really like how the site still functions for readers with JS disabled, which is (as far as I'm aware) uncommon for this sort of thing.

One thing that isn't clear from reading the GitHub page — do all visitors end up downloading the editor payload or do only admins who are logged in get that?

_mql17• 3 years ago

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

_mql17• 3 years ago

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

greenie_beans• 3 years ago

this is dope

lancesells• 3 years ago

This will sound snarky but I just write in html and css. No requirements, no set up, no steps.

prophesi• 3 years ago

Do your clients take the HTML/CSS and manually edit/add/remove pages themselves?

afavour• 3 years ago

That’s good for you but did you know many people don’t know how to code in HTML and CSS?

smt88• 3 years ago

At this point, that's like being proud you write in assembly while all the hipsters use C++. Or it's like being proud you don't use any libraries in Go.

Build steps aren't evil. For most projects, you never even touch them. You use a project template and then you're done.

What you get in return is an amount of work no human can do by hand: type-checking, tree-shaking, cross-browser shims, image optimization... it's a huge list.

At this point, I wouldn't hire someone who thinks build steps are a waste of time. Programmers should know the value of automating complex manual tasks.

efields• 3 years ago

For a lot of content this really works.

What sticks with me in a way that I don't love is that this and many other modern, simple-ish solutions to having a lightweight CMS still relies on some Postgres config. I'm being picky, but I want a DB without having to think about the DB at all. Just templates plz.

xnx• 3 years ago

Is contenteditable not widely used? Is it too limited? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

recrof• 3 years ago

contenteditable is pretty terrible if you want it to behave exactly the same on all browsers. that's why there are projects like CKeditor or TinyMCE.

_mql17• 3 years ago

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

mpeg• 3 years ago

The template linked uses contenteditable (through prosemirror) and builds on top of it

solarkraft• 3 years ago

WYSIWYG editing is still under-utilized on the web! This is exciting!

nailer• 3 years ago

CMSs really are painful. I've spent more time making Ghost work on domain.com/blog (despite content marketing being one of the main reasons to drive people to your website, Ghost doesn't support this) than I have to write a CMS before.

Looks like it uses Postgres: https://github.com/michael/editable-website

_mql17• 3 years ago

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.

phaer• 3 years ago

As far as I understand it, the dynamic website you use is the same as served to the client minus the editing parts? Would it also support a scenario where the dynamic part runs on one host, say inside an intranet and users can "publish" to pre-configured static hosts or s3 buckets with a click? Static hosting could be enough for many sites and one could combine the technical and UX advantages of your dynamic interface with the advantages of static sites for security and distribution.

I found that useful when i worked with https://www.getlektor.com/ years ago. In lektor the dynamic part runs on a users desktop machine, but it of course wouldn't need to.

_mql17• 3 years ago

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.

_mql17• 3 years ago

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!

nathias• 3 years ago

svelte and sveltekit really are a joy to use

vcryan• 3 years ago

I think this pitch overstates the problem with CMSes. It seems for many organizations, their CMS is working well for them. Not saying this doesn't have benefit, but, as for me, I rather like my CMS and don't feel like this is a big win.

input_sh• 3 years ago

It seems for many organizations, their CMS is working well for them.

I hope to work in one of such orgs some day because the most common experience I've witnessed was pain.

And things don't improve when you throw more money at a CMS. There's an entire industry of enterprise CMSs (yearly license in five figures) and their users aren't any happier with their CMS than WordPress users.

_mql17• 3 years ago

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.

naet• 3 years ago

This is a huge step down from the experience of many CMSes. Controls are limited and don't really work for building a page. Maybe convenient for very small text edits like spelling fixes but not at all a replacement for a more in depth editing experience.

danjac• 3 years ago

A full-featured CMS includes editing workflow I think: so an intern writing a press release has to have the article checked by an editor and maybe the legal department before publication, with corrections or comments included. At a pinch you could use Google Docs but that comes with more friction - hard to preview the content on the site etc and it's not so easily enforced as a locked-down CMS workflow.

yewenjie• 3 years ago

Is there some component library rather than "template" for doing this?

_mql17• 3 years ago

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.

esafak4• 3 years ago

Can you create a gallery of examples, then?

esafak4• 3 years ago

From a cursory look, the type of content it supports seems limited. Like something you would use for a minimalist journal. If it could replicate something like https://framer.com I'd be all ears. A gallery with code would help potential users better understand its potential.

clairity• 3 years ago

yah, this is like the todo app of content management, being able to change the text (and perhaps add bold and some links), and has probably been built thousands of times by now in the short history of the web. building in-place editing for fixed text nodes isn't that hard, whatever the underlying toolkit. a CMS should be able to do that in its sleep. it's when you get beyond text into other media and into layout, spacing, color systems, and dragging-and-dropping arbitrarily interleaved blocks of those things where it actually gets useful (and impressive).

_mql17• 3 years ago

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.

POiNTx• 3 years ago

This is really really cool, well done! I would consider using this instead of a traditional CMS.

sebastianconcpt• 3 years ago

This makes me like Svelte (and SvelteKit) even moAr!

SergeAx• 3 years ago

It looks and feels awesome. Then I get to GitHub repo. Isn't JavaScript deprecated and should be replaced with TypeScript wherever it possible?

zztop44• 3 years ago

No, JavaScript is not deprecated.

raihansaputra• 3 years ago

Postgres + S3 is a great choice but is there any limitation on changing it to SQLite + on disk? Thinking that this could be easily deployed to serverless+disk like fly.io without additional components.

erlend_sh• 3 years ago

I was wondering about SQLite as well, but for the purpose of easy local-first development.

primitivesuave• 3 years ago

My favorite part of SvelteKit is the interactive tutorial (learn.svelte.dev). I suspect that sometime in the past few years, I lost the ability to stay focused with traditional documentation.

thdaraujo• 3 years ago

This is great, and it's something I've always wanted. The closest I've ever got to that was Hugo and Github Pages.

Also, it's the best demo I've seen in a while. Completely obvious to use.

indyfob2008• 3 years ago

Wix, Squarespace, Weebly are also examples of websites you can "edit without changing the source code."

razemio• 3 years ago

When we enter the space of non-open source interactive website builders, I believe this list could be extended to a never-ending stream of products. Maybe this isn't exactly true, but at least in this market segment there is more than enough competition.

mhd• 3 years ago

I'm currently looking for something even more limited and lightweight, where I, as a developer, can just deploy a static site regulary (e.g. built by hugo), but with a few small sections editable on the front page, like a vacation notice, job openings etc.

Moving everything to a CMS or something like this, seems a lot of work. I'm looking at just using server-side includes for those sections, but haven't found a good editing frontend for that. Just exposing a single file in a git repository and deploying that via some build infrastructure (e.g. build.sr.ht) would be another method. Some live content preview would be nice in either case...

A surprising number of sites don't even need new pages dynamically, like blog articles, but just rather minor edits to a small subset of the content. Small businesses, medical practices etc.

lucas_codes• 3 years ago

Sounds like you would like Netlify CMS.

You can set it up so it edits a few markdown files, and these files are used in your static build.

mdrzn2• 3 years ago

I really enjoy and appreciate the demo on the landing page.

My only problem with this as an alternative to Wordpress are the claim "Put your cursor anywhere and make changes" or "Your website will do exactly what you need it to do". I see that I can clearly change text anywhere, but how do I change the template or the layout? How do I add a three columns section?

Making changes in a visual editor like Elementor is extremely easy even for non-technical people, which is why it's so mainstream.

_mql17• 3 years ago

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.

mdrzn2• 3 years ago

Ooooh now I get it, and it's extremely interesting as a solution. Thanks for explaining it to me.

I could build the basic layout, and let the customer fill it in and change it without a need for supervision.

cyanydeez• 3 years ago

Doesn't seem usable on mobile chrome. The editor bar disappears

_mql17• 3 years ago

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

frozencell• 3 years ago

Is it production ready? no

A SvelteKit template for building CMS-free editable websites

Related Stories