# Idea: IntelliJ plugin to show thumbnails of sketches

**URL:** <https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207>\
**Category:** Feature requests\
**Created:** [February 26, 2021, 1:16pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207 "2021-02-26T13:16:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [February 26, 2021, 1:16pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/1 "2021-02-26T13:16:25Z")

</div>

Hi! Now that I’m getting closer to 200 OPENRNDR sketches I struggle to remember which one is which.

I thought that it would be very useful to have a plugin for Idea to show thumbnails of sketches and load the code by clicking on the image. It would be like the current list of files on the left pane, but with images above each .kt file.

Here are the instructions to create a plugin: [Building Plugins with Gradle—IntelliJ Platform Plugin SDK](https://plugins.jetbrains.com/docs/intellij/gradle-build-system.html) Has anyone tried this before? I haven’t yet.

There is one [open source plugin](https://github.com/androhi/AndroidDrawableViewer) which might serve as inspiration: [https://plugins.jetbrains.com/plugin/7874-android-drawable-viewer](https://plugins.jetbrains.com/plugin/7874-android-drawable-viewer)

 ![image](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/80a1a45e2c54722eb36a8727f1399ca7a459d613.png)

Maybe it could even become the OPENRNDR plugin if other useful features are developed (snippets? shadeStyles? Built-in guide?)

What do you think? Would this be a useful addition?

---

<div class="post-metadata">

**Author:** ![dector](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/dector/32/36_2.png) [@dector](https://openrndr.discourse.group/u/dector)\
**Post date:** [March 2, 2021, 5:45pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/2 "2021-03-02T17:45:54Z")

</div>

I thought about embedding some base64-encoded metadata into the top of the file.

Or your idea was about generating pictures dynamically?

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [March 2, 2021, 6:26pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/3 "2021-03-02T18:26:45Z")

</div>

Metadata yes, but I thought about putting a path to an image. Something like

```
// @thumb="/my/thumb.jpg"

```

Base64 might look noisy for a meaningful 24bit thumb, or?

---

<div class="post-metadata">

**Author:** ![dector](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/dector/32/36_2.png) [@dector](https://openrndr.discourse.group/u/dector)\
**Post date:** [March 2, 2021, 10:24pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/4 "2021-03-02T22:24:31Z")

</div>

Yeah, I like your option more. Alternative is to keep images data in a separate folder and generate uuids for sketches instead (for linking).

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [March 3, 2021, 7:11am UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/5 "2021-03-03T07:11:02Z")

</div>

I thought of automating it too, but I often rename my sketches. Well maybe we can have different options, like first look at the metadata, if it’s not there, look in a folder for a png with the same name as the .kt file.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [February 15, 2023, 9:41am UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/6 "2023-02-15T09:41:51Z")

</div>

I realized I never posted about this again. Actually I made the plugin work (for me) and have been using it for over a year.

 ![screenshot](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/037c47d0e01bcf5f1819eeb54693af422a74a5c9.png)  
_Thumbnailer plugin panel on the right, a floating preview pane on the center._

[Source code](https://codeberg.org/hamoid/idea-thumbnails)

You can find a download under Releases, but only after reading the readme, please! 🙂

The fact that the plugin stores metadata as a comment in your Kotlin files has advantages and disadvantages:

**positive**

- The metadata is easy to sync across computers because it ends up in your repo. It’s not in a hidden internal IDE database, which would be harder to sync.
- Seeing it at the top of your file invites you to write a description for your program, which can help you understand it later.
- You can rename the Kotlin files outside of the IDE and the thumbnail stays in sync, because the metadata wouldn’t change.

**meh**

- A plugin that edits your code might be considered heresy by some 🙂
- It could potentially mess up your code if I did it wrong.

Maybe where to store the metadata could be user selectable?

If I receive feedback and make it user friendlier (an about screen? an integrated user manual? More configurable?) I could release it in the market to make it easier to install.

### Coming features

- I’m adding a feature to update the readme.md of the currently open project to show the thumbnails with links to each programs. Something like what you can see in [this repo](https://github.com/hamoid/Fun-Programming). In other words, it’s a bit like bringing the side panel with all the thumbnails online so other people can also see them and find the source code for each program.
- Grid view, instead of only one column. That would help see more thumbnails simultaneously, less scrolling.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [May 10, 2025, 12:51pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/7 "2025-05-10T12:51:50Z")

</div>

Now you can see an example of a generated README.md table in [hamoid/orchid: Creative coding with OPENRNDR and Kotlin - Codeberg.org](https://codeberg.org/hamoid/orchid)

The grid view in the IDE is also implemented. The number of columns is automatically calculated based on the width of the panel.

A recent fix: if you copy/paste a .kt program, the top header comment is now updated to make it’s ID unique.

The source code is now in Codeberg:

> **[idea-thumbnails](https://codeberg.org/hamoid/idea-thumbnails)**
>
> An WIP IntelliJ Idea plugin for showing thumbnails representing each OPENRNDR .kt file

Coming change:

- ✅ Right click thumb and choose _From most recent screenshot_ for an easy way to set the thumbnail after taking a screenshot.
- Switch from PNG to WEBP (smaller file sizes).
- Make it “framework independent”. So don’t search for OPENRNDR programs only. It should also work with Processing or other languages.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [May 23, 2025, 9:34pm UTC](https://openrndr.discourse.group/t/idea-intellij-plugin-to-show-thumbnails-of-sketches/207/8 "2025-05-23T21:34:27Z")

</div>

I think I will change the plugin to use one global folder for all thumbnails, instead of one per project.

The idea behind this is that sometimes I move programs from one project to another, and it is tedious to find the right thumbnail images and move them between project folders.

I will also stop putting the thumbnails in git repos and instead upload them to my server.

The reason for that is that at least one provider (CodeBerg) does not like it when you request 100 images at once, and it starts rate-limiting the requests, so the images look broken (for instance in the hamoid/orchid repo I linked above). If I put the images on my own server this won’t happen.
