Forem: Dharan Ganesan

We Needed to Send Invoices as PDFs. Here's How We Solved It.

Dharan Ganesan — Thu, 15 Jan 2026 15:57:28 +0000

A few months ago, our finance team came to us with a very reasonable request.

They were manually creating invoices in Google Docs, exporting them as PDFs, and emailing them to clients every week. It took about three hours every Monday, and they wanted it automated.

I remember thinking:

“This is just PDF generation. I’ve built far more complex things than this.”

That confidence lasted about five minutes. If you’ve never built PDFs before, this article is for you. If you have built PDFs before, you already know where this is going — brace yourself, it’s going to hurt a little. 😅

At the time, the request sounded harmless. Automate invoices. Generate PDFs. Ship it.

What we didn’t realize was that this small task would turn into a few full weeks of fighting browsers, fonts, tables, pagination, and our own overconfidence.

Attempt #1: “Let’s Just Use a PDF Library” 🤡

Like most developers, I started with a PDF library that lets you define documents using JSON.

const docDefinition = {
  content: [
    { text: "INVOICE", style: "header" },
    {
      table: {
        body: [
          ["Pro Plan", "$99"],
          ["Extra Users", "$75"],
        ]
      }
    }
  ]
};

pdfMake.createPdf(docDefinition).download("invoice.pdf");

On paper, it sounded reasonable. In practice, it felt like writing CSS inside a spreadsheet. Everything was deeply nested, styling was awkward, and dynamic tables — the most important part of invoices — were incredibly painful to manage.

After a few days, it was obvious this wasn’t going to scale.

Problems showed up immediately:

Tailwind design system was useless — every style had to be rewritten
Simple layout changes turned into deeply nested config objects
Dynamic content meant unreadable JSON logic
Debugging was painful: generate → download → open → squint → repeat

It also looked like it was designed in 2009.

Attempt #2: “What If We Just Print HTML?” 🖨️

Next came the obvious idea: we already had HTML, so why not just use window.print()?

<div id="invoice">
  <h1>Invoice</h1>
  <table>
    <tr><td>Pro Plan</td><td>$99</td></tr>
  </table>
</div>

<button onclick="window.print()">Generate PDF</button>

At first, it felt like magic ✨

We could reuse our existing HTML. Our CSS worked. Things looked mostly correct.

Then we tested across browsers:

Chrome: looks fine
Safari: weird margins
Firefox: table headers disappear
Windows Chrome: footer gone

Pagination was complete chaos. Product names on one page, prices on the next. Half a logo appearing at the bottom of a page for no reason.

For internal docs, this might be acceptable. For client-facing invoices, it wasn’t even close.

Attempt #3: “Okay Fine, Headless Chrome” 😐

To fix browser inconsistencies, we moved to Puppeteer — headless Chrome running on the server.

Same browser. Same environment. Same output every time.

import puppeteer from "puppeteer";

async function generateInvoice(html) {
  const browser = await puppeteer.launch({
    args: ["--no-sandbox", "--disable-setuid-sandbox"],
  });

  const page = await browser.newPage();
  await page.setContent(html, { waitUntil: "networkidle0" });

  await page.pdf({
    format: "A4",
    printBackground: true,
    margin: { top: "20mm", bottom: "20mm" },
  });

  await browser.close();
}

Consistency improved, but new problems appeared:

Custom fonts were missing on Linux servers
Images sometimes loaded, sometimes didn’t
Minor CSS changes broke pagination in surprising ways
No real control over page breaks

It felt like building IKEA furniture without instructions. Everything technically fit together, but nothing felt solid.

The Real Problem (Nobody Explains This)

Eventually, the pattern became clear.

HTML is designed for scrolling. PDFs are designed for pages.

Web Pages	PDFs
Infinite scroll	Fixed page sizes
Flexible layout	Exact layout
No page rules	Strict pagination

Browsers try to bridge this gap.

They mostly fail.

Every team ends up rediscovering this the hard way.

The Thing That Finally Worked 🎉

After weeks of frustration, we discovered pdfn, and it completely changed how we generate PDFs. It lets you build invoices, receipts, or contracts as React components with loops, props, and conditionals, while automatically handling pagination, headers, footers, and smart page breaks.

