New to Kirby. Any Live Preview or WYSIWYG option?

I am new to Kirby. Lovin’ it. Is there any Live Preview option? Also, what about a good WYSIWYG field option? Anything exists?

Live preview is currently worked on, will probably come in 3.3.

WYSIWYG: no, there is no option. Many use the builder plugin in combination with the markdown field instead.

That way, you can build almost anything with full control over what the user can or cannot do, while keeping the amount of Markdown to a minimum.

1 Like

That Builder plugin is great. I was wondering if there was a way to do things like in a Matrix field in Craft. Cant wait to see Live Preview!

I’m not familiar with the Matrix field, but from looking at the description, I’d say the builder is similar?

The builder field can be nested, you can create as many building blocks as needed, use it in combination with conditional fields, so it should really get you very far. As you can see, I can’t deny I’m a huge fan of the builder field…

It looks awesome. They should add it to the core!

I couldn’t agree more!

It reminds me of Replicator in Statamic https://docs.statamic.com/fieldtypes/replicator

Can we find anything more about live preview? 3.3 is in place…

Live preview has been postponed in favor of optimizing our code base in 3.3.0 and getting the Editor plugin ready for release.

1 Like

Ok, 2bad… Hoping for next release then…

Similar to WYSIWYG is Editor plugin https://github.com/getkirby/editor

First WYSIWYG editors were for decorating with all possible style options, but then added possibility to create markdown, for example instead of applying bold font and custom red color, they would give you possibility to create style with bold font and red color, and so that later you can add even more to it, without having to redecorate each element.

But Editor is even cooler, it’s also about applying markdown, but you don’t end up with some static code with classes, but you can actually change the entire wrapping for element. For example, if you added video, you can later wrap each video with <div class="responsive-video">.......</div>.

1 Like