Documentation — Payora

Getting Started

Payora is a 100% offline HTML5 application that lets you create professional invoices directly in your browser. No server, no database, no internet required after initial page load.

                  Quick Start: Simply open index.html in your browser. Click "Create Invoice" to open the editor. That's it!
                

Key Features:

20+ professionally designed invoice templates
8 accent color presets + custom color picker
Live preview — changes update instantly
Logo upload (PNG/JPG) with drag & drop
Line items with auto-calculation (quantity × price)
Tax % and Discount % auto-calculation
Status badges: Paid, Pending, Overdue, Draft
Currency switcher: USD, EUR, GBP, BDT, INR, JPY
PDF download via jsPDF + html2canvas
Print support
Dark/Light mode
Local storage — save unlimited documents

Installation

Payora requires no installation, no build tools, no npm, and no server. Just follow these simple steps:

Extract the downloaded ZIP file
Open the extracted folder
Double-click index.html to open in your browser
That's it! Start creating invoices

For web servers (optional):

If you want to host Payora on a web server, simply upload all files to your server's public directory. No PHP, Node.js, or database setup is needed.

# Example: Upload to Apache/Nginx /var/www/html/Payora/ ├── index.html ├── editor.html ├── privacy.html ├── terms.html ├── documentation.html ├── css/ ├── js/ └── assets/

File Structure

File/Folder	Description
`index.html`	SaaS landing page with hero, features, pricing, FAQ
`editor.html`	Invoice editor with live preview
`privacy.html`	Privacy Policy page
`terms.html`	Terms & Conditions page
`documentation.html`	This documentation page
`css/style.css`	Design system, landing page styles
`css/editor.css`	Invoice editor styles
`css/pages.css`	Legal/documentation page styles
`js/app.js`	Landing page logic (theme, nav, FAQ, modal)
`js/editor.js`	Invoice editor logic
`js/templates.js`	20 invoice template definitions + render engine
`js/storage.js`	LocalStorage CRUD operations

Invoice Editor

The Invoice Editor (editor.html) provides a split-panel interface with form controls on the left and a live preview on the right.

Sidebar Navigation:

Details — Business info (From/To), invoice number, dates, currency, status, notes
Line Items — Add/remove items with description, quantity, price, and auto-calculated totals. Set tax % and discount %.
Style — Choose from 8 accent color presets or pick a custom color. Select font family.
Templates — Browse and select from 20 invoice templates
My Invoices — View saved invoices, create new, load existing, or delete

Toolbar Actions:

Zoom — Zoom in/out or fit to screen
Print — Opens print dialog in a new window
Download PDF — Generates and downloads a PDF file
Save — Saves the current invoice to localStorage

Templates

Payora includes 20 invoice templates:

Invoice Templates:

#	Template Name	Category
1	Classic White	Professional
2	Modern Dark	Modern
3	Minimal Line	Minimal
4	Bold Header	Bold
5	Corporate	Business
6	Elegant Serif	Elegant
7	Tech Startup	Tech
8	Creative Studio	Creative
9	Professional Gray	Professional
10	Neon Accent	Modern
11	Gradient Header	Creative
12	Split Layout	Modern
13	Sidebar Style	Layout
14	Compact	Minimal
15	Executive	Business
16	Freelancer	Personal
17	Agency	Business
18	Consultancy	Professional
19	E-Commerce	Retail
20	Carbon Dark	Dark

Color Customization

Choose from 8 preset accent colors or use the custom color picker:

Preset	Color Code
Ocean Blue	`#2563EB`
Emerald	`#059669`
Royal Purple	`#7C3AED`
Sunset Orange	`#EA580C`
Rose	`#E11D48`
Teal	`#0D9488`
Slate	`#475569`
Amber	`#D97706`

The accent color affects: invoice title, total amount, notes border, status highlight, and template header backgrounds.

PDF Generation

PDFs are generated client-side using two libraries:

html2canvas — Captures the invoice preview as a high-resolution canvas image (2x scale)
jsPDF — Converts the canvas to a downloadable A4 PDF file (210mm × 297mm)

How it works:

Preview zoom is temporarily set to 100% for accurate capture
html2canvas renders the preview element to a canvas at 2x resolution
The canvas is converted to a JPEG image (95% quality)
jsPDF creates an A4 PDF and embeds the image
The PDF is automatically downloaded
Preview zoom is restored

                  Note: For best PDF quality, ensure your browser window is at least 800px wide. Complex CSS features like backdrop-filter may not render perfectly in all browsers.
                

Local Storage

All documents are saved to your browser's localStorage under these keys:

Key	Purpose
`Payora-invoices`	Array of saved invoices (JSON)
`Payora-settings`	App settings (JSON)
`Payora-theme`	Current theme (light/dark)

Storage Limits: Browsers typically allow 5-10MB of localStorage. Each invoice (without logo) uses ~2-5KB. Logos are stored as base64 and can be 100KB-2MB each.

Dark Mode

Toggle dark/light mode using the moon/sun icon in the navigation bar or editor sidebar. The preference is saved to localStorage and persists across sessions.

Dark mode is implemented using CSS custom properties on the [data-theme="dark"] selector. All colors automatically update when the theme changes.

Customization

Changing Brand Colors:

Edit the CSS custom properties in css/style.css under :root:

/* Change primary brand color */ :root { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; }

Adding New Templates:

Add a new template object in js/templates.js and create matching CSS in css/editor.css.

Adding New Currencies:

Edit the getCurrencySymbol() function in js/templates.js and add an option to the currency dropdown in editor.html.

Browser Support

Browser	Supported
Chrome 90+	✅ Full Support
Firefox 88+	✅ Full Support
Safari 14+	✅ Full Support
Edge 90+	✅ Full Support
Opera 76+	✅ Full Support
IE 11	❌ Not Supported

FAQ

Q: Does Payora need a server?
A: No. It works 100% offline in your browser. Just open index.html.

Q: Can I use this commercially?
A: Yes, with the appropriate license (Regular or Extended from CodeCanyon).

Q: How do I backup my data?
A: Export each invoice as PDF. localStorage data can be lost if you clear browser data.

Q: Can I add more templates?
A: Yes! Add template definitions in js/templates.js and corresponding CSS in css/editor.css.

Q: Why does the PDF look slightly different from the preview?
A: html2canvas captures a bitmap image of the HTML. Some CSS features (like box-shadow or backdrop-filter) may render differently. The output is still high-quality and professional.

Changelog

v1.0.0 — April 20, 2026

Initial release
20 invoice templates
8 color presets + custom picker
PDF export via jsPDF + html2canvas
Print support
Dark/Light mode
6 currency options (USD, EUR, GBP, BDT, INR, JPY)
LocalStorage persistence
SaaS landing page
Privacy Policy & Terms pages

Support

If you need help or have questions:

Email: support@Payora.app
CodeCanyon: Use the item's comment section or support tab

Please include the following with your support request:

Browser name and version
Operating system
Screenshot of the issue (if visual)
Steps to reproduce the problem

                  Thank you! If you enjoy Payora, please leave a 5-star rating on CodeCanyon. It helps us continue improving the product!
                