React Components
  (Invoice, Receipt)
         │
         ▼
 @pdfn/react
  - Pagination-aware rendering
  - Smart page breaks
  - Headers & Footers
         │
         ▼
 @pdfn/serve
  - Headless Chromium / Puppeteer
         │
         ▼
 Perfect PDF Output

import { Document, Page } from "@pdfn/react";

export default function Invoice() {
  return (
    <Document
      title="Invoice #001"
      fonts={[
        // Google Fonts (loaded from CDN)
        "Inter",
        { family: "Roboto Mono", weights: [400, 700] },
        // Local fonts (embedded as base64)
        { family: "CustomFont", src: "./fonts/custom.woff2", weight: 400 },
      ]}
    >
      <Page size="A4" margin="1in">
         <AvoidBreak>
            <Table />
         </AvoidBreak>
      </Page>
    </Document>
  );
}

This architecture makes it easy to maintain and debug your PDF templates.

Why pdfn Felt Different

You write React, not JSON
You use Tailwind, not a custom styling system
Pagination is built-in, not hacked with CSS
Headers and footers work by default
Smart page breaks (no mid-row or mid-paragraph splits)
Dynamic page numbers (Page 1 of 5 works automatically)
Live preview and hot reload
Debug overlays to visualize margins, grid, and page breaks

The code was readable. The output was predictable.

pdfn is open source (MIT licensed), so there’s no vendor lock-in or surprise pricing later. Inspect the code, self-host it, and adapt it to your needs.

Where We Are Now

Today, our entire PDF workflow is fully automated. Invoices, receipts, agreements, and onboarding forms generate automatically. Finance no longer opens Google Docs, fixes spacing, downloads, or emails PDFs by hand.

TL;DR (For Tired Developers)

PDFs are deceptively hard
HTML-to-PDF sounds easy (it isn’t)
Browser printing will betray you
Page-aware tools matter

If you’re about to build PDF generation, please learn from my mistakes.

PDFs are hard. You’re not bad at your job.

Why We're Sharing This

pdfn is relatively new with a small but responsive team. The maintainers answered our issues. The library is actively maintained. It's MIT licensed, so we're not locked in.

More developers need to know it exists.

If this helped:

⭐ Star github.com/pdfnjs/pdfn
📝 Share your use case if you try it
🐛 Report issues to help improve it
💬 Share this article with teams stuck in PDF hell

Open source only works when we share what works.

The Untold Story of Comet Browser

Dharan Ganesan — Sun, 07 Sep 2025 17:00:00 +0000

It all started with headlines claiming that Perplexity was aiming to buy Google’s Chrome browser. That bold move immediately caught my attention. How could a relatively small player even entertain such an audacious idea?

Curiosity led me to spend a weekend investigating Comet. That exploration revealed an unusual story of engineering trade-offs and surprising truths.

Every once in a while, a new browser flashes across the tech sky like a comet – bright, fast, and promising to change the way we surf the web. But behind the shine lies a story of engineering, trade-offs, and a few surprising revelations.

Meet Comet Browser, an ambitious entry into the long-running browser wars. On the surface, it offers lot of AI-powered features. But when you dig deeper, you’ll find that Comet isn’t a full browser in the traditional sense – it’s something far more unconventional.

First Impressions: A Shiny Tail

Comet Browser presents itself as a minimalist, fast, and clean browser.

But the shine is more than skin-deep:

Tabs open fast, almost instantaneously.
Built-in ad blocking shields you by default.
AI-assistant and summarization features make browsing feel smarter.

Pulling Back the Curtain: What’s Really Happening

As I dug into Comet, I discovered something fascinating: Comet isn’t really a standalone browser at all.

Comet works in two main ways:

The UI website: Acts as a smart co-pilot, providing suggestions and controlling the sidebar features.
The extension: A hidden browser add-on that listens to commands from the website and performs actions like opening tabs or summarizing content.

The website sends structured messages to the extension, which executes them and reports the results back. Together, they create the feel of a full browser, while really running on top of Chromium with a clever helper system.

Exposing the Message Flow

The most interesting part of Comet’s design is the communication layer between the extension and the website. Here are a few examples:

