calculatorCreator guide
How to build a calculator
The builder is drag-and-drop, but what you make with it is a real, publishable product: a calculator that looks and computes identically on its public page, inside the builder preview, and in every embed. This guide covers every block, the formula language, and the craft that separates a good calculator from a great one.
1. How 1calculator works
You assemble a calculator from blocks: inputs your visitors fill in, outputs that compute results from them, and content blocks that explain things in between. Inputs expose variables; outputs combine those variables in formulas. Everything recomputes live as visitors type.
When you publish, your calculator gets a public page in the library, a shareable link, and an embed you can drop into any website. Every save is an immutable version, so you can iterate safely and restore anything.
2. Build your first calculator
- Open the builder — it's a desktop tool, so grab a screen with some room — and sign in. Your work autosaves as a draft in the browser either way.
- Click (or drag) input blocks from the palette onto the canvas — say a Currency for a loan amount and a Percent for a rate. Give each a clear label and a short variable name (like
loan,rate). - Add a Primary Result and write its formula from your variables — e.g.
loan * rate / 100. The variable bank in the inspector inserts names so you never mistype them. - Set defaults that tell a story — the numbers a first-time visitor sees should be a realistic worked example, not zeros.
- Check Preview: that page is pixel-identical to what visitors will see, footer and all.
- Fill in Settings (title, summary, category), then Publish. You're live in the library.
3. Block reference
Inputs (13)
Each input exposes a variable your formulas can use. All of them format numbers, currencies and dates for the visitor's region automatically.
| Block | What it does | Tips |
|---|---|---|
| Currency | A money amount. Shows the region's currency symbol, grouped digits. | Set realistic min/max so sliders and combos stay sane. |
| Percent | A rate with a % affordance. | Remember it's the number — divide by 100 in formulas where needed. |
| Number | A plain numeric field with optional suffix and decimals. | The workhorse. Use a suffix ("years", "kg") instead of cramming units into labels. |
| Slider | A draggable value between min and max with a live bubble. | Best when the range matters more than a precise figure. |
| Range | Two handles, two variables (a low and a high). | Great for budget brackets and scenarios ("between X and Y"). |
| Stepper | A count with −/+ buttons. | Use for small whole numbers: people, rooms, items. |
| Select | A dropdown; each option maps a label to a numeric value. | Perfect for factor tables (material grade → coefficient). |
| Radio | Options laid out as pills — same idea as Select, all visible. | Use when there are ≤4 options; visibility beats a dropdown. |
| Checkbox | A yes/no that evaluates to 1 or 0. | Multiply by it to switch a term on/off: fee * insured. |
| Date | A date with a calendar picker, displayed in the region's format. | Differences between dates come out in days. |
| Unit Value | A number with a unit switcher (cm/in, kg/lb, MPa/ksi …). The variable is always in the base unit. | Lets one calculator serve metric and imperial visitors honestly. |
| List | Repeatable rows with up to 4 columns — visitors add as many rows as they need. Derived values (sum, count, custom folds) become variables; an optional per-row result shows beside each row. | Invoices, GPAs, bolt patterns. Author 2–3 example rows so the defaults compute. |
| Value Source | A hidden constant with a variable name — never shown as a field. | Pin assumptions here (tax rate, gravity) with a note, instead of magic numbers in formulas. |
Outputs (7)
Outputs recompute on every keystroke. Each can carry its own format (currency, percent, number, custom unit).
| Block | What it does | Tips |
|---|---|---|
| Primary Result | The big headline answer. One per calculator. | This is what gets shared, screenshotted and put on social cards — name it plainly. |
| Secondary Stat | A smaller labelled figure. | 2–4 stats around the primary tell the fuller story (total paid, total interest…). |
| Split Bar | Two expressions shown as a proportional A/B bar. | Principal vs interest, tax vs net — instant intuition. |
| Gauge | A dial between min and max with "good/bad" zone labels. | Use only when there's a meaningful healthy range (BMI, utilisation). |
| Bar Chart | Named parts as horizontal bars or vertical columns. | Columns for magnitude comparisons; bars for labelled breakdowns. |
| Line Chart | Sweeps one variable across a range and plots up to 4 series against it — visitors can hover, and click to pin a reading. | "Balance over time" turns a single answer into a story. Keep to ≤120 points (the engine caps it for you). |
| Table | Rows of label + expression pairs. | For the detail-hungry: the numbers behind the headline. |
Form & content (5)
| Block | What it does |
|---|---|
| Title | A section heading — group long forms into digestible chunks. |
| Information | A short explanatory paragraph. State assumptions here. |
| Button | A reset-to-defaults action or a link. |
| Image | A diagram or illustration (uploaded images are optimised automatically). |
| Divider | Visual breathing room between groups. |
4. Variables & formulas
Formulas are plain maths over your variable names — no code, no spreadsheet cell
references. loan * (rate/1200) / (1 - pow(1 + rate/1200, -years*12))
is a real mortgage payment formula written exactly as you'd say it.
The language
- Arithmetic:
+ − * / %(remainder) and^(power). - Comparisons:
== != < <= > >=— they evaluate to 1 (true) or 0 (false), so you can multiply by them. - Conditions:
if(condition, then, else)— e.g.if(income > 50000, 0.4, 0.2). Nest them for brackets. - Constant:
pi.
Functions
| Group | Functions | Example |
|---|---|---|
| Rounding | round(x, dp?) · floor · ceil · trunc · abs | ceil(area / coverage) — cans of paint |
| Limits | min(…) · max(…) · clamp(x, lo, hi) | clamp(score, 0, 100) |
| Aggregates | sum(…) · avg(…) | avg(q1, q2, q3, q4) |
| Powers & logs | pow(x, y) · sqrt · exp · ln · log10 | pow(1 + rate/100, years) — compounding |
| Trigonometry | sin cos tan asin acos atan atan2 (radians) · radians(deg) · degrees(rad) | tan(radians(pitch)) * run — roof rise |
| Lookup | interp(x, x1, y1, x2, y2, …) — piecewise-linear interpolation, clamped at the ends | Design curves, tax tables, growth charts |
Chaining outputs
Give an output a variable name and later outputs can use it — a "Monthly payment"
stat named payment lets "Total paid" simply be
payment * years * 12. The engine orders the maths for you and
rejects circular references before you can publish.
Lists
List columns bind variables that exist per row; you fold them into totals
with derived values (sum, count, or a custom expression that
can even reference earlier derived values). A per-row result — like a line total —
can use anything, including your outputs. Variable names must be unique across the
whole calculator: short, lowercase, underscores if needed.
5. Regions & formatting
Five independent axes control how your calculator reads: language, number format (1,000.5 vs 1.000,5), date format, currency, and time zone. You author defaults in Settings → Region & formatting (seeded from your own preferences); a signed-in visitor's own settings override per-axis, and anyone can adjust display options on the page. Currency is formatting — which symbol and grouping — not exchange-rate conversion, so your maths never changes under a visitor's feet.
Labels can be written per-language (English + German today) — every block's label, help text and options accept both.
6. Settings that matter
- Title & summary — how you're found. Write the title the way people search ("Concrete Slab Calculator", not "SlabCalc 3000") and a summary that answers what it computes and for whom in two lines.
- Category — pick the most specific one that fits; it drives browsing, related calculators, and your page's breadcrumb.
- FAQ — 3–5 real questions with straight answers. They render on your page and as structured data for search engines.
- Scenarios — capture the current canvas inputs as a named preset ("First-time buyer", "A36 steel"). They appear as one-tap chips on your page, and every chip is a shareable URL.
- Embed theme — accent, result colour, text colour, light/dark, with a live preview.
- Toggles — comments on/off, allow cloning, show the formula in "How it works".
- Visibility — public (in the library), unlisted (link-only), or private.
7. Publish, share & embed
- Versions — every save is an immutable version with history and restore. Publishing pins the live version; embeds update the moment you re-publish.
- Share — the Share action mints a branded
1cal.coshort link. If the inputs differ from your defaults, the link reopens that exact scenario, and the social preview card shows the computed answer. - Deep links — every input state is a URL:
?loan=400000&rate=5.5prefills and computes. Anything you can link, you can share. - Embed — copy the iframe from your page's result card. Embeds are style-isolated, themeable, and carry a "Built with 1calculator" badge that links back to your calculator.
- Popular scenarios — well-used calculators can earn additional landing pages for the scenarios people care about, answer included. This is aggregate and anonymous: no individual visitor's numbers are ever stored or shown.
8. Best practices
- Defaults tell a story. A first glance should show a realistic, finished example — a $350,000 loan at 5.5%, not zeros and NaN.
- Label like a human. "Loan amount", not "P". Put units in suffixes, assumptions in help text or an Information block.
- One headline. Exactly one Primary Result; let stats and charts carry the nuance around it.
- Name variables for reading. Formulas are documentation:
deposit / pricebeatsd / p. - Bound your inputs. Sensible min/max keeps sliders useful and nonsense out of results.
- Show your work. Leave "show formula" on — the page explains your maths with the visitor's live numbers, and transparency earns trust (and the verified rosette review looks at exactly this).
- Add scenarios. Two to four presets make the calculator instantly explorable — and every chip is a link people share.
- Write the FAQ you'd want. It answers real questions on-page and helps search engines understand the topic.
- Add German metadata if you can. A translated title and summary puts you in front of the German-language library too.
- Watch your dashboard. Runs, favourites and accuracy feedback land there — a "doesn't look right" report includes the exact inputs, a ready-made test case.