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

1 Like

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.

GPLv3

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)

1 Like

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.