# Why I Built a Code-Native Visual Studio for My Developer Posts

> Source: <https://dev.to/janarthanan_soundararajan/why-i-built-a-code-native-visual-studio-for-my-developer-posts-9f0>
> Published: 2026-09-25 06:05:33+00:00

Over the past year, AI image tools have become amazing. Being able to type a prompt and get a detailed picture in seconds feels like magic.

Like a lot of developers who post on LinkedIn, X, and Dev.to, I started using AI to create header images and diagrams for my technical write-ups.

But the more I posted, the more I ran into a few small, frustrating problems that made me rethink my workflow:

You probably know what I mean: glowing neon spheres, futuristic 3D glass cubes, and floating holograms. They look cool at first, but they didn’t feel like *me*. When I write about system design or web dev, I want visuals that feel real and grounded — like an engineer sketching architecture on an office whiteboard.

When you publish a series of posts or tutorials, you want them to feel connected. You want the same colors, the same fonts, and the same recognizable card styles every week. With text-to-image prompts, every generation is a fresh roll of the dice. A button that was purple yesterday turns neon blue today.

This was my biggest headache:

Imagine making a detailed architecture diagram. Everything looks great, but you spot a tiny mistake: `proccess` instead of `process`, or a port number that says `8080` instead of `443`.

With standard AI image generators, you can’t just click the text and fix it. You have to re-prompt from scratch. That means your whole layout shifts, colors change, and you have to start over.

With code, fixing a typo takes **2 seconds**: you change the text in the editor, and the canvas updates in 16 milliseconds.

To be completely honest: **I still use AI all the time.** 

I often ask ChatGPT or Gemini to draft the initial HTML and Tailwind layout for an idea.

In fact, I built a dedicated **"Prompt AI"** button right inside Yuwbrndr’s sidebar. It generates a ready-to-use prompt that tells your LLM exactly how to write compatible HTML, Tailwind, and Rough.js code.

The big difference is **where the control lives**:

