Pricing Models & Quote Generation

Build professional quotes with pricing tiers, ready-made templates, and export-ready totals.

Overview

This single-page quote builder helps sales and finance teams assemble customer proposals without spreadsheets or back-office software. Enter customer details, pick a pricing template, adjust line items in an editable grid, and watch subtotals and discounts update automatically. Switch pricing tiers to model volume or enterprise deals, save quotes for later, and download polished Excel or PDF files—all in the browser with no login required.

Key features

Summary cards

Four headline metrics at the top of the page give an at-a-glance view of the current quote: Line Items, Subtotal, Discounts, and Grand Total. Every figure updates live as you edit the grid, change tiers, or load a saved quote.

Customer and quote details

A simple form captures customer name, company, email, and quote date. These details flow into saved quotes and appear on exported Excel and PDF files so each proposal is ready to send.

Pricing templates

Choose from three starter templates—SaaS subscription, Professional services, and Hardware bundle—each pre-filled with realistic sample line items (licenses, workshops, gateways, and more). Switching templates replaces the line-item table with that bundle’s products and quantities so you can start from a familiar structure instead of a blank slate.

Pricing tiers and scenarios

A pricing tier selector models different deal structures:

• Standard — list price
• Volume — 10% off unit prices
• Enterprise — 15% off unit prices

Changing the tier recalculates every line’s unit price and total instantly, making it easy to compare how a deal looks at different discount levels.

Line-item grid

The main table is an AG Grid spreadsheet with columns for Product, Qty, Unit Price, Discount %, and Total. Click any cell to edit product names, quantities, prices, or per-line discounts. Line totals and a pinned TOTAL row at the bottom recalculate automatically. Columns can be sorted and resized. Use + Add line item to extend the quote with custom rows.

Quote status

Track where each proposal stands with a quote status dropdown: Draft, Sent, Accepted, or Rejected. Status is saved with the quote and shown with color-coded labels in the saved-quotes list.

Save, load, and manage quotes

Click Save Quote to store the current customer details, template, tier, status, line items, and grand total under a unique quote number (for example, Q-1001). The Saved quotes table lists every stored proposal with customer, template, tier, total, and status. Load restores a saved quote into the editor; Delete removes it after confirmation.

Exports

• Export Excel — downloads a workbook with a Quote Info sheet (customer, template, tier, status, grand total) and a Line Items sheet with the full product table.
• Quote PDF — generates a formatted PDF with customer header, template and tier notes, a line-item table, and grand total—ready to attach to an email or print.

Appearance

A dark mode toggle switches the full layout between light and dark themes, including the grid. Your theme preference is remembered between visits.

Data & persistence

The app ships with sample customer details and template line items so you can explore immediately. Your current draft (customer fields, template, tier, status, and line items), the full saved quotes list, the next quote number, and dark-mode preference all persist in localStorage in the same browser—no account or server required. Data stays on your device until you clear browser storage or use another browser.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, SheetJS (Excel export), and jsPDF with AutoTable (PDF export)—all loaded from CDNs in one self-contained HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.