How to Build a Delivery Challan Generator in JavaScript (Step-by-Step Tutorial 2026)

If you run a small business in India — a wholesale shop, a trading firm, a small manufacturer — you already know the delivery challan. It is the document that travels with your goods: it says who sent what, to whom, in what quantity, and under what terms. No payment is demanded on it, yet without it your delivery driver can be stopped, your customer can dispute the quantity, and your own records turn into a mess.

Most small businesses still make challans in Word, Excel, or a handwritten book. That works until it doesn't: a rate typed wrong, a quantity forgotten, a challan number repeated, a copy lost. In this tutorial, you will build your own delivery challan generator in plain HTML, CSS, and JavaScript — no framework, no backend, no cost. By the end, you will have a working tool that creates GST-ready challans, calculates totals automatically, and prints a clean copy. And if you would rather skip the coding, you can download a ready-made version free at the end of this post.

1. What a Delivery Challan Actually Is (and Isn't)

A delivery challan is a proof-of-delivery document, not a tax invoice. Under GST rules, it is used when goods move without a sale — for example, goods sent for job work, goods sent on approval, goods moved between your own branches, or goods delivered before the invoice is raised. It is also commonly used by traders who deliver goods first and bill later.

Because no tax is charged on a challan in the classic sense, many beginners confuse it with an invoice. The practical difference is simple: an invoice demands payment; a challan records movement. That is why a good challan still carries values — the value of goods matters for transport, insurance, and e-way bill purposes — but it does not close a sale. Your generator must therefore make this distinction visible: label the document "Delivery Challan" clearly, show a challan number (not an invoice number), and keep the tax section optional rather than forced.

For a small Indian business, a challan typically needs: your business name, address, and GSTIN (if registered); the receiver's name and address; a challan number and date; item details (description, HSN code where known, quantity, unit, rate, amount); the total value; vehicle and transporter details where applicable; and a signature line. Everything else is decoration.

2. Planning the App Before You Write Code

Good tutorials skip this step; good apps don't. Before writing a single line, decide the shape of your data. Your challan generator really has only three pieces of state: the sender and receiver details, a list of items, and the challan meta (number, date, vehicle number, remarks). If you model these as one plain JavaScript object, everything else — the form, the preview, the print view, the totals — becomes a rendering of that object.

Start with this mental model:

const challan = {
  number: "DC-0001",
  date: "2026-10-28",
  sender: { name: "", address: "", gstin: "" },
  receiver: { name: "", address: "" },
  items: [ { description: "", qty: 0, rate: 0 } ],
  vehicleNo: "",
  remarks: ""
};

Keeping one source of truth pays off immediately. When the user edits an item's quantity, you update the object and re-render the totals — you never try to read numbers back out of the page. This pattern, sometimes called "state first, DOM second", is the single habit that separates beginner projects that grow messy from ones that stay maintainable. It is also exactly how the free Delivery Challan Generator on CodeFree is structured, so the finished tool you download later will feel familiar.

3. Step 1: Build the HTML Structure

Create an index.html with two main areas: an editor on the left and a live preview on the right. On a phone, they stack. The editor holds simple form fields — text inputs for business and receiver details, a date picker, and a table-like list of item rows where each row has description, quantity, unit, and rate. Add buttons to add a row and remove one.

The preview is the document itself: a bordered sheet with your business name at the top, "DELIVERY CHALLAN" as the heading, challan number and date on the right, a sender/receiver block, the items table, a totals box, and a signature line at the bottom. Use semantic tags — <header>, <table>, <footer> — because a challan is a document, and documents should be structured, not just styled divs. This also makes your print stylesheet (step 5) far easier.

One practical tip for Indian users: keep the number of required fields small. If your form demands GSTIN, HSN, vehicle number, and transporter name before it will generate anything, shopkeepers will abandon it. Make only business name, receiver name, and at least one item required; everything else optional. Adoption beats completeness.

4. Step 2: Style It Like a Real Document, Not a Web Page

A challan is printed, filed, and sometimes photographed for WhatsApp. Style the preview accordingly: white background, dark text, thin borders, generous padding, and a fixed readable width (around 800px). Avoid gradients, shadows, and bright colours in the preview — they look great on screen and terrible on a photocopy. Save the colour for the editor around it.

Use CSS to separate screen from print early. A @media print block that hides the editor, buttons, and page chrome, and shows only the preview sheet, will save you a painful rewrite later. Add @page { size: A4; margin: 12mm; } so the printed challan fits one page for typical item counts. Test with your browser's Print Preview (Ctrl+P) after every styling change — it is the fastest feedback loop in this whole project.

For the editor itself, keep it simple and mobile-friendly: full-width inputs, large tap targets, and a sticky "Generate / Print" button. Many small-business users will open this on a phone at the shop counter, not on a desktop. If the form is painful on mobile, the tool will not get used, however good the logic is.

5. Step 3: Write the Calculation Engine

This is the heart of the app, and it is smaller than most beginners expect. Each item's amount is quantity multiplied by rate. The subtotal is the sum of all item amounts. If you offer GST, tax is a percentage of the subtotal; the grand total is subtotal plus tax. That is the whole engine.

function calculate(items, gstPercent) {
  const subtotal = items.reduce((sum, item) =>
    sum + (Number(item.qty) || 0) * (Number(item.rate) || 0), 0);
  const tax = subtotal * (Number(gstPercent) || 0) / 100;
  return { subtotal, tax, grandTotal: subtotal + tax };
}

Three details matter here. First, use Number(...) || 0 so an empty field never turns your total into NaN — an empty input should mean zero, not a broken page. Second, format money Indian-style with toLocaleString("en-IN") so ₹1,00,000 reads correctly instead of ₹100,000; your users will notice and trust the tool more for it. Third, write an amount-in-words function if you can — "Rupees Thirty-Two Thousand Five Hundred Sixty-Eight Only" is still expected on many business documents in India, and it is a satisfying stretch goal once the basics work.

Validate before you calculate: block generation when the business name is empty, when there are no items, or when a quantity is zero or negative. Show the error next to the field, not in a popup alert — alerts feel broken, inline errors feel helpful. And escape user input when rendering it into the preview (use textContent, never innerHTML, for user-typed values) so a stray "<" in a product name cannot break your page.

6. Step 4: Auto-Numbering, Saving, and Printing

A challan generator that forgets everything on refresh is a demo, not a tool. Add two small features that make it genuinely usable. First, auto-numbering: store the last used challan number in localStorage and suggest the next one (DC-0001, DC-0002, and so on) each time a new challan is started. Second, save drafts: store the whole challan object in localStorage on every change, and restore it when the page reloads. Both features are under twenty lines each, and together they turn a tutorial project into something a real shop can rely on.

For printing, use window.print() behind your Generate button and let the print stylesheet do the work. Offer a "Download / Save as PDF" hint too — in most browsers, choosing "Save as PDF" in the print dialog is the PDF export, no library needed. If you later want a true one-click PDF, a library like html2pdf can be added, but do not add it on day one; every dependency is a future maintenance cost.

Finally, test like a user, not like a developer. Create a realistic challan: a sender, a receiver, three or four items with different quantities and rates, an 18% GST toggle, a vehicle number. Check the subtotal by hand. Check the print preview fits one page. Type a product name with an ampersand and a quote mark and confirm nothing breaks. These ten minutes of testing catch the bugs your users would otherwise find.

7. Common Mistakes Beginners Make (and How to Avoid Them)

The most common mistake is reading totals back out of the page instead of computing them from state — it works until a row is deleted or edited, and then totals silently go stale. The second is treating every field as required, which kills adoption. The third is styling the preview for the screen instead of for print, producing challans that look modern on a laptop and broken on paper. The fourth is skipping validation: a challan with no items or a zero quantity should never be printable.

The deeper lesson is transferable to every business tool you build next — quotation generators, invoice makers, expense trackers. The pattern is always the same: one state object, a form that edits it, a preview that renders it, totals computed from state, validation before output, and a print stylesheet. Learn it once on a challan generator and you can reuse it for a whole shelf of tools. That is why this is such a good beginner project: it is small enough to finish in a weekend and real enough to actually use on Monday morning.

Download the Ready-Made Version Free

If you would rather start from working code than type every line yourself, download the free Delivery Challan Generator source code from CodeFree — HTML, CSS, and JavaScript, free to use and modify for your own business. Use it as-is at your shop counter, or use it as the finished reference while you follow this tutorial and build your own version alongside it. Either way, you will end the day with a challan process that takes two minutes instead of half an hour.

Frequently Asked Questions

Is a delivery challan the same as a tax invoice?

No. A tax invoice demands payment and records a sale; a delivery challan records the movement of goods without demanding payment. Challans are used for job work, goods on approval, branch transfers, and deliveries made before invoicing.

Do I need GST registration to issue a delivery challan?

Not necessarily — unregistered businesses also issue challans for deliveries. If you are GST-registered, include your GSTIN on the challan; if not, leave that field blank. The challan is a delivery record either way.

Can I build this without knowing a JavaScript framework?

Yes. This entire project uses plain HTML, CSS, and vanilla JavaScript — no React, no backend, no build step. If you know basic variables, functions, and DOM selection, you have everything you need.

How do I turn my challan into a PDF?

Use your browser's print dialog (Ctrl+P) and choose "Save as PDF" as the destination. The print stylesheet in this tutorial hides the editor and prints only the challan sheet, so the PDF comes out clean.