Contact

Tools  /  Generators  /  Pricing Table Generator

GENERATORS

Pricing Table Generator

Build a pricing table — 2 to 4 editable tiers, a monthly / yearly billing toggle with a discount, a highlighted "most popular" plan, per-feature included / excluded / limited markers, and a theme — with a live preview and HTML + CSS + JS output, or React / Vue / Tailwind.

More Generators tools

Nano ID Generator Code Comment Generator License Generator Changelog Generator Git Commit Message Generator Git Branch Name Generator

What this tool does

It builds a pricing section — the cards, the styles, and the small JavaScript for the monthly / yearly switch — from a compact description of your tiers, and renders it live.

Defining tiers

One tier per line: Pro | 29 | /month | 10 projects; Priority support; -SSO; ~5 seats | Start trial. The fields are name, price, period, a semicolon list of features, and the button label. In a feature list, - marks it excluded (crossed out), ~ marks it limited (dimmed).

Billing toggle

Enable it and a Monthly / Yearly switch appears. Yearly prices are the monthly price minus the discount percentage, and the generated JS swaps the numbers and the /period label.

Highlight

Mark one tier as "most popular" — it gets a badge, the accent border and a slight scale.

Output

HTML + CSS + JS tabs, one combined file, or a React / Vue / Tailwind component.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

How do I mark a feature as not included?
Prefix it with a dash: "-Single sign-on". It renders crossed out with a × instead of a ✓. A tilde ("~5 team seats") marks it as limited and dims it.
How is the yearly price calculated?
monthlyPrice × 12 × (1 − discount/100), then divided by 12 for the displayed per-month figure — or shown as a total, depending on the period label you use.
Does the billing toggle need a framework?
No. It is ~15 lines of vanilla JS that reads data-monthly / data-yearly attributes and updates the text. It is included in the JS tab and the combined file.
Can I have just two tiers, or four?
Yes — put 2 to 4 lines in the tiers box. The grid adjusts automatically.
Is anything sent to a server?
No. The table is generated entirely in your browser.
Theme Accent