Add screenshots to README and documentation

[MarcSkovMadsen]

I would like potential users to be able to quickly understand what this package is and how it may help them.

A picture (or .gif video) says more than a thousand words and would help the users.

It would be nice to illustrate that

• This package is useful for editing Pydantic models in Jupyter and building interactive components in general.
• This package is useful for editing Pydantic models on the server and building data apps in general
• This package is useful for editing Pydantic models via PyScript and building data apps in general

Examples

https://pydantic-panel.readthedocs.io/en/latest/readme.html#getting-started

https://github.com/jmosbacher/pydantic-panel

[jmosbacher]

Added an image. How do you make those nice gifs you have on awesome-panel.org? do you just record video and convert to a gif or is there some nice tool that makes a gif directly if i dont want to mess around with video editing software?

[MarcSkovMadsen]

• I use Snagit to record the video.
• I use https://ezgif.com/video-speed to speed up the video (factor ~1.5) and convert to .gif if the mp4 file is large.
• I use https://www.onlineconverter.com/mp4-to-gif to convert mp4 to .gif. I can keep the screen resolution. But the file can become too large for twitter etc.

If I want to add text, transformations and/ or music I use Camtasia to edit video.

[jmosbacher]

Thanks! will look into those tools. May take me some time to master though :)