I fully agree. The content absolutely needs to be clean and maintainable.
I think that a preview mode could be a great solution, but the question is how to make sure that the preview is in sync with the content but not generated on the server for every single keypress either. Maybe that needs some kind of markers in the templates to tell the Panel which piece of content gets inserted where and how?
There are some other issues we need to handle, because a lot of CMSs nowadays use some kind of postprocessing on the content, take SmartyPants (which is part of kirby) for example. It turns straight quotes into curly quotes and can do some other tasks as well.
If we care about beautiful and interesting layouts, we need tools like those to provide decent typography. We can convert straight quotes on-the-fly using JavaScript in a frontend editor, but what about more advanced features? Take PHP Typography for example, which also adds some <span> tags for styling your content and provides hyphenation by adding ­ characters were applicable. This is getting so complex, that doing text transformations like PHP Typography does are very hard to integrate into an WYSIWYG-editor. You also really donāt want to have all those special characters like zero-width spaces and shy hyphens in the source of your content.
I know, that not everyone needs PHP Typography, but I think there are other examples, where postprocessing plays an important role. So what solutions do we have?
Which approach would you prefer?
I donāt get the hype about. Frontend editing is clumsy. If youāve a 27" imac, you mayāve enough space left to work with. People tend to make sure their page looks good on their computer then, add some space there, resize images, trying to set every pixel exactly. They forget about other devices ā much more if they see their changes in real time.
Wow! BTW: Thanks for every single answer of you all! Youāre awesome and I really appreciate this discussion. 
Okay, forget about the WYSIWYG Editor. Iāve used the wrong term to name it. As I wrote:
So I personally would prefer an editor like the markdown editor by @DieserJonas. Itās sort of WYSIWYG but itās also still a real markdown editor. An editor in which you canāt see which markdown commands youāve used is way too complex on both sides: on code and on usability.
I like the idea having a preview beside of the content.
Or alternatively like the Ghost Blog Web-App.
Yes, thatās true. Thatās also what I love on Kirby as a developer. And thatās also something I wrote down somewhere in this thread: in my opinion this has to be optional because the panel has to fit the workflow of the person who is adding, filling and editing the content and also to the use case - not vice versa. But in simply one use case it can be the perfect one: the use case of filling, editing or adding content on a website. And I guess this is the use case of about 80% of Kirby projects.
But I have to say this is the view of us designers and developers. And I totally agree that separating the content of itās appearance is really important to have a clean and reusable content. But that doesnāt matter for a user who is just building blocks and writing text for his own or for his companyās webpage. Itās irrelevant for the user whatās happening under the hood.
Could you explain why a frontend editor or a preview is clumsy if āpeople tend to make sure their page looks good on their computerā? I assume that it doesnāt matter if people have a separate window, a preview beside of the content or a frontend editor: they will always tend to make sure their page looks good. So this suggestion is simply about making the preview thing as easy and as good as possible.
If the preview requires extra stuff to the template, or the blueprint for the preview to work, then it adds extra load on the developer every time a site is built. Those kind of features can easily break because some backend JS + some frontend JS has to work together.
I wrote an idea for the panel-bar plugin made by @distantnative
Itās already in the making. The screenshot part is really buggy + hackish and I would not recommend anyone to use it at this stage. The panel-bar at master branch is stable and awesome, but not the preview yet.
This is how it works: It works with iframes, one for backend and one for frontend. It feels when the submit button is clicked and updates the frontend to the right when saved. That way there are no dependences at all, no extra work for the developer. That part I really like.
https://github.com/distantnative/panel-bar/tree/feature/preview
@bastianallgeier I would love to have a preview in the panel, just have this stuff in mind:
Interesting to read all the different opinions. I really like to use Kirby because I can predefine content models (blueprints) and access this data whenever I need it in a really simple way.
Iāve followed this thread for some time now and still havenāt read every single post. However, I think there are two problems, that should be solved in different ways in different ways although they are somehow related.
(And some want bothā¦ 
)
Trying to solve both problem with a single solution like a full-featured frontend editor seems legit at first, but Iām convinced that this wonāt work with Kirby given the many different use cases of this cms.
Currently Iām working on a project for a company offering temporary industrial architecture solutions. Iād say itās a medium-sized Kirby project; a project where we have to display different features, technical data etc. I try to use Kirby as a repository for content that is displayed in various ways on different pages. In some cases content is manipulated before itās shown on the website. We are even considering to create a simple API to access the data in different applications. That is probably a small-scale example of what @bastianallgeier was talking about.
Itās impossible to replicate this process for a frontend editor to show a real live-preview of the website. The only true live preview is what you see on the website. Trying to reproduce the template output in an editor will always fail if youāre working on a general solution that should work on different themes. Some services like Medium have created great editing interfaces but these tools are limited to a single service and purpose.
Currently, if youāre a tech-savy person, you can use git to see a preview of your changes on a local machine or a staging server and then simply push the changes to the live server. However, this is probably not a solution for most Kirby-users especially when developing for clients from a totally different background. Furthermore, git is not supported by most shared-hosting providers.
Iām not sure how versioning/drafting in Kirby could look like, however, there have already been some ideas on this forum.
I think the best idea is to use some kind of syntax highlighting for markdown (using the visual markdown plugin by @DieserJonas) or a simple split view preview in order to get a simple visual representation of the longer text content, e. g. for the blueprint of a blog post. This way, youāre providing a better writing experience.
If youāre clients need to create more complex layouts themselves, Iād really recommend using the kirby builder plugin by @timoetting. Iāve been using subpages but this plugin makes it a lot easier and allows you to add basic styling to the items, e. g. you could add italics to a blockquote-module etc.
For me, this is a great combination to give my clients more advanced editing possibilities while maintaining a consistent design.
ā Till
Hereās another take at in-place editing: Content Tools.
I like how they make things draggable, look at the āDrag and place contentā section in the demo.
This is one of the most beautiful Frontend Editor, I have seen. I really like the concept of arranging images and other media, just by dragging it (only the arrow icons in the background look ugly). This seems to be a perfect solution for āsingle-blockā content like a Blogpost or a news article.
I also like the fixed toolbar that stays at the same position, no matter where you edit. This makes the editor feel more like a application like InDesign or Word, rather than just a website. A toolbar could also be combined with context-sensitive panels (like in Adobeās tools) for more advanced options.
Very interesting concept. Thanks for sharing! I think using markdown with this could be very very great in the end.
As I tried that out I needed a bit to understand that every paragraph is a āblockā that could be changed by the toolbox. So building a new block needs adding a new paragraph.
Yes, lots of editors actually work that way, including the usual suspects: CKEditor, TinyMCE, Aloha Editorā¦
Itās a lot more obvious in WYMeditor as they show the paragraphs.
Hey all,
Iāve just posted about the frontend editor Iāve been working on:
http://forum.getkirby.com/t/frontend-editor-preview/2115/1
Let me know what you guys think.
Today I found this frontend editor, based on blocks and markdown: http://madebymany.github.io/sir-trevor-js/
Imagine youāre defining the available blocks via blueprint and writing the text with markdown. 
Technology:
UX:
Takeaway:
Heads up!
Somebody will do it right eventually, it could be you
Kirby
The future?
I see 2 extremes:
Visual editors fall in the middle, still a considerable piece of the pie.
What a long list. I will just add something more to it.
https://github.com/jenstornell/splitview
Iām the author of Splitview.
It refreshes the site iframe when the content is saved. That way it never need to know how the content is ment to be rendered.
In Splitview or similar tools, it would probably be possible to get the unsaved content from the panel local storage. Javascript would be required.
If we have a text field it would probably be easy to add it, as long as we have some extra markup in our html. That way the javascript will know on what element it should add the content.
Maybe the user have a panel field called ātemplateā where the panel user can add values like āblogā or āquoteā. On the frontend it might be used to have a specific html snippet / template.
How can the javascript know how to handle that? It can be really messy to keep up with problems like that. Only this one case can be hard to code well.
Same as for if statements. The structure field contains sub fields / values. For javascript to know what to do can be really hard. It might even need Ajax to extract things by PHP. If it uses Ajax it also will be much slower because it would require a new pageload everytime.
Also, think about all custom written fields that might be used.
I would say it could be nice for example Splitview to have some kind of live preview and I might add it.
However it would only be on ārootā fields and only on content that should be added directly to the site.
That means, no if statements / conditions, no structure field values (at least not at first).
If you or anyone else have another idea about or have brilliant solutions to the problems I would love to hear it.
Hi everyone,
Iām new to Kirby and really love it so far.
The Splitview plugin from @jenstornell is such a clever idea and well done ā I recommend to try it out!
I like the āDistraction free modeā and how the plugin makes use of Kirbyās responsive Panel layout.
Btw. Thanks to all forum members for the helpful posts Iāve read, yet.
You donāt actually have to use the panel at all, since stuff is just Markdown. I use Write to edit my content. Its a desktop app for markdown. Ulysses will probably work quite well too.
Interesting reading. My opinion:
My experience is, most clients and people are fine with a customized backend. And they are happy about the easiest solution to publish their content. Type your text in that textfield, hit Save and you are done.
In most cases they want to spend less time with publishing software not more.
On the other hand I would like to use such tools in the design and development stage. Not to build the whole site without having to touch a line of code. But to speed things up and reuse + rearrange my custom designed site elements.
Here is another example of the many recent builder tools:
Btw. āā¦ page builder with no limits of designā sounds a bit suspicious, but anyway.
Any news about this topic since 2016?
Is there any VISUAL Frontend-Editor that you would recommend to work with Kirby?
Kind regards
Alain
There are no such plans for Kirby, at least not in the immediate future.
With the blocks and layout fields, and customized blocks, you can actually go a long way into giving users a preview of what they will actually see on the frontend, without the need for a frontend editor, as you can see here:
You can find the roadmap here: Roadmap Ā· Kirby Feedback
A live preview for the Panel has long been on the agenda and can be upvoted here:
