DEV Community

Cover image for Tutorial : Create a Gif Toolbar Widget

Posted on • Updated on


Tutorial : Create a Gif Toolbar Widget

Creating a toolbar widget is extremely useful because it stays on the screen across all canvas sessions. Creating this kind of widget from scratch is easy by starting out with an element and simply setting the mode property to pin in it's LimeText™ settings. However we don't want to start from scratch. The goal is to quickly make (the toolbar widget) from inspiration. For this task we will use an existing canvas as our base model. We will use the following canvas as a base for our new pinnable widget:

Base Canvas

1. Edit the existing base canvas widget in LimeText™ IDE by clicking the code button.

2. Select the `Settings` tab then add a `thumbnail` property with a link to an icon. Also add an extra property called `mode`. Set the value to `pin`.

3. Go back to the canvas by closing LimeText™ and clicking the GIF button. Your settings are auto-saved when you close the IDE.

4. When back in the canvas. The last step is to clone it. Click CLONE

Clicking PIN places the widget on the toolbar so it can be accessed from any canvas.

That's it!

The completed project is here

Top comments (0)