OPEN_TAB,
NAV_SEARCH,
SEARCH_TABS,
...
GET_IS_DEFAULT_BROWSER,
SET_AS_DEFAULT_BROWSER

These cover tab management, ad, quick actions, system-level settings, ...

Here are simplified examples of how they work:

OPEN_TAB

The website sends: OPEN_TAB(url)
Extension opens the tab and notifies the website

SEARCH_HISTORY

Website sends: SEARCH_HISTORY(query)
Extension searches browser history and returns results

In effect, the extension acts as the messenger, while the website handles the logic and processing.

Architecture

Below is a unified architecture diagram showing interactions between the website UI, extension, Chromium, and AI processing.

Website(agent like UI) (interaction)
        |
        v
+---------------------------+
| Extension receives message |
| (open tab / search / get   |
| content / ...)             |
+---------------------------+
        |
        v
  Performs action
        |
        v
  Extension returns result
        |
        v
  Website updates UI
        |
        +----------------------+
        |                      |
        v                      |
Website performs AI-driven actions (clicks, content processing, suggestions)
        |
        +----------------------+
        |
        +----------------------> loop back to Extension receives message

This diagram shows how the website, extension, Chromium, and AI engine work together to deliver the browser experience.

How You Can Test It Yourself

You don’t have to take my word for it. Try it out yourself:

Open Comet Browser
Visit: https://www.perplexity.ai/sidecar/
Interact with the page – click buttons and use the features to see it in action.
To check the extension, open the browser console and run:

// Check if Comet is set as the default browser
chrome.runtime.sendMessage("mcjlamohcooanphmebaiigheeeoplihb", { type: 'GET_IS_DEFAULT_BROWSER' }, console.log);

// Open a new tab via the extension
chrome.runtime.sendMessage("mcjlamohcooanphmebaiigheeeoplihb", { type: 'OPEN_TAB', payload: { url: 'https://google.com' } }, console.log);

You’ll see how the website and extension communicate in real time.

Every Comet Has a Shadow

This design comes with trade-offs:

Complexity: Two moving parts (extension + website) increase the risk of bugs.
Chromium dependency: Comet depends on Chromium’s APIs and updates.
Privacy: The website may process data outside the normal browser sandbox.
Identity: Is Comet truly a browser, or just a clever wrapper? That’s up to the users to decide.

The People Behind the Curtain

Comet’s developers are practical. Building a full browser engine from scratch is nearly impossible today. By using the website + extension approach, they deliver new ideas while staying compatible.

Users get the feel of a new browser, while developers avoid reinventing the wheel.

Will Comet Burn Out or Shine On?

Comet’s approach is unconventional and bold. If users embrace it, similar setups may follow. If not, it could fade into obscurity.

The question remains: can a smart website paired with an extension compete with Chrome, Firefox, or Brave?

Next Steps: A Dream Port

One wild idea that keeps crossing my mind – what if Comet could live inside Chrome itself?

In theory, it is possible to port the above into a Chrome, so Chrome users could tap into Comet’s smart features without switching browsers.

It’s just a dream for now – creating such an extension would take effort and time. But the concept is open for anyone curious enough to explore. If you ever get a chance to tinker with it, I’d love to see what you build.

🛠️ Browser Extensions

Dharan Ganesan — Sat, 13 Jul 2024 16:30:00 +0000

In today's digital landscape, browser extensions have become an integral part of our online experience. But how did we get here, and what makes these small yet powerful tools so important? This comprehensive guide will take you on a journey through the history, development, and future of browser extensions, providing valuable insights for both casual users and aspiring developers.

The Historical Journey of Browser Extensions

From Mainframes to Modern Browsers

The story of browser extensions is rooted in the history of software plugins, dating back to the 1970s:

Mainframe Era: Early plugins allowed users to modify and extend program functionality on massive computers.
Early Internet Age: As the web grew, browser plugins like Java applets, Adobe Flash, and Microsoft Silverlight emerged.
Transition Period: Security and usability issues with early plugins led to a shift towards more integrated solutions.

The Birth of Modern Browser Extensions

The landscape changed dramatically in 2009:

Google Chrome introduced the first modern browser extensions.
These extensions utilized familiar web technologies: HTML, CSS, and JavaScript.
The ease of development and use led to rapid adoption and a thriving ecosystem.