These experiences led me to build [**Yuwbrndr**](https://techaaroorian.github.io/yuwbrndr/) — a free, browser-native studio where developers design visuals directly with HTML, Tailwind CSS, and Canvas.

Here are a few ways it changed my day-to-day workflow:

One of my favorite features in Yuwbrndr is the native **Slide Deck mode**.

On LinkedIn, multi-slide document carousels get significantly more attention than static single images because readers swipe through them step-by-step.

In Yuwbrndr:

Here is what surprised me when I looked into recent publishing data:

I actually designed this benchmark summary card directly in Yuwbrndr using the preset below:

```
<div class="relative w-full h-full bg-[#0c0d12] text-slate-100 flex flex-col justify-between p-10 overflow-hidden font-sans select-none border border-slate-800">

  <!-- Subtle Monotone Technical Grid (No colored glowing blur orbs) -->
  <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff04_1px,transparent_1px),linear-gradient(to_bottom,#ffffff04_1px,transparent_1px)] bg-[size:32px_32px] pointer-events-none"></div>

  <!-- Top Metadata Bar: Editorial Data Header -->
  <div class="relative z-10 flex items-center justify-between pb-4 border-b border-slate-800/80 text-xs font-mono">
    <div class="flex items-center gap-3">
      <span class="px-2.5 py-1 rounded bg-slate-800 text-slate-200 font-semibold tracking-wide">
        BENCHMARK REPORT
      </span>
      <span class="text-slate-400">Sample: 1,400,000+ LinkedIn Posts</span>
    </div>
    <div class="text-slate-500 flex items-center gap-2">
      <span>Source: Socialinsider Study</span>
      <span>•</span>
      <span class="text-slate-400">2026 Data</span>
    </div>
  </div>

  <!-- Main Section: Clean Editorial Title & Comparative Vertical Chart -->
  <div class="relative z-10 grid grid-cols-12 gap-10 items-end my-auto py-2">

    <!-- Left Column: Title & Key Findings (5 cols) -->
    <div class="col-span-5 space-y-4">
      <h1 class="text-3xl font-extrabold text-white tracking-tight leading-tight">
        Document Carousels Outperform Single Images
      </h1>

      <p class="text-slate-400 text-sm leading-relaxed">
        Multi-slide technical decks generate <strong class="text-white font-semibold">2.56x higher engagement</strong> than static screenshots because readers actively swipe rather than scroll past.
      </p>

      <div class="pt-2 space-y-2 text-xs font-mono text-slate-300">
        <div class="flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
          <span>Carousel Engagement: <strong class="text-emerald-400">5.48%</strong></span>
        </div>
        <div class="flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
          <span>Single Image Engagement: <strong class="text-slate-300">2.14%</strong></span>
        </div>
        <div class="flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
          <span>Text-Only Engagement: <strong class="text-slate-400">1.92%</strong></span>
        </div>
      </div>
    </div>

    <!-- Right Column: Authentic Vertical Bar Chart with Y-Axis (7 cols) -->
    <div class="col-span-7 bg-[#13151f] border border-slate-800 rounded-xl p-6">

      <div class="flex justify-between items-center text-xs font-mono text-slate-400 mb-6">
        <span class="uppercase tracking-wider">Average Engagement Rate by Post Format</span>
        <span class="text-emerald-400 font-semibold">+156% Lift</span>
      </div>

      <!-- Vertical Bar Chart Area -->
      <div class="h-44 flex items-end justify-around gap-6 pt-4 border-b border-slate-700/60 relative">

        <!-- Y-Axis Gridlines & Ticks -->
        <div class="absolute inset-x-0 top-0 border-b border-dashed border-slate-800/80 flex justify-between text-[10px] font-mono text-slate-600">
          <span>6.0%</span>
        </div>
        <div class="absolute inset-x-0 top-1/2 border-b border-dashed border-slate-800/80 flex justify-between text-[10px] font-mono text-slate-600">
          <span>3.0%</span>
        </div>

        <!-- Bar 1: Multi-Slide Carousel (Winner) -->
        <div class="flex-1 flex flex-col items-center h-full justify-end group">
          <span class="font-mono text-sm font-bold text-emerald-400 mb-1.5">5.48%</span>
          <div class="w-full max-w-[84px] h-[91%] bg-emerald-500 rounded-t-md relative">
            <div class="absolute top-1 inset-x-1 h-1 bg-white/20 rounded-sm"></div>
          </div>
        </div>

        <!-- Bar 2: Single Image -->
        <div class="flex-1 flex flex-col items-center h-full justify-end group">
          <span class="font-mono text-xs font-semibold text-slate-300 mb-1.5">2.14%</span>
          <div class="w-full max-w-[84px] h-[36%] bg-slate-600 rounded-t-md"></div>
        </div>

        <!-- Bar 3: Text Only -->
        <div class="flex-1 flex flex-col items-center h-full justify-end group">
          <span class="font-mono text-xs font-semibold text-slate-400 mb-1.5">1.92%</span>
          <div class="w-full max-w-[84px] h-[32%] bg-slate-700 rounded-t-md"></div>
        </div>

      </div>

      <!-- X-Axis Labels -->
      <div class="flex justify-around gap-6 pt-3 text-center text-xs font-mono">
        <div class="flex-1 font-bold text-white">Multi-Slide PDF</div>
        <div class="flex-1 text-slate-400">Single Image</div>
        <div class="flex-1 text-slate-500">Text Only</div>
      </div>

    </div>

  </div>

  <!-- Bottom Data Takeaways: 3 Grounded Metrics -->
  <div class="relative z-10 grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs font-mono">
    <div class="flex items-center gap-3">
      <span class="text-xl font-black text-emerald-400">2.56x</span>
      <span class="text-slate-400 leading-tight">Higher average engagement vs single image</span>
    </div>
    <div class="flex items-center gap-3">
      <span class="text-xl font-black text-white">3.2x</span>
      <span class="text-slate-400 leading-tight">Longer reader dwell time per swipe</span>
    </div>
    <div class="flex items-center gap-3">
      <span class="text-xl font-black text-amber-400">82%</span>
      <span class="text-slate-400 leading-tight">Mobile readers require bold slide text</span>
    </div>
  </div>
</div>
```

To move away from generic AI visuals, I integrated [Rough.js](https://roughjs.com/) directly into the studio.

Instead of writing complex canvas math, you can draw sketchy whiteboard boxes using simple HTML attributes:

``` php
<!-- Hand-drawn sketchy box with cross-hatch fill -->
<svg 
  data-rough-rect="fill: #8b5cf6; fillStyle: cross-hatch; roughness: 2; stroke: #a78bfa" 
  class="absolute inset-0 w-full h-full -z-10"
></svg>

<div class="p-6 font-comic text-white">
  <h3 class="text-xl font-bold">API Gateway & Edge Proxy</h3>
  <p class="text-slate-300">Rate limiting, SSL termination, JWT checks</p>
</div>
```

Paired with open-source fonts like `Comic Neue`, `Caveat`, and `Patrick Hand`, your diagrams feel personal and human — like notes from a real engineering whiteboard session.

Most tools make you sign up for an account, log in with Google, and save everything to their database.

I wanted Yuwbrndr to be 100% private and client-side:

`CompressionStream` (`#share=v1z...`).
For short snippets, this works like magic — the link is compact and completely self-contained. But for designs with lots of code, the URL hash can become massive. I’m actively working on a better alternative to handle sharing for larger designs while keeping user privacy first.

Yuwbrndr does not use Google Analytics or tracking cookies.

Everything you type, upload, or render stays strictly in your browser’s local memory. For basic traffic numbers, we use [GoatCounter](https://www.goatcounter.com/) — a lightweight, open-source, cookie-free tool that only counts anonymous page views. Your designs and code never leave your machine.

Yuwbrndr is completely free to use and open source under the MIT license:

If you write technical posts, share architecture diagrams, or just want full control over your visuals without subscription limits, give it a spin.

I’d love to hear your feedback: **How do you currently create visuals for your technical posts and tutorials?**