This is something I currently work on occasionally and so far only bits and pieces exist as a rudimentary prototype. Still, I thought I share this in case there are people who are interested programming patterns/OOP in Javascript and like to help to find ways to implement this well (aka with maintainable code).
The tool allows to quickly “sketch” user interfaces. If figma would be a tool for drawing blueprints, this is for quickly trying an idea with sharpie on a sticky note. Ideally, the UI is compact enough to embed the tool in an issue tracker, much like a WYSIWYG-text editor is embeddable.
There is no live-collaboration (since postits are usually to small for several people to draw at the same time!). Rather, there should be the possibility to copy another sketch and alter it. This keeps the collaboration model simple and the history transparent.
What works so far is the basic object model, and drag and drop with auto-grouping which is a neat alternative to stack management with send-forward, send-backward etc.
Code: Not in an easy-to-share way, at the moment! I could push it to github (or some other place) but I have not done so, since only bits and pieces work so far. It would be awesome to consider integration into Forgejo, once it works better.
Thank you, I’ll try to check it out. I didn’t yet manage to take a look at the prototype you sent me earlier, to be honest.
I would like to give it a shot for integration in Codeberg’s build of Forgejo, but it would require a clean licensing. I suggest either MIT or GPLv3+ which are definitely compatible with Forgejo (the initial version you sent to unfortunately was not).
My idea would be to allow attaching this to comments in issue and PR threads, either by keeping the state in a HTML comment inside the comment (so it is hidden) or by attaching it. We have code that renders 3D models from repositories when a certain file ending is found, and I could imagine something similar could work to render your tool whenever an attachment has a specific file ending.
I would probably go with GPLv3. Is AfferoGPL possible?
attaching this to comments in issue…
I dunno what works better in this case – what currently works is serialization/deserialization to JSON (for editable versions) and (not yet implemented) a rendering to an image (it should be easy to implement this, though)
AGPL is currently not an option for Forgejo, because it would depend on us also switching the software license to AGPL. Not impossible to happen, but it would take time at least.
Thank you for this tool. I imagine it will become very useful and I’m still looking forward to integrate it into some other software, or have something like an easy-to-use playground where I can just share an URL.
I tried to use the tool as suggested in the monthly call thread. I have recorded a video for a first hand experience, and I hope you’ll find it useful.
I’ll also write down my feedback / suggestions, but please analyze the raw video yourself first, if you find the time.
My thoughts
a default size for all elements would be useful
avoid the need for all the resizing
make sizes more consistent when the default is used
allow adding elements with a simple click
maybe an automatic horizontal resize on text edit?
I miss moving multiple elements at once, e.g. by shift+ or ctrl+clicking multiple elements, or marking them with a mouse
if an element is at the top of the canvas, the buttons (e.g. delete) that go out of the canvas are not clickable
editing text via double-clicking on the element?
I still have no clue what the feature does when I drag something from outside the canvas into the canvas, I cannot make any sense out of it
keyboard shortcuts? After the recording, I tried deleting some element with the delete key.
Double clicking is handled by the operating system whereas other operations (like) drag are handled by my own state management. It smelled like potential complications, so I refrained from implementing it. I also like not having double click, design wise. But, alas, intuitive= familiar, so it makes sense to have it…
That makes sense. I would need to teach elements to check if they need to resize themelves, but the code for such rectangle-collision/nesting checks exists.
If considered as a prototype for educational purposes I find it a good idea. Most of the features work. I also like the auto-grouping of shapes.
If you want to improve something, you could:
name the checkbox and radiobutton shapes as such (instead of “<checkbox/circle> label”) to make their purpose clearer
consistently use one single UI language (currently the “Browse..” button next to the “Undo”, “Redo” and “Save” buttons (in English) is named “Durchsuchen…” in German)
add the browsed and selected file from the filesystem to the canvas (this doesn’t work yet).
For production use:
As you pointed out, the tool’s purpose is to quickly sketch a UI unlike Figma or PenPot which are tools for building UIs step by step. Its ease of use reminds me on Balsamiq (without its functional overload and for free).
On the other hand, I am currently wondering about the benefits of this tool over your QuickMockup tool, draw.io (with its built-in UI mockup shapes and its existing tool integrations) or a PenPot wireframing kit. I guess, it’s the simplicity of use. Could you tell a bit more about this?
Quick Mockup could not zoom or pan and was a huge hack, that was hard to extend.
draw.io: Does not have auto-grouping and far more functionality, for better or worse
PenPot wireframing kit: Maybe it is just me, but if things are grouped/framed (e.g. text in a button) I need to double click to enter the group before I can edit text. This is cumbersome.
Thats not great. Do you have the file that could not be reimported? (cause that should work) Or did you try to upload in image or svg (that does not work atm)
Good idea!
Yes… Upload is a “magic” button that belongs to the browser, so the browser will label it. I would hide the actual button and trigger it via another button which I can label myself! (issue)
Yes: Because inserting a ready-made image seemed so obvious to me, I tried with JPEG, PNG, GIF and SVG images, but to no avail.
After your response I played around a bit and found out that this button opens a previously saved JSON UI file. How about labelling this button “Open..”?
Re double-clicking: I think it is mostly fine as long as there are no actions that need to be reverted. For instance, entering a text edit mode that keeps everything else possible is likely fine. Entering some menu that you need to escape first is tricky.
Personal negative experience
At work, I have a computer mouse that inadvertently double-clicks from time to time. And my smartphone sometimes has touch issues where the action is sometimes interrupted and treated wildly by some apps. For instance, when scrolling in some messenger app, I wildly leave -reactions to posts, because that’s what they apparently do on double-tap.
What about simply allowing text to flow out of the element? Is there a use case where text needs to be cut off? I would imagine that always showing the text is the safer option. or maybe wrapping it in some cases.
This actually used to be the case but it made it confusing to know where an element starts and ends and thus where it can be selected. I would love to wrap text but it is an algorithm I would need to write myself; SVG and HTML Canvas only have single-line text, so I would focus on other parts first.
TL;DR: Use automatic resize and stay simple and predictable.
Details:
From a UI perspective:
The outlined rectangle with handles serves both as a bounding box and a size control element. Therefore, the text should always stay within it.
From a UX perspective, what would users expect?
New to UI design: They likely expect a simple and predictable experience — automatic resizing fits this best.
From paper prototyping: Expectations vary. They might extend space (add paper), shorten content, or wrap text. Common denominator: simplicity and predictability.
From digital tools (e.g., Figma, Penpot, PowerPoint, LibreOffice Draw, Inkscape, Photoshop, Balsamiq): When clicking to insert text or UI elements, boxes typically resize automatically as content changes. This sets the expectation for automatic resizing.
When adjusting the bounding box later, there’s no clear standard behavior or user expectation across tools. For your tool, I’d prioritize ease of use and predictability — and leave advanced behavior to more specialized design tools.
In short: automatic resize aligns best with user expectations across experience levels.
-reactions to posts, because that’s what they apparently do on double-tap.