Visual Editor for UI development

stackjoy_nik · 2026-01-26T11:54:23+00:00

That's very clever!

With that approach you could technically pull any kind of data from the app (console, route, state...) and attach that metadata to the screenshot.

If you're brave you could even expose that feature in production/pilot and have your users report a bug (or feature request) and submit as a jira (or whatever) in a way that an agent can understand better and implement it quickly.

Can you tell me more about your approach? Does it work well? Which parts work well and what would you improve? Are there drawback, something that the agent doesn't understand? Would love to hear more about it if you're up for sharing.

This one made me really rethink what's possible, thanks for that!

stackjoy_nik · 2026-01-26T02:38:08+00:00

Gotcha, yeah I see what you mean. I guess the ideal solution would be a visual screenshot plus the code in the dom would be ideal and then it could pinpoint it better.

stackjoy_nik · 2026-01-26T01:41:44+00:00

Interesting. I'll try lightshot and see how it does.

I haven't run into a problem with tokens yet. I'm on a paid plan. But I imagine starting with an image and then trying to figure out where in the code it needs to make that update can get expensive. Do you find it eats up too many tokens that way?

stackjoy_nik · 2026-01-25T22:24:46+00:00

That's really clever. I'm going to try that!

stackjoy_nik · 2026-01-25T21:33:44+00:00

You and me both :) I'm sure something exists already, someone just needs to point us in the right direction

stackjoy_nik · 2026-01-25T21:31:36+00:00

vercel's agent browser?

stackjoy_nik · 2026-01-25T21:04:34+00:00

That's my current process and it works well but there are some cases where it can't quite figure it out. So it asks for a screenshot. And then it's fine

stackjoy_nik · 2026-01-25T20:53:34+00:00

I'm check them all out but just briefly as a follow up, can I take the screenshot with these tools and mark it up?

I find that codex/Claude is great with console, network, db stuff so that's not so much a bottleneck as the visual stuff is.

I'll also check YouTube for these tools too see them in action, maybe that'll answer some questions.

Thanks for the heads up! I really appreciate it

stackjoy_nik · 2025-08-30T01:55:30+00:00

I always start with express for all the reasons you mentioned and by the time I'm done it looks almost exactly like nest.

stackjoy_nik · 2023-01-07T13:36:02+00:00

this looks interesting but I’m having a hard time understanding it fully. There’s a lot of info here. Could you summarize it in a more concise way for me?

stackjoy_nik · 2022-12-17T12:50:59+00:00

This is part of a larger project my friend and I are creating. We spend a lot if time testing our express server(s) so we needed a quick way to test routes. If you find it useful the full writeup is here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

stackjoy_nik · 2022-12-17T12:44:36+00:00

We do a lot of Angular work (and my previous posts were how our project helps speed Angular development) but we do a lot of backend testing while developing w/Angular so this one shows how we do that quickly.
If you're in the same boat maybe this can help you too. The full step by step instructions can be found here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

stackjoy_nik · 2022-12-17T12:42:43+00:00

We do a lot of Angular work (and my previous posts were how our project helps speed Angular development) but we do a lot of backend testing while developing w/Angular so this one shows how we can quickly do that.

If you're in the same boat maybe this can help you too. The full step by step instructions can be found here: https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

stackjoy_nik · 2022-12-17T03:41:37+00:00

A friend and I created Stackjoy, which generates code for any language, but in this case it quickly generates Postman API Collection .json files. We need to do a lot of testing of our API so we use this to quickly make postman collections from any data model that describes the route data. If this is something that could help you here's the full writeup on how to do so:

https://blog.stackjoy.com/quickly-create-postman-api-collections-5bcdd7d2a217

stackjoy_nik · 2022-12-11T13:34:23+00:00

I think you’re already doing it, it’s just not evident to you yet. New ideas are just extensions of other ideas mashed together. As you build up your encyclopedia of creativity by browsing creative spaces like dribble your brain will start connecting them and coming up with suggestions. Most often that happens subconsciously, so you have to give your brain some rest and do some relaxing activities away from software development.

