How We Built a Visual Studio Code Plugin in just 3 Weeks Using an Iframe

Anderson Laverde — Tue, 27 May 2025 14:18:42 +0000

Why a Visual Studio Code Plugin?

At Streamline, we aim to make creators’ workflows as smooth as possible. That’s why we’ve built plugins for platforms like Figma, Framer, Lucid, Desktop, and Web. But let’s face it—as developers, we’re also creators, and more often than not, we have to deal with icons for our frontends.

Even with JSX support, I often found myself stuck in a repetitive cycle just to use our own icons in code:

Go to StreamlineHQ.com → Download the icon SVG → Open the Downloads folder → Move the file to /assets → Import it → Want to change it? Go back to step one.

So we decided it was time to show some love to our dev community by bringing the power of Streamline to your favorite code editor: Visual Studio Code.

Why an Icons Plugin inside a Code Editor?

You might be thinking:

“I’m fine manually downloading and importing icons. Why would I need a plugin for that?”

We’re not here to replace your workflow—but to make it faster, more enjoyable, and the best part: you never have to leave VS Code.

We built this plugin based on real developer needs when working with design assets.

🧲 Drag and Drop

Who doesn’t love dragging and dropping things? It just feels like magic. That’s why we implemented this feature: search for the icon you need, drag it directly into your code file, and boom—you’re done.

This is by far my favorite feature 😍

💾 Download to Local Folder

Prefer to download the SVG to your project instead of using inline code? We’ve got you. The plugin lets you download the asset directly to your preferred /assets folder. You can even customize the path in the plugin settings.

Why We Didn’t Code a Native Plugin

In the past, each Streamline plugin lived in its own separate repo. While that worked for some use cases, it created serious friction for our product team:

🐌 Slow development when building new plugins or rolling out shared features.
🧩 Poor maintainability, with the same logic implemented multiple times across repos.

So we asked ourselves:

How can we develop new plugins in less than a month?

We’re a team of only 3 developers maintaining several apps and launching new ones in parallel. To stay fast, we needed to reuse as much code as possible and deliver the full Streamline experience without reinventing the wheel.

✅ Our Winning Recipe: Next.js + Iframe + Shared Components

We’ll dive deeper into our monorepo setup in a future post—but for now, here’s how we built the VS Code plugin architecture:

🧩 VS Code Native Container

Opens a WebView to display the UI hosted on Vercel.
Acts as a bridge between the Iframe and the VS Code API.
Forwards events like file downloads or path updates.

🧱 Streamline Iframe (Plugin UI)

Built with Next.js, rendered inside the WebView.
Uses our shared component library and store, the same ones we use across all plugins.
This means we can ship features like search, icon previews, and settings with just a few imports—like building with LEGO bricks.

We use Redux + RTK Query to manage state across all our frontends. With shared hooks and components, spinning up a new plugin UI feels effortless.

⚙️ VS Code API Integration

We interact with the official API for tasks like:

Downloading files to local folders
Setting the default assets path
Triggering actions from the WebView

The Result

You can try the plugin today and add Streamline icons to your projects without ever leaving VS Code. It's fast, simple, and free.

👉 Install from Streamline Icons Marketplace

We’d love to hear your feedback! Whether it's bug reports, feature requests, or just good vibes—drop us a message.

What’s Next

In our next post, I’ll share how we unified our plugin architecture using a monorepo and shared libraries, and how we now reuse 90%+ of our frontend code across platforms.

Thanks for reading, see you in the next one!

DEV Community: Streamline