‘Building an advanced front-end for n8n’ - from the Amsterdam Meetup (April 2025)

appreciate it. Um, I understand I'm fighting with the pizza right now, so I'm going to be super fast. It you won't have to go 2x if you watch the recording. Uh, so uh, bear with me and, uh, just interrupt with questions, okay? I'm highly interruptible. So, I've been playing with Enadin since Naden since the last meetup was the kind of the first week uh, in November or so and I got excited about a few things. I I've been building software for about 30 years and u I you know I I'm totally uh disoriented by what's going on. I'm sure most of you are as well. And so I started future proof to help small medium businesses catch up with the madness that's going around us before we hit the singularity. You know what I'm talking about. Um and so um this presentation uh starts with these 1600 workflows. Fantastic resource. I took a look, downloaded them. If you haven't done this, you can scrape them, analyze them, and I found this is going to be too small for you to read. I apologize. Um, of these, uh, most of them are HTTP requests and code, but at the bottom, you can see no native form nodes. I felt so bad. Out of 1600 workflow templates, not one person decided to use the form node. It's so sad. And so, I'm here to tell you I'm going to do something about it. of course AI at the top of the heap you know getting things done development and so on but again kind of a total analysis forms are not being used and this is both the uh the forms if you like data there's a bit more happy to share my slides later I'm talking about both about the forms that you use uh that um you can use to start the workflow and then in the middle and then at the end I'm also talking about the uh human in the loop flows where you nad basically meets you where you get your work done. Uh, email, Slack, you know, usual suspects. So, uh, none of these are being used in any of the 1600 templates. It's, uh, it's criminal. So, so if you, if you zoom in, you'll see here send and wait on all of these. So, if you're close enough, you can notice it's all kind of the same pattern, basically, people getting involved. And so, I think NAD uh, and UI in general, user interfaces should fall in love a little bit more. I'm here to bring that message to you. Okay. All right. So, uh, now let's get started. Um, I've already mentioned a lot of this stuff here. Uh, so these native forms, 9 + one fields, the usual suspect plus HTML, but you can't, you can't use script. That makes sense. You don't want people maybe injecting something in your hosted NAN instance. And then the human in the loop, they stop and wait, but it's constrained. It's limited what you can do. You know, approve, decline, couple of things. You can kind of tune it. Um, but again, you're limited by the UX also kind of nine uh channels there, email, Slack, WhatsApp, the usual suspects as well. Uh, and so there's some limitations. What about your own applications? How far can we go? I'm excited about building beautiful custom interfaces for your NAN applications. I think it's a good idea. I think we should try it. Uh, business logic and pictures so that you can talk to your stakeholders and make sense of the code without having to open up an IDE and play with, you know, letters. you can show them a picture of the way the application works. Um, and then change management in minutes. If you're using NHN, you know what I mean. So, yes, and yes, please. These are some interfaces that I put together in the last week in preparation for the presentation. You'll forgive me if they're not beautiful in your opinion, but I think it's a good idea. All right. So, this part here I'm going to scream through. Uh if you haven't seen these forms, you basically pick the form, decide if you want to start, you can configure it, fill it out, submit it, and then you get data in your workflow. No surprise. Okay. And uh here you can pick a form in the middle of your workflow as well. And you configure it on this particular screen. The 9 plus one usual suspects, date, text area, text box, and so on. plus custom HTML and you can inject your own workflow data into the custom HTML. Makes sense? Okay. But uh but now in the middle of the flow, you've got this form, you're interacting with it, you've got some data, it's great. You can do things like, you know, accept and, you know, decline and review and so on. Uh but what else can you do here? Right? Forms are good. What else is there? There's the human in the loop where we uh can meet users where they work. Okay, so that's uh this list here. Uh so again, if you didn't see it, it's the it's this and then I forgot to add Microsoft Teams. So it's nine uh really. Um and so in this case, I'm sending after uh some review or whatever to the user's email. And again, there's that send and wait. Uh you get an email. If you haven't tried this, you've got buttons, a form, whatever. Uh you can interact with it and go. Okay. And that's how you pick those and configure

