Userscript to add Image Editor to the App Editor

Hi All,

We were really missing having the ability to crop images and add annotations to them. I wrote this userscript that adds those features to the Tulip App Editor.

The code is hosted here: Tulip_userscript_image_editor/script.js at main · TechplexEngineer/Tulip_userscript_image_editor · GitHub

New button added to the sidepanel when an image widget is selected:

Showing what the image editor modal looks like:

New features added:

Version 15.0

  • Automatic Resizing: Super large photos (like 4K images from a phone) are now automatically scaled down to HD. This completely fixes the annoying “file exceeds allowed size” errors while keeping all your text and arrows perfectly aligned!

Version 14.0

  • Massive File Size Reductions: We completely changed how the app saves your hidden “undo” data behind the scenes. This shrinks the final image file size by up to 80% to ensure lightning-fast uploads to Tulip.

Version 13.0

  • Undo and Redo: Made a mistake? You can now use the new Undo and Redo buttons in the menu, or just use your standard Ctrl+Z keyboard shortcut to fix it instantly.

Version 12.0 & 12.1

  • Sharper Arrows (v12.1): The back of the arrow line no longer pokes awkwardly through the pointy tip when you draw really thick lines.

  • Smart Toolbar (v12.0): The editing menu is now context-aware! It automatically hides controls you don’t need (like fill colors when drawing a line), keeping your screen clean and uncluttered.

Version 11.0

  • Better Text Tools: You now have full typography control. You can change the font style, choose exact text sizes, and set specific text colors. Plus, the selection box now automatically resizes to fit your words as you type.

Version 10.0 & 10.1

  • Backward Compatibility (v10.1): Opening an image edited with an older version of this tool? Your old arrows and shapes will safely upgrade to the new color system without accidentally turning red.

  • Fill Colors & Transparency (v10.0): You can now set entirely different colors for the outline and the inside of your shapes, and even make them transparent using the new opacity sliders!

Also moved script to new location: