Ben: Hello, and welcome to PodRocket. Today, I'm here with Andrew Widjaja, who is a software engineer at Gatheround and a co-creator of Svelvet. How are you, Andrew? Andrew Widjaja: I'm great. Thanks for having me, Ben. Ben: Yeah, well, thanks for joining us. Really excited to learn about some of your work, so maybe we could jump right in and talk about Svelvet, maybe give us a quick overview. What is Svelvet? How does it help developers build great apps? Andrew Widjaja: Of course. Svelvet is a component library built for Svelte applications. Let's say you're a Svelte developer that wants to render a flow chart displaying some user logic flow, and you want that flow chart to look good and be interactive, you can mess around with a lot of CSS yourself to build it out or try another tool like D3, which can be a beast in itself for a lot of people. Svelvet, on the other hand, is a simple tool that will render a nice looking, customizable and interactive diagram with very little effort. It isn't designed to have the most functionality, but in many use cases, where you don't want to use a data visualization tool that can be complicated, it's pretty perfect for that. Ben: Got it. Essentially, it's built for Svelte, and maybe give us a quick reminder, what is Svelte? I know it's pretty popular nowadays, but I bet some people have not checked it out yet. Just remind us, what is Svelte in the first place? Andrew Widjaja: Sure. Svelte is a front-end framework/compiler. A lot of developers are familiar with ReactView and Angular, so Svelte is kind of the cool new kid on the block that a lot of developers like to use. It just hasn't reached a large audience in the actual industry and professional development. A lot of the tooling ecosystem is not as robust as say React, but in terms of developer experience, how it works, the performance, it's a pretty great tool to use for front-end development. Ben: Enjoying the podcast? Consider hitting that follow button for more great episodes. You just released the 2.0 version of Svelvet in July. Can you walk us through some of the new features and things folks can get excited about there? Andrew Widjaja: Most of the new features were addressing customizability. On the nodes, you can choose where the edges are anchored. Before, it was just top and bottom. You can also now render images within the nodes. The edges can have different types, like a straight line if you want a Bézier curve or a step curve. One of the bigger changes with that release, and even a more recent release, was a REPL playground that was added to the docs website, which is really nice in letting the devs play around with it first and build their diagram. No need to spin up a Svelte application or even install Svelvet. This playground is ready to go. You can just build a diagram, copy and paste it into your app and it's done. We recently made it even easier to use REPL actually with a contextual menu where you can customize and add new nodes and edges just with a couple of mouse clicks. The nice thing about that is people outside of the engineering team can build out their own diagram and then it produces the code for them and then maybe they can just send it over to their dev saying, "Hey, can you throw this on the website?" or make some edits that way. It makes it a lot easier for people to just play around with it, create it, and then they can just export out the code that it produces. Ben: I'm curious, what made you want to jump in and build Svelvet? Did you have a project where you wanted to do flow charts and there was no easy way to do it? Or what was the kind of genesis moment? Andrew Widjaja: Sure. There was no actual need for myself to build flowcharts. When coming up with the idea for Svelvet, my team and I were just looking to the developer community to figure out what people were asking for in an open source product. We figured that since Svelte is a relatively new front-end technology, it wouldn't have as robust as a tooling ecosystem like I mentioned earlier, say React. We're doing some user research and we happen to see a common thread somewhere where devs are wanting a tool to easily create flow diagrams, specifically for Svelte much like how React has React Flow, which is another tool. The other option would be to use a vanilla JavaScript flowchart library, which can add some complexity when trying to integrate it with the rest of your Svelte application if you wanted to manage, think the same way, talk to each other. That's pretty much what led us to creating Svelvet. Ben: Help me understand, what does it look like to use Svelvet? I have an existing Svelte app, how do things like state and styling and some of the other nitty gritty of using the product or using the tool work? Andrew Widjaja: Svelvet is an npm package, so you can simply install it as a dependency, import it into your code and use the Svelvet component itself. You can use it any other component. You just need to provide the Svelvet component with two prompts, which is nodes and edges, both of which are arrays containing objects corresponding to each node and edge. To clarify, the node would just be the box in a flow chart. The edge would be the connecting lines between the notes. In our docs, we provide simple examples of what that looks like and that's all you really need to provide to the component, then it'll render a nice looking flow diagram that's already interactive. Ben: In terms of integrating state with the rest of the app, I'm actually not super familiar with how state works generally in Svelte, but give us a bit more context there on how do I tie in other state in my app with the flowchart and what is the schema of state for a flowchart? Andrew Widjaja: The way Svelvet is made, it handles a lot of the state of the nodes and edges themselves behind the scenes. For example, the state of each node will have its position as well as all the information in terms of its customization and text. For example, if you're dragging around a node, it's updating the state of the nodes and also the edges that are committing that node. That is specific to Svelte, so if you had a React application or a vanilla JavaScript application, that might be a bit different. In terms of integrating it with your application, we actually haven't seen many use cases of connecting state of other parts of the application because it has its standalone store behind Svelvet, but that's something we'd like to see more of in terms of different use cases there. Emily: It's Emily again, producer for PodRocket, and I want to talk to you, Yeah you, the person who's listening but won't stop talking about your new favorite front-end framework to your friends, even though they don't want to hear about it anymore. Well, I do want to hear about it because you are really important to us as a listener. So what do you think of PodRocket? What do you like best? What do you absolutely hate? What's the one thing in the entire world that you want to hear about? Edge computing? Weird little component libraries? How to become a productive developer when your WiFi's out? I don't know. And that's the point. If you get in contact with us, you can rant about how we haven't had your favorite dev advocate on or tell us we're doing great, whatever. And if you do, we'll give you a $25 gift card. That's pretty sweet, right? So reach out to us. Links are in the description. $25 gift card. Ben: What does the future of Svelvet look like? Or I guess maybe even a question before that, is Svelvet in production or is it something ready for folks to use or still in a pre 1.0? That's question number one. Then two, what does the future look like and what are you excited about on the roadmap? Andrew Widjaja: It is ready to use, anyone can use it. We released the initial version back in June, I believe, and the future of it is that it was developed under this tech accelerator called OSLabs. At first when we were developing it and our initial release, it was technically under beta where we were kind of just testing it out, seeing if people were interested in this product. That was when my team and I created it and released it and then it got a lot of positive attention, got pretty popular, relatively successful, so OSLabs decided to take it out of beta and maintain it full-time, add more contributors to it. The short-term future of Svelvet is really addressing common feature requests, considering other use cases for customizability, improving test coverage, really just setting it up for future contributors to be able to easily contribute. One of the main features that would be great to implement soon I think would be to allow HTML elements or any HTML element or Svelte component to be rendered within a node. I feel like this would really open the doors for what devs can really do with these flow diagrams, making subflow diagrams, integrating more parts of their application into the diagram. Because right now it's limited to just text and images, which is great already, but I feel like having more options can really open the doors for developers and excited to see what OS Labs and the other contributors will add to Svelvet in the future. Ben: You mentioned before React Flow was maybe something that inspired you. Help me understand with Svelvet, how similar is Svelvet to React Flow? Obviously, React Flow is React, and this is Svelte, but in terms of the flow charts that are produced, in terms of APIs, what's similar and maybe where did you choose to diverge from the model of React Flow? Andrew Widjaja: In terms of the functionality, we base it highly off of React Flow. At first, the idea was just making a Svelte React version of React Flow, so that's essentially what it is. The divergence came when we were actually building it out because React Flow is built in React. Svelvet is built in Svelte. The way the two front-end frameworks handle states and the whole syntax of everything and the architecture, and the layout of everything is very different. We kind of just built it from scratch and used React Flow as kind of a guide of what we're trying to achieve in terms of features. React Flow definitely has been around longer. There's a great team working on it, so they have a lot more features than what Svelvet has currently, but that's kind of the goal. That's kind of the benchmark that we're trying to hit in terms of functionality. But yeah, really the difference is in the implementation of the actual components themselves. Ben: I imagine for something like a flow chart, it must be more difficult or just a different set of problems for mobile. So curious, any kind of interesting engineering you had to do to make the flow charts work well on mobile? Andrew Widjaja: Yeah, the main part was just the difference between a click and a tap on a mobile screen. When we first released it, we hadn't anticipated people dragging on mobile, which we should have thought about in the beginning, but we basically had mouse event click listeners in our code handling the drag and drop features. To make sure it also works on mobile, we had to take that into consideration as well, the whole pointer being done via mobile. Ben: I'd be curious to hear about some cool use cases you've seen of folks using Svelvet in the wild. Anything that comes to mind in terms of cool uses of flow charts for a database? Andrew Widjaja: I think one of the ones that comes to mind because I've seen it most recently was that I saw someone using it to display the logic flow of a game that they made. Then other use cases that come to mind are just showing the user flow of an application. If a developer has an application and then they want to show it for cross functional purposes or just to show their users the flow of their app, I've seen that as well. There are many use cases of flow diagrams in general. You can show HR organizational charts, operational procedures of a company, business planning. Those are what come to mind. Ben: Great. Well, Andrew, thank you so much for joining us today. It's been great learning about Svelvet. We will put a link in the episode description for anyone that's interested in learning more. But from your perspective, Andrew, anything you'd recommend for folks out there who are interested or maybe want to contribute as well? Andrew Widjaja: Yeah, they can just check out our GitHub page and we have details on certain features that we'd like to have implemented next. It's pretty simple. You can even contact some of the core team members and we can work from there. Ben: Well, thanks again, Andrew. Andrew Widjaja: Great. Thanks so much, Ben. Emily: Hey, this is Emily, one of the producers for PodRocket. I'm so glad you're enjoying this episode. You probably hear this from lots of other podcasts, but we really do appreciate our listeners. Without you, there would be no podcast, and because of that it would really help if you could follow us on Apple Podcasts so we can continue to bring you conversations with great devs like Evan You and Rich Harris. In return, we'll send you some awesome PodRocket stickers. Check out the show notes on this episode and follow the link to claim your stickers as a small thanks for following us on Apple Podcasts.