them. old training material over here. What's that? It's an old training material. It's it's how I think it's been years like this. Yeah. And so um anyway, it's basically same but different. Thank you. I appreciate it. It's same but different for all of this stuff basically, right? And so um for these custom interfaces, I'll introduce you to the weight node. The weight node is your friend. Um, and the reason is because you can tell the wait node to respond on a web hook. There's other things. Most people use it for timing, I think, but you can tell it to respond on a web hook. And instantly, or you can say wait for a respond to web hook. So, you can play with that. Uh, there's the respond to web hook, the kind of cousin of wait, I guess, in this particular story. And so, this is going to be hard for you to read as well. So, I'll just quickly summarize. Uh it doesn't matter how you start the workflow. It could be any trigger, any timer, any integration. Doesn't make any difference how you start the workflow. What you need is the execution ID. You have to grab that. If you start the workflow with a web hook, you can reply with the execution ID. If you don't, you just put it somewhere, Firebase or, you know, whatever, and get it from there. But you need the execution ID because that lets you then discover the structure of the workflow at runtime. And in that structure, you have this last node executed, and that's what tells you where your workflow is. Otherwise, you don't know. So, you grab the execution ID, you figure out what your last node is, and then you can either respond immediately or you can put some work in between the wait and the respond to web hook. I feel like I've lost you. Okay, let me just show you how it works. There's the last node executed. And here is a video I think. Yeah. So here in this video, which is small and I can't expand it. Um, I have a screen that I've made and I'm basically starting the workflow by calling a web hook. You'll see me click. There's the spinner. And then as soon as I continue by clicking the blue button, you'll see the workflow finishes and my UI resolves. And it could be any UI. It doesn't make any difference. As long as you can call a web hook and pick up the execution ID, you can build this into any interface at all. Uh any existing application as well. The second example here, I'm basically putting in some data uh some JSON and then I'll open up the weight node and inspect it. So that's the immediate response if you want to get right back from the workflow. Okay. And then here I hope here is another one which is the work in between. So, I'm launching the workflow and I'm waiting and then I can pick that up and give the user some interface to interact with. Uh, you know, what is it that you're interested in doing today or whatever. They can give me some data. I can process that data and then respond afterwards. There's the green checkbox at the end. So, basically any interface whether or not you're working with immediate response or you want to do a little bit of something and then get back to the user, you can do that. And I see a hand up at the back. I'll just show the last video here with a more sophisticated interface. I know you're not going to be able to read this, but uh trust me, this is an NAN workflow. There's a bunch of steps in here. There's some, you know, AI magic sprinkled in and then some interface where I'm asking the user, what do you want to learn? How do you like to learn? What topics are you interested in? and so on. This is not the kind of interface that you would expect that NADN as a company would invest in building. It's too specific to a business problem just like your business problems. And that's why you need to be thinking about these kinds of mechanics inside of your workflow. And it's really just two nodes. Once you get to know them, you can build this stuff all day with any workflow that's out there. You don't need to do anything special to change the workflow. You just need to put in a weight node wherever you want to get a user interface. and uh kind of bridge some long running work with a wait and respond to web hook wherever you want to do something more sophisticated for the user. So uh it works uh and it's fast and it's easy to understand. Okay, let me stop this a little bit early. This video I mean not the talk. You're not going to get off that

