Custom previews

[dindinet]

Hey Kohei

Do you have a timeline for Custom Previews?

Will it be a lot of work?

Where in the repo is the code that does the default preview?

regards @dindinet

[kyoshino]

Hey 👋🏼 Custom Previews is https://decapcms.org/docs/customization/ right?

• registerPreviewStyle (CSS registration) is probably not a big deal; I’ll work on it sometime this month.
• registerPreviewTemplate might take a bit of time because it’s a React thing, but I’ll do it anyway before the 1.0 release planned for this Q3.

The default CSS is embedded in field-preview.svelte.

[dindinet]

Hi Kohei

Specifically
registerPreviewTemplate
Registers a template for a folder collection or an individual file in a file collection.

CMS.registerPreviewTemplate(name, react_component);

You won't implement it in React though, will you?

More likely
CMS.registerPreviewTemplate(name, svelte_component/template);

@dindinet

[kyoshino]

You know I’m a Svelte backer and I hate React, but an easy migration is a must for Sveltia. As the project README says, it’s designed to be a drop-in replacement for Netlify/Decap CMS. Asking existing users to rewrite their components in Svelte is not an option, unfortunately 🤣

[dindinet]

<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
  var PostPreview = createClass({
    render: function() {
      var entry = this.props.entry;
      var image = entry.getIn(['data', 'image']);
       var bg = this.props.getAsset(image);
      return h('div', {},
        h('h1', {}, entry.getIn(['data', 'title'])),
        h('img', {src: bg.toString()}),
        h('div', {"className": "text"}, this.props.widgetFor('body'))
      );
    }
  });

  CMS.registerPreviewTemplate("posts", PostPreview);
</script>

[dindinet]

Point taken. So for the time being we need to get our heads round Preact and the ideas mentioned in the Using React in Svelte article?

[kyoshino]

Actually I want to add support for Preact+HTM as an alternative to the h hell. No transpiler necessary. I used the combo for my previous project, and it worked well. It’s easy to learn for developers familiar with React. Svelte 5+ adoption will take some time.

[kyoshino]

Anyway, I need to add compatibility for the h thing first.

[jerefrer]

Hey there,

First I'd like to thank so very much everyone involved in this project 🙏
I've been following it for some time and finally got to use it for a client and so far things have been near perfect.

The only thing that I feel is missing is that there isn't a "live preview" feature where the client can see how the changes would display in the actual website. Is that what you are actually discussing here? Or is there such a feature and I missed it?

I'm a bit baffled by the number of CMSes around, and I couldn't find a single one that checks all the boxes of:

• proper i18n support
• live preview
• git-based
• framework agnostic

I have a great hopes that you could be the one 😄

Thanks for reading this, have a great day!

[kyoshino]

Sveltia CMS doesn’t have plan to support live preview out of the box, because it’s framework-specific.

[kyoshino]

Depending on your framework, if you run the CMS locally and register a preview template that embeds an <iframe>, the framework could give you real live preview, as per #169.

If it’s not the case, you have to provide full HTML/CSS with a template to render a preview that mimics the actual site.

[jerefrer]

Could custom preview kind of serve this purpose by mimicking the style of the whole page or maybe rather the style of each element? Otherwise would there be a way to expose an api that would allow the developer to implement live preview for his framework of choice? Jeremy Le dim. 12 oct. 2025 à 19:13, Kohei Yoshino ***@***.***> a écrit :

…

Sveltia CMS doesn’t have plan to support live preview, because it’s framework-specific. — Reply to this email directly, view it on GitHub <#153 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCNGTYCAQDHFCBEY6N2N33XKD4LAVCNFSM6AAAAACI7CAHCGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINRVHE2TANQ> . You are receiving this because you commented.Message ID: ***@***.***>

[kyoshino]

CMS.registerPreviewTemplate() serves as an API once implemented in Sveltia CMS.

[kyoshino]

Sveltia CMS has already implemented CMS.registerPreviewStyle(), btw. In some simple cases, like a blog post, that’s enough to mimic the actual site 😉

CMS.registerPreviewTemplate() will be implemented by the end of the year.