Ckeditor5: Make it clear that editor samples in the docs are demos

[AnnaTomanek]

Since the editors use the same font as the docs text, they are beautiful and consistent, but it's not always immediately clear that (1) they are interactive working examples and not a part of guide text and (2) they are not screenshots.

Any ideas how to make them stand out more, encourage people to play with them?

https://docs.ckeditor.com/ckeditor5/latest/features/blocktoolbar.html

https://docs.ckeditor.com/ckeditor5/latest/features/basic-styles.html

cc @m-kr @dkonopka @RyszardB

[wwalc]

The block toolbar is probably the most challenging example so far. As for the screenshots the most easy solution to distinguish demos and screenshots would be probably adding some styles to images that would make them stand out. Lika a border that makes them look like a post stamp or whatever.

[AnnaTomanek]

What about this:

encourage people to play with them

I mean, it doesn't need to be an animated fairy flying around and pointing at the demo, but some encouragement might be nice?

Also cc @wojtekidd and @gok9ok

[Reinmar]

Ping.

[Reinmar]

I'd see some sort of "window" around every editor. Something which pulls out the demo from the flow of the document. Perhaps, something similar to our blog:

However, the tricky part here will be to give there enough white space around the demo so the "window" doesn't affect the "lightness" of the editor UI.

In the future, we will also have to add stuff like tabs for HTML, JS and CSS and some "Edit" button. But that's... future.

---

Recently, one more interesting idea appeared – to have a note next to each editor demo that it does not use all the features. With a link to a full list of those. People are apparently confused when checking our demos because we use a small subset of all available features.

[wojtekidd]

I think that to solve the problem you could use a clear (and esthetically-pleasing) CTA like a stamp that says "Play with the demo" or "This is a real CKEditor instance", etc.

[Reinmar]

Example from notion.so:

It's actually a working demo under this overlay. So you just click and it works.

[oleq]

(somehow) related issue https://github.com/ckeditor/ckeditor5/issues/6267.