Creating a Page Graph with Firebase Studio

In my search for productivity tools, I came across the Additor extension a while ago — a handy solution for organizing notes. But what really caught my attention was the page graph visualization (very similar to what Obsidian offers). It wasn’t just nice — it was useful. A dynamic mental map of how content connects. That idea stuck with me. And one day I thought: why not build my own page graph? From a Vague Idea to a Real Project With that idea in mind, I decided to try out Firebase Studio, a tool that integrates AI to support web development. I wasn’t exactly sure how to phrase what I wanted, so I typed something like: "I’d like to create an interactive page graph, kind of like Obsidian’s." The AI (in this case, Gemini) replied: "I can’t create something exactly like Obsidian’s, but I can show you how to build something similar using the vis.js library..." And that’s when everything started to fall into place. AI as a Creative Partner Tools like Firebase Studio (and others like Gemini, Copilot, ChatGPT) have really changed the game. They speed up development, unlock ideas, and show paths we might not have considered on our own. In my case, they introduced me to vis.js, a visualization library that turned out to be the perfect fit for building an interactive page graph inside my Vue app. But here’s the thing: AI does not replace a developer’s critical thinking. It can suggest libraries, generate boilerplate code, even spin up a working example. But understanding why a structure makes sense, adapting it to your context, and handling the nuances of your system — that’s still on us. At the end of the day, AI is a great assistant, but you’re still the architect. How Did It Turn Out? I used vis.js to create an interactive graph of blog posts, connecting tags and content as nodes and edges in a visual map. The structure starts with a few fixed nodes — like “programming,” “frontend,” “personal” — and the remaining nodes are added dynamically based on the tags in each post. The result is a visual map of content creation: easy to explore and surprisingly beautiful to look at. I built it with Vue, added light/dark theme support, translations via Vue I18n, and a few reactive config options. You can check it out here: https://lfxa.vercel.app/en-US/graph Final Thoughts This project was the result of curiosity + inspiration + modern tools. It’s proof that, with a little push from AI, you can turn a vague idea into something functional — as long as you’re willing to think, adapt, and build it yourself. If you’re also into visualizations, productivity, or just looking to bring an idea to life, here’s my advice: start simple, play with AI tools, but never stop thinking like a problem solver. Because at the end of the day, you’re the one who turns suggestions into solutions. Trust in the Lord with all your heart and lean not on your own understanding. Proverbs 3:5

Apr 13, 2025 - 22:10

Creating a Page Graph with Firebase Studio

In my search for productivity tools, I came across the Additor extension a while ago — a handy solution for organizing notes. But what really caught my attention was the page graph visualization (very similar to what Obsidian offers). It wasn’t just nice — it was useful. A dynamic mental map of how content connects.

That idea stuck with me. And one day I thought: why not build my own page graph?

From a Vague Idea to a Real Project

With that idea in mind, I decided to try out Firebase Studio, a tool that integrates AI to support web development. I wasn’t exactly sure how to phrase what I wanted, so I typed something like:

"I’d like to create an interactive page graph, kind of like Obsidian’s."

The AI (in this case, Gemini) replied:

"I can’t create something exactly like Obsidian’s, but I can show you how to build something similar using the vis.js library..."

And that’s when everything started to fall into place.

AI as a Creative Partner

Tools like Firebase Studio (and others like Gemini, Copilot, ChatGPT) have really changed the game. They speed up development, unlock ideas, and show paths we might not have considered on our own. In my case, they introduced me to vis.js, a visualization library that turned out to be the perfect fit for building an interactive page graph inside my Vue app.

But here’s the thing: AI does not replace a developer’s critical thinking.

It can suggest libraries, generate boilerplate code, even spin up a working example. But understanding why a structure makes sense, adapting it to your context, and handling the nuances of your system — that’s still on us. At the end of the day, AI is a great assistant, but you’re still the architect.

How Did It Turn Out?

I used vis.js to create an interactive graph of blog posts, connecting tags and content as nodes and edges in a visual map. The structure starts with a few fixed nodes — like “programming,” “frontend,” “personal” — and the remaining nodes are added dynamically based on the tags in each post.

The result is a visual map of content creation: easy to explore and surprisingly beautiful to look at. I built it with Vue, added light/dark theme support, translations via Vue I18n, and a few reactive config options.

You can check it out here: https://lfxa.vercel.app/en-US/graph

Final Thoughts

This project was the result of curiosity + inspiration + modern tools. It’s proof that, with a little push from AI, you can turn a vague idea into something functional — as long as you’re willing to think, adapt, and build it yourself.

If you’re also into visualizations, productivity, or just looking to bring an idea to life, here’s my advice: start simple, play with AI tools, but never stop thinking like a problem solver.

Because at the end of the day, you’re the one who turns suggestions into solutions.

Trust in the Lord with all your heart and lean not on your own understanding. Proverbs 3:5