easy and show you how it works. So if you're interested in the details, uh it's just this one screen. uh what is it? You need the execution ID. You use that against the API to get the definition of the workflow. In that there's a little bit of detail uh that you can use to figure out where things are going. You can use the resume URL to pick things back up. But the resume URL doesn't care what node is waiting on. So if you have many waiting nodes, then you need to uh show the right UI. uh and that's why here when you pull that back you get the last node executed you can map that to a UYU ID a unique identifier for the node and then uh your application will load that interface that you've designed specific for that point in the workflow. Okay, so that's basically that's basically it. I mean I'm excited about what this means. I've got a list of cool ideas. I'd love to talk to you about it. That's it. Pizza time. Yeah. Question, and question. Three questions. Okay. I saw your hand up first. I think it got answered in this small uh Yeah. Sweet. Okay. Nice. You had a question. Yeah. So, I wonder if you start workflow and then you like the first step like does it continue at some point? Sorry. If you abort it uh Yeah. So that's why I take away the Yeah. Okay. Yeah. Then like will it continue to Well, I mean you can stop a workflow. You can uh through the NAM API you can just add that feature to be able to kind of cancel it. Yeah, what about if you like it? Oh, I think I understood now. So, so what if they just close the window and go away? What happens to the workflow? My understanding is it doesn't consume any resources on the NAND server because of the way weight nodes are structured. I'm not an expert though, but that's what I've I read that somewhere that they basically dehydrate the workflow and leave it there until you call the web hook, then it wakes up, hydrates the service, runs again, and things get moving. So, it's not it doesn't cost you anything. The icon you see spinning. It's probably just a gif. I think I mean N is here. You can ask them, but it's I don't think it's a resource problem like that. If you change your workflow, do you also have to change your web hooks? Um, yeah. So, it depends on how you set it up. Uh I think it's a good idea. I for you know the little bit I've been thinking about this is that to use the unique identifier that's in the node that gets created the moment the node hits the canvas. When you add a node, it gets a unique identifier. You can copy and paste into your editor and look at it. But the minute you do that in another workflow or duplicate the workflow, all that gets regenerated. So if you're using those IDs in your application to load the interface that matches that, it's a problem. If you use the name of the workflow node, it's not a problem. But then you can't rename those. The ID you can rename. So it's a trade-off, I guess. Uh do we have time for more questions? Okay. Hello. I really like the presentation. Oh, thanks. Yeah. My question is what happens if you go a step back in the for when you go to state. I have no idea. I've never done that. I I don't think I don't think you can do that with NAD in general. It's a kind of forward only uh is my understanding. I think you can. Oh, Yeah. But it's a very limited. The form is very limited. What I play so I really like what you did. What happens when someone tries to do something wants to go? Uh so I think if the time business case is you want the user to be able to redo something then you could probably give them a decision at some point to redo and that and then you would draw that in the workflow but I don't think there's a way to kind of rewind an executing work. I don't know maybe there is quick one is this template you're going to put out I heard I heard it's a good idea. Uh in fact I had some encouragement uh from someone tonight in fact to do that. So yeah, sure. But I don't know what's the template. I mean, it's a it's one slide. Something more tangible to learn from because Yeah. Maybe we can talk about it afterwards. I I'd love I mean I'd love the input. I know how to build things and teach them, but I don't know how to sell them. So if anybody wants to help me learn how to do that. Yeah. I see that in your forms you had like the colors and white label. So maybe you can explain how you achieve that because I haven't used the form, but I only

have the orange colors. So, yeah, I should do that. Yeah. Well, I mean, that that's just it, right? So, those were two applications that I vibe coded this week. Uh, one is an express application with just plain JavaScript and HTML. That was the blue and white one. And, uh, one was a React application that was got way more complicated than it needed to be. But, it basically it was just a re a, you know, Nex. js application, a React application. I thought that um you were using like the editing forms to figure like I don't think you can take them that far. But just it was a couple weeks ago. You got to update this full custom CSS. You just add your own style. It's outdated already. I guess but you would still not be able to do like a drag and drop interface. Yeah, sure. Beyond the standard form, right? Sure. Yes. How do you decide between a workflow that does a little bit weights out and versus two workflows that you would fire with a web hook does the job goes away and then second one gets started. Uh you can do this like that achieves the same goal. Yeah, there's nothing special about what I'm doing on the NAN side. It's a wait node that either responds immediately or responds with a web hook response node. That's it. Do you have a mental model as to how you choose to implement the wait versus the wait and respond later? If I want to do work in the interface. So if it's just like the user is going to see something and just give me some data, type in their name, fill out a form, whatever, that's just a wait and come right back. But if I need to process something, maybe uh you're describing something and I want to do sentiment analysis on what you're describing or whatever, uh then I don't want to come right back. uh I want to do that analysis and then come back and so I choose a fast model right on open router or whatever and then that responds fast enough that it doesn't annoy the user something like that. Yeah. Okay. Yeah. Well, thanks for