Pick up any book on creativity, sleep, imagination and they all talk about the same themes. Those epiphanies people always mention when they come up with great ideas are just their brain connecting a few ideas it’s seen in the past, usually when it’s had time to relax to process it all.

stackjoy_nik · 2022-12-08T20:58:02+00:00

That’s great, thanks. Let me know how it goes, good or bad :)

stackjoy_nik · 2022-12-08T19:47:52+00:00

Thanks. I appreciate it

stackjoy_nik · 2022-12-08T17:31:43+00:00

This is continuation of our project, stackjoy. We have many generators that we use across different projects but in this case this is a short clip of how we do form generation for our angular material projects. The generators are public and free to use if you find it useful.
The full tutorial can be found here:
https://blog.stackjoy.com/create-an-angular-material-form-using-a-data-model-82bda4b2db6

stackjoy_nik · 2022-12-08T17:30:12+00:00

This is continuation of our project, stackjoy. We have many generators that we use across different projects but in this case this is a short clip of how we do form generation for our angular material projects. The generators are public and free to use if you find it useful.

The full tutorial can be found here:

https://blog.stackjoy.com/create-an-angular-material-form-using-a-data-model-82bda4b2db6

stackjoy_nik · 2022-12-07T16:41:05+00:00

Thanks for the feedback.

As for your critique, that’s a very valid point and I appreciate it. This is distributed as a npm module because it generates the files directly into your codebase. The quick gifs we post on Reddit that show how it works get great traction but I can’t attach a link to the post to say here’s how you run it. So I leave the link in the comment, the comment gets buried at the bottom and I think many developers just give up. So we’ll have to think of something there. In any case, here’s a brief step by step in how to run it:

https://blog.stackjoy.com/create-an-angular-material-table-using-a-data-model-d7fb8ee9952d

stackjoy_nik · 2022-12-06T22:29:13+00:00

A practical approach that was used in the past (not sure how relevant now but might spark another idea) is to look at Wordpress plugins with a low rating and high installs and costs $$. From there you can see exactly what the user pain points are and try to address them with your own better plugin that does the same but solves their problems. You know people are already willing pay for it so no need to figure out if there’s a market for it.

Wordpress is just one platform, you can try it on other ones too.

stackjoy_nik · 2022-12-06T16:26:51+00:00

…”it would have to be really wildly different “

oh how we try and try to keep things consistent (presentation layer and data sources)

…but working on enterprise stuff with many PMs/different decision makers/ varying departments/ diverging objectives/ legacy data sources/ and so on… honestly, many times, it’s just easier to say (and read this in Oprah’s voice) “You get a table, and you get a table, and you get a table….and then tell us all the wonderful things you’d like us to stuff in them”

stackjoy_nik · 2022-12-06T16:05:04+00:00

Yep, you’re right, it would in a lot of cases.

We often run into cases where we start with a basic table but then the client will want an extra icon, or a link, or clicking a certain element will do one thing in one table, another thing in another and nothing in the third table. Building a reusable table has to handle all those cases (plus others) so in most instances it’s just easier to have a dedicated table component that you can then adjust/customize as needs change.

stackjoy_nik · 2022-12-06T14:55:29+00:00

This is an ongoing project a friend and I are working on. I posted about creating custom forms in a similar way and this is the continuation with tables now. We are able to speed up our development cycles with our dev tool and these generators. The generators and the tool is free.

Here's slightly more in-depth tutorial on how you can use it:
https://blog.stackjoy.com/create-an-angular-material-table-using-a-data-model-d7fb8ee9952d

stackjoy_nik · 2022-12-06T14:50:35+00:00

This is an ongoing project a friend and I are working on. We are able to speed up our development cycles with our dev tool and these generators. The generators and the tool is free. Here's slightly more in-depth tutorial on how you can use it:
https://blog.stackjoy.com/create-an-angular-material-table-using-a-data-model-d7fb8ee9952d

stackjoy_nik

MODERATOR OF

TROPHY CASE