This content originally appeared on DEV Community and was authored by jafranjemal
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.
(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
This content originally appeared on DEV Community and was authored by jafranjemal
jafranjemal | Sciencx (2025-08-09T09:45:13+00:00) I Was Tired of Building Invoices, So I Built a Full-Stack React Document Designer. Retrieved from https://www.scien.cx/2025/08/09/i-was-tired-of-building-invoices-so-i-built-a-full-stack-react-document-designer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.