ContractSpark ✦

Beautiful Contracts That Protect You

✨ Preview

Beautiful, professional contracts generated with ContractSpark

ContractSpark is a premium, open-source contract generator for freelancers and small businesses. Create professional legal agreements in minutes — powered by AI, exported as perfect PDFs.

---

Features

• 8 Professional Templates — Freelance Agreement, Service Contract, NDA, Consulting Agreement, Client Retainer, Partnership Agreement, Employment Offer, Website Design Contract
• AI Smart Builder — Paste a project brief and get a complete contract instantly (powered by Claude)
• Live Preview — Real-time document preview that mirrors your PDF exactly
• Custom Branding — Upload your logo, pick accent colors, choose document styles
• Payment Milestones — Visual payment schedule with percentage breakdowns
• One-Click PDF Export — Print-ready, professional A4 documents
• Save & Load — Store up to 20 contracts in browser localStorage
• Dark / Light Mode — Beautiful in both themes
• 100% Client-Side — No backend, no account, no tracking

---

Getting Started

Option 1: Just Open It

# Clone the repo
git clone https://github.com/ICodingStack/ContractSpark.git
cd ContractSpark
# Open in browser (no build step required)
open index.html

Option 2: Local Server

# Using Python
python3 -m http.server 8080
# Using Node.js
npx serve .# Then visit
open http://localhost:8080

---

AI Smart Builder Setup

ContractSpark uses the Anthropic Claude API for AI-powered contract generation. Without an API key, it gracefully falls back to template-based generation.

To enable AI generation, the app calls https://api.anthropic.com/v1/messages directly from the browser. Note: for production use, you should proxy API calls through your own backend to protect your key.

---

Project Structure

contractspark/
├── index.html # Main app entry point
├── css/
│ └── style.css # All styles (dark theme, preview, forms)
├── js/
│ ├── main.js # Alpine.js app controller
│ ├── contract-data.js # Templates, clauses, data structures
│ ├── smart-builder.js # AI generation + local fallback
│ ├── preview-renderer.js # Live HTML preview rendering
│ ├── pdf-export.js # jsPDF-based PDF generation
│ └── utils.js # Shared helpers (dates, storage, colors)
├── assets/
│ └── icons/ # SVG icon assets
├── README.md
├── LICENSE
└── .gitignore

---

Tech Stack

Layer	Technology
UI Framework	Alpine.js v3
Styling	Tailwind CSS via CDN
PDF Generation	jsPDF + AutoTable
AI	Anthropic Claude API
Storage	Browser localStorage
Fonts	Cormorant Garamond + DM Sans + DM Mono

---

Customization

Adding a New Template

In js/contract-data.js, add a new entry to the CONTRACT_TEMPLATES array:

{id: 'my-template',name: 'My Contract Type',description: 'What this contract is for.',tags: ['Tag1','Tag2'],icon: `<svg>...</svg>`,meta: {type: 'my-template',title: 'My Contract Agreement'},getClauses: (data)=>[{id: 'clause-1',title: 'My Clause',enabled: true,content: `Clause content using ${data.partyA?.name} and ${data.scopeOfWork}...`},// more clauses...]}

Changing Default Colors

Edit the :root CSS variables in css/style.css:

:root {
--accent:#c9a96e; /* Main gold accent */
}

---

Browser Support

ContractSpark works in all modern browsers:

• Chrome / Edge 90+
• Firefox 88+
• Safari 14+
• Mobile Safari / Chrome for iOS/Android

---

License

MIT License — free for personal and commercial use. See LICENSE.

---

Contributing

Pull requests welcome! Please open an issue first to discuss major changes.

---

Made with love ❤️ by BlackBirdo