Cross-Browser Compatibility

The success of Chrome's model influenced other major browsers:

Firefox, Safari, and Microsoft Edge adopted similar extension frameworks.
This convergence created a rich, cross-browser landscape of extensions.

The Power and Versatility of Browser Extensions

Browser extensions have become indispensable tools, serving a wide array of purposes:

Ad and Tracking Blockers: Enhance browsing speed and protect user privacy.
Password Managers: Secure credentials and defend against phishing attempts.
Writing and Grammar Tools: Improve writing quality across the web.
Tab Management: Streamline workflow with advanced tab control.
Content and Link Managers: Organize and save web content efficiently.
Accessibility Enhancements: Make the web more inclusive for all users.
Screen Recording and Sharing: Facilitate easy content capture and collaboration.
API Integrations: Connect web services and enhance data sharing.
Developer Tools: Provide powerful debugging and inspection capabilities.
Digital Currency Wallets: Manage cryptocurrencies securely within the browser.

Developing Your Own Browser Extension

For those inspired to create their own extensions, here's a brief overview of the process:

Choose Your Browser: Start with Chrome or Firefox for the widest reach.
Plan Your Extension: Define its purpose and core functionality.
Set Up Your Development Environment: Use familiar web development tools.
Create the Manifest File: This JSON file is the blueprint of your extension.
Develop Your Extension: Write the HTML, CSS, and JavaScript code.
Test Thoroughly: Ensure your extension works as intended across different scenarios.
Publish Your Extension: Submit it to the browser's extension store for review.

The Future of Browser Extensions

The future of browser extensions looks bright and full of potential:

Standardization: The WebExtensions Community Group (W3C) is working towards a unified extension model across browsers.
Enhanced Security: Browsers are implementing stricter security measures for extensions.
AI Integration: Expect to see more extensions leveraging artificial intelligence and machine learning.
Performance Improvements: Future extensions will likely have less impact on browser performance.
Expanded Capabilities: As web technologies evolve, so too will the power of extensions.

Conclusion

Browser extensions have come a long way from their plugin predecessors, becoming an essential part of our online experience. Whether you're a casual user looking to enhance your browsing or a developer seeking to create the next game-changing extension, understanding this ecosystem is crucial in today's digital world.

By embracing the power of browser extensions, you're not just customizing your web experience – you're participating in the ongoing evolution of the internet itself. So explore, experiment, and perhaps even develop your own extension. The future of the web is in your hands!

Day 100: Last Day

Dharan Ganesan — Mon, 18 Dec 2023 16:30:00 +0000

Hello fellow developers and enthusiasts! 🚀 Today marks the end of my 100 Days Learning Challenge as a frontend engineer. I can't believe how fast time has flown and how much I've grown during this incredible journey. As I bid farewell to this challenge, I want to express my deepest gratitude to all of you who have been a part of this ride.

🌟 A Heartfelt Thank You

First and foremost, I want to thank each and every one of you who took the time to read my articles, follow my progress, and provide encouragement along the way. Your support has been invaluable and has fueled my determination to push through the highs and lows of this learning adventure.

📚 What Did I Learn?

Throughout these 100 days, I delved into the vast world of frontend development, exploring everything from the basics of HTML and CSS to advanced JavaScript concepts and modern frameworks like Angular and React. I conquered challenges, embraced new technologies, and honed my problem-solving skills. The learning never stops, and I'm excited to carry this knowledge forward in my career.

🤝 Seeking Your Feedback

As I wrap up this challenge, I'm eager to hear your thoughts. Your feedback is crucial to my growth as a developer and content creator. What articles did you find most helpful? Are there specific topics you'd like me to explore further? Your insights will shape the direction of my future content.

Please take a moment to share your feedback through this Feedback Form. I genuinely appreciate your input, and together, we can make the learning experience even better.

Conclusion

As I close the chapter on my 100 Days Learning Challenge, I extend my heartfelt thanks once again. Whether you're a seasoned developer or just starting out, remember that the journey of learning is ongoing. Let's continue to support each other and build a thriving community of passionate developers.

Day 99: Match Pair

Dharan Ganesan — Sun, 17 Dec 2023 16:30:00 +0000