DEV Community: Jafran Jemal

Stop Building Invoices. Give Your Users a React Design Studio Instead.

Jafran Jemal — Tue, 12 Aug 2025 10:42:39 +0000

If you're a React developer, you’ve probably gotten that email.

It usually arrives right after you’ve shipped a shiny new feature, and it begins:

"Hey, quick change: can we move the customer address below the invoice number, make the total amount bigger, and add a 'Discount' column to the items table?"

Suddenly your sprint is derailed. Instead of building the next big feature, you’re back in the weeds — tweaking CSS, shuffling components, redeploying for what feels like a minor layout change.

It’s not just frustrating. It’s a repeatable waste of dev time.

I thought: There has to be a better way to handle user-facing documents in React.

✨ Introducing `@aavanamkit/designer`

@aavanamkit/designer is an open-source React component that works as a full drag-and-drop template designer — right inside your app.

It’s built for invoices, quotes, reports, certificates, or any printable document your app generates.

💡 Core idea: Stop being the bottleneck. Let your users create and edit their own templates with a familiar, intuitive interface.

No more redeploys for layout tweaks
No more CSS churn for “just one more change”
Zero config to get started

Teams using @aavanamkit/designer have cut document change requests from hours to seconds.

🚀 Live Demo — Try It Now

Big button, no distractions. Click it. Play. Done.

🚀 TRY THE LIVE DEMO →

🛠 How It Works — For React Devs

The integration is intentionally three simple steps.

1️⃣ Install the Package

npm install @aavanamkit/designer

2️⃣ Define Your Data Schema

This tells the designer what dynamic fields users can insert.

// Your application's data structure
const myAppSchema = {
  customer: { name: "string", address: "string" },
  invoiceNumber: "string",
  items: [{ description: "string", total: "number" }]
};

3️⃣ Render the Component

import React from 'react';
import AavanamKit from '@aavanamkit/designer';

// Prebuilt CSS — no Tailwind setup needed
import '@aavanamkit/designer/dist/AavanamKit.css';

function TemplateEditor() {
  const handleSave = async (templateJson) => {
    console.log("Saving template to database:", templateJson);
    // await saveTemplateToApi(templateJson);
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <AavanamKit schema={myAppSchema} onSave={handleSave} />
    </div>
  );
}

When your user clicks Save, you get a clean JSON object representing their design — ready to store or render.

🆚 Why Not Just Use Figma, Canva, or PDF Generators?

Figma / Canva → Great for designers, but your users need something inside your app, tied to their real data.
Static PDF generators → You’re still hardcoding layouts, and changes mean more code.
@aavanamkit/designer → Live, in-app, React-native, and powered by your own schema.

📦 Features at a Glance

✅ Drag-and-drop WYSIWYG editor
✅ Works with Next.js, Vite, CRA out of the box
✅ MIT Licensed — no lock-in
✅ Save designs as JSON — render anywhere
✅ Easy theming & custom components

📢 Get Involved

@aavanamkit/designer is MIT licensed and fully open source.

It was born from real-world developer pain, and I believe it can save hundreds of hours for teams everywhere.

Here’s how you can help:

⭐ Star the GitHub repo: https://github.com/jafranjemal/aavanamkit

📖 Read the Docs: https://aavanamkit-docs.vercel.app/

🚀 Try the Live Demo: https://aavanamkit-demo.vercel.app/

❤️ Sponsor the Project: https://github.com/sponsors/jafranjemal

💬 Got feedback? Open a GitHub Discussion or DM me on Twitter.

🏆 Community Challenge

Fork the repo, build a creative template, and post it in Discussions.

Best design each month gets a GitHub Sponsor shoutout 🎉

Final Thought

Every hour you spend tweaking invoice layouts is an hour not spent building your app’s real features.

Give your users control, and give yourself back the time you deserve.

🚀 Install @aavanamkit/designer Today

I Was Tired of Building Invoices, So I Built a Full-Stack React Document Designer

Jafran Jemal — Sat, 09 Aug 2025 09:45:13 +0000

If you’ve been a web developer for any length of time, you know the email. It arrives a week after you’ve successfully launched a big project. It starts with "Quick change..." and it’s about the PDF invoice generator you spent way too long building.

"Hey, this is great! Quick change: can we move the logo to the right, make the 'Total' bold, and add our new company slogan to the footer?"

Suddenly, your sprint is derailed. You’re not building the next big feature; you’re digging through old code, fighting with a clunky PDF library or tweaking print.css, all to shift a logo a few pixels. You’ve become a report designer, and it’s a frustrating, unprofitable loop.

This is a huge gap in our industry. We build these incredible, dynamic applications, but the moment we need to create a physical document, we revert to rigid, hardcoded templates that make us the bottleneck for every tiny business change.

I decided there had to be a better way.

✨ Introducing AavanamKit: A Design Studio for Your Users

What if, instead of building the invoice, you could build the invoice designer?

That’s the core idea behind AavanamKit, the open-source project I've been building. It’s a complete, full-stack ecosystem for document generation, and it’s designed to do one thing: give the design power back to your users.

AavanamKit is made of two distinct but perfectly synchronized packages:

🎨 @aavanamkit/designer: A powerful, embeddable React component that provides a full WYSIWYG "design studio" for your users.
⚙️ @aavanamkit/engine: A pure, headless Node.js library that takes the templates your users create and generates pixel-perfect documents on your server.

🚀 Show, Don't Just Tell: The Live Demo

The best way to understand it is to see it. I've built a full live demo where you can play with the designer right now, no installation required.

» Try the Live Demo Now!

(Here is a GIF of the designer in action.)

🛠️ How It Works: The 3-Step Workflow

The entire system is designed to be simple and intuitive.

1. You Define the Schema

In your application, you define the shape of your data. This is the "dictionary" the designer will use.

// Your application's data structure
const myAppSchema = {
  customer: { name: "string", address: "string" },
  invoiceNumber: "string",
  items: [{ description: "string", total: "number" }]
};

2. Your Users Design the Template
You embed the <AavanamKit /> component in your admin panel and pass it your schema. Your users can then drag, drop, and bind elements to your data fields. When they hit "Save," you get a clean JSON object representing their design.

// Your user-facing template editor page
import AavanamKit from '@aavanamkit/designer';
import '@aavanamkit/designer/dist/style.css';

function TemplateEditor({ schema, onSave }) {
  return (
    <AavanamKit
      schema={schema}
      onSave={onSave} // Your function to save the template JSON to your DB
    />
  );
}

3. You Generate Documents on the Backend
When a user needs a real invoice, you use the @aavanamkit/engine on your server. You feed it the saved template and the live data.

// Your backend API route
import { generate } from '@aavanamkit/engine';

app.get('/api/invoices/:id/download', async (req, res) => {
  const template = await db.templates.findOne(...);
  const liveData = await db.invoices.findOne({ id: req.params.id });

  const pdfBuffer = await generate({
    template: template.templateData,
    data: liveData,
    outputType: 'pdf'
  });

  res.setHeader('Content-Type', 'application/pdf');
  res.send(pdfBuffer);
});

An Open Invitation
AavanamKit is a fully open-source project under the MIT license. It was born from a real-world developer frustration, and I believe it can save countless hours for others in our community.

If this idea resonates with you, I'd be thrilled if you checked it out.

⭐ Star the project on GitHub: https://github.com/jafranjemal/aavanamkit

📖 Read the Docs: https://aavanamkit-docs.vercel.app