A small tool for sketching UIs (WIP/Concept)

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.
First a rectangle  is dragged upon another, larger rect; it gets grouped and moves along; then the group is dragged on two smaller rectangles, enclosing them, they get also grouped and move along.

2 Likes

If you have some code, is it available somewhere? I’d be pretty cool if it was feasible to integrate this into Forgejo so that fiddling with UI could become a part of code development natively, also see my comment in #178 - A new workflow for design work and feature requests - forgejo/discussions - Codeberg.org

1 Like

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.

1 Like

@fnetX: I now have code which runs as part of one app. It is not a full app yet: A lot of things do not work, but it can be tried out and you can inspect the code ­­– GitHub - jdittrich/quickwire: a prototype for a small user interface wireframing tool