{"slug": "i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view", "title": "I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀)", "summary": "A frontend engineer known as @nyaomaru built DSA View View, a tool that visualizes the execution flow of TypeScript Data Structures and Algorithms implementations. The tool turns algorithm functions into step-by-step visual stories, supporting arrays, matrices, trees, linked lists, and more. It is designed to help developers understand fundamental concepts in the AI era.", "body_md": "Hoi hoi!\n\nI’m [@nyaomaru](https://github.com/nyaomaru), a frontend engineer currently fighting the intense European heatwave by building DIY window screens here in the Netherlands. 🛠️\n\n[https://medium.com/data-science-collective/should-you-still-learn-to-code-in-2026-034685e17707](https://medium.com/data-science-collective/should-you-still-learn-to-code-in-2026-034685e17707)\n\nAs this article also discusses, I believe that **improving our fundamental engineering skills is still essential in the age of AI**.\n\nImagine that AI makes an F1 car fully autonomous. 🏎️\n\nWould you let someone without even a driver’s license enter a race as its driver?\n\nOr imagine that AI completely automates maintenance during pit stops.\n\nWould you put someone who knows absolutely nothing about cars, their parts, or their internal structure in charge of that AI?\n\nAI is certainly reducing the amount of code we need to write by hand. Typing quickly and memorizing every small piece of syntax or every method are becoming less important.\n\nBut **can we confidently release a product without understanding its fundamental concepts or implementation?** If something goes wrong in production, can we take responsibility and fix it?\n\nMy answer was **no**.\n\nBuilding things faster is obviously a good thing. But if we build without understanding, we may simply produce fragile software with no long-term sustainability at a faster rate.\n\nThe real value comes from building meaningful things quickly.\n\nThen, how can we develop the fundamental skills we still need in the AI era?\n\nI believe one useful approach is learning **DSA: Data Structures and Algorithms**. So I decided to start learning DSA again.\n\nHowever, while solving problems on `LeetCode`\n\n, I repeatedly ran into the same problem.\n\nI want to visualize the data flow and understand what is happening, but I still can’t clearly see it.\n\nSo I used the skills I have developed through frontend engineering and built a tool that visualizes the execution flow of DSA implementations! 🚀\n\nDSA View View turns TypeScript algorithm functions into step-by-step visual stories. 👀👀\n\nWrite code, run it with structured inputs, and see the arrays, matrices trees, lists, stacks, pointers, and return values move as the function executes.\n\nIt is built for those moments when reading the code is not enough and you want\nto *view* why the answer changes.\n\n🧠 **Step through real TypeScript**\n\nPaste or edit a function, validate it, then run the exact code in the browser.\n\n🧩 **Views that match the data**\n\nArrays become bars, matrices become grids, trees become node graphs, linked lists become chains, and two-pointer area problems get their own visual view.\n\n🌳 **DSA-friendly inputs out of the box**\n\n`TreeNode`\n\n, `ListNode`\n\n, nested arrays, matrices, strings, numbers, and class\nstyle inputs are supported without ceremony.\n\n🔎 **39 built-in examples**\n\nSearch by name, browse by category, and jump into…\n\nIn this article, I’ll explain how **DSA View View** works and how we can use it to study DSA.\n\nLet’s take a look together!\n\nDisclaimer\n\nI may sound confident so far, but I’m definitely not a DSA expert. I’m still learning, just like many of you.In fact, I built this tool precisely because I was struggling. When I realized that I couldn’t immediately solve Binary Search, I started to panic a little. 😸\n\n**DSA View View** is a tool that executes functions and classes written in `TypeScript`\n\nand lets you inspect how variables and return values change on each line through a runtime timeline.\n\nThe easiest way to understand is to try it yourself!\n\nOpen the tool and click the **Run Demo** button.\n\nYou’ll quickly see how the workflow works:\n\nThat’s really it.\n\nAlthough I created it primarily for DSA problems, you can also use it to inspect and test smaller `TypeScript`\n\nimplementations.\n\nAnd, of course, it’s completely free!\n\nWith DSA View View, you can:\n\n`TypeScript`\n\nYou can also use it as a lightweight environment for executing functions or formatting code blocks for technical articles such as Dev.to 😸\n\nFeel free to experiment with it and find your own use cases!\n\nThe main workflow consists of three modes:\n\nLet’s look at each one.\n\nFirst, write your implementation!\n\nThe Editor is designed to feel similar to a basic IDE.\n\n`TypeScript`\n\ndiagnostics are available by default, so the editor can detect some errors while you write.\n\nYou can also press `Cmd/Ctrl + S`\n\nto format your code with Prettier, so feel free to write first and clean it up afterward.\n\nCommon classes used in DSA problems, such as `TreeNode`\n\nand `ListNode`\n\n, are already available.\n\nYou don’t need to declare or import them every time.\n\nYou can also define your own classes or replace the provided definitions when necessary.\n\nOnce your implementation is ready, click **Compile Code**.\n\nIf compilation fails, the tool displays the relevant location and error message so that you can fix it.\n\nThere is also an **Example** menu containing several common implementations.\n\nFor example, if you want to quickly inspect a Heap Sort implementation and see how it behaves, you can load the example instead of writing everything manually.\n\nIn Verification mode, you define the input values that should be passed to your function or class.\n\nEnter a test value for each argument.\n\nFor arrays, both of the following formats are supported:\n\n```\n[1, 2, 3]\n1, 2, 3\n```\n\nOnce your input values are ready, click **Run**.\n\nFinally, let’s inspect the runtime!\n\nWhen you click **Run** in Verification mode, your implementation is executed.\n\nRuntime mode then lets you play through the execution steps or move backward and forward manually.\n\nWhen the tool recognizes supported logic, **an additional visualization is displayed in a modal**.\n\nNot every possible implementation is supported yet, of course. If something you need is missing, I would be happy to receive an issue or pull request!\n\nYou can move backward and forward through the executed lines to inspect:\n\nYou can return to the beginning, jump directly to the end, or move through the timeline one step at a time.\n\nThe main execution process runs entirely in the browser.\n\nDSA View View also includes a sharing feature.\n\nYou can create a URL that preserves your implementation and share it with someone else.\n\nUse the **Share** button at the top of the page to post it on social media or copy the link directly.\n\nShare your implementations, compare different solutions, and let’s learn together!\n\nImportant:The shared URL contains your implementation. Do not paste private, confidential, or proprietary code into the tool before sharing it.\n\nMeet Mr. View.\n\nMr. View watches over your implementation.\n\nNothing more.\n\nNothing less.\n\nHe is simply there to support you.\n\nWhen you need to concentrate, press the TV button to hide him. Press it again to bring him back.\n\nHowever, if Mr. View is enough to distract you, you may not be ready for an attack from ten simultaneous Slack notifications. 😸\n\nNow you know how to use DSA View View.\n\nThe next question is probably\n\nWhich problems should I solve?\n\nLeetCode is an obvious place to start, and the study plan from Tech Interview Handbook also provides a useful collection of practice problems. 👇\n\n[https://www.techinterviewhandbook.org/coding-interview-study-plan/](https://www.techinterviewhandbook.org/coding-interview-study-plan/)\n\nTry solving these problems with [DSA View View](https://github.com/nyaomaru/dsa-view-view).\n\nOnce your implementation works, use the runtime timeline to inspect the data flow and understand exactly how the algorithm reaches its answer.\n\nYou can also use tools such as ChatGPT, Codex, Claude, Claude Code, Gemini, and Grok to explore your solution further.\n\nDon’t limit yourself to asking\n\nIs this implementation correct?\n\nTry asking questions such as:\n\nAI becomes much more useful for learning when it helps us compare and understand different approaches instead of only generating a final answer. 👍\n\nThe simple answer is that `TypeScript`\n\nis my favorite language.\n\nI mainly work as a frontend engineer, so `TypeScript`\n\nis also the language in which I feel most comfortable experimenting and learning.\n\nHowever, I designed the tool so that additional languages could be supported in the future.\n\nIf there is enough demand for another language, please leave a comment or open an issue!\n\nAI is helping us write code faster and faster.\n\nHowever, understanding what happens inside an implementation remains an important engineering skill.\n\nIn fact, I believe that this ability may become even more valuable as AI-generated code becomes increasingly common.\n\nI built DSA View View because I wanted a tool that could help me strengthen those fundamental skills from the ground up.\n\nTo be honest, I still have a lot to learn about DSA.\n\nThat is exactly why I hope we can learn together.\n\nPlease leave a comment or open an issue if:\n\nLet’s train our DSA muscles together! 💪😸\n\nIf you like it, please give a star ⭐\n\nDSA View View turns TypeScript algorithm functions into step-by-step visual stories. 👀👀\n\nWrite code, run it with structured inputs, and see the arrays, matrices trees, lists, stacks, pointers, and return values move as the function executes.\n\nIt is built for those moments when reading the code is not enough and you want\nto *view* why the answer changes.\n\n🧠 **Step through real TypeScript**\n\nPaste or edit a function, validate it, then run the exact code in the browser.\n\n🧩 **Views that match the data**\n\nArrays become bars, matrices become grids, trees become node graphs, linked lists become chains, and two-pointer area problems get their own visual view.\n\n🌳 **DSA-friendly inputs out of the box**\n\n`TreeNode`\n\n, `ListNode`\n\n, nested arrays, matrices, strings, numbers, and class\nstyle inputs are supported without ceremony.\n\n🔎 **39 built-in examples**\n\nSearch by name, browse by category, and jump into…\n\nAnd I also launched on ProductHunt! Come say hello and let me know what you think 😸 👇", "url": "https://wpnews.pro/news/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view", "canonical_source": "https://dev.to/nyaomaru/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view--djo", "published_at": "2026-07-15 12:04:25+00:00", "updated_at": "2026-07-15 12:30:43.386220+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence"], "entities": ["@nyaomaru", "LeetCode", "DSA View View", "TypeScript"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view", "markdown": "https://wpnews.pro/news/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view.md", "text": "https://wpnews.pro/news/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view.txt", "jsonld": "https://wpnews.pro/news/i-built-a-tool-to-visualize-dsa-lets-learn-together-dsa-view-view.jsonld"}}