Calculator Widget Testing

Test and customize the calculator widgets, then copy the embed code for your application.

Widget Configuration

Calculator Type

Country

Show Navigation

Compact Mode

Hide Title & Description

Embed Code

import CalculatorWidget from '@/components/calculator-widget'

export default function MyComponent() {
  return (
    <div>
      <CalculatorWidget />
    </div>
  )
}

Live Preview

German Mortgage Calculator

The most comprehensive German mortgage calculator that shows whether investing into or buying a real estate object can be interesting from the financial perspective.

German Mortgage Calculator

Calculate your mortgage payments and rental income in Germany

Initial Interest Rate (10 years)

0%5%10%

Refinance Interest Rate (after 10 years)

0%5%10%

Net Monthly Payment

634 €

Net After Refinancing

310 €

Total Interest (Lifetime)

518.803 €

Purchase Price (€)

700.000 €

Own Funds/Down Payment (€)

120.000 €

Acquisition Costs (%)

10.0%

Notary, taxes, agent fees: 70.000 €

Building Share (%)

80%

Building value for depreciation: 560.000 € (from purchase price only)

Tilgung/Repayment Rate (%)

1.5%

Fixed Rate Period:

5 Years

10 Years

Property Appreciation

Annual Price Increase (%)

2.0%

Expected yearly property value increase

Rental Property Details

Apartment is rented

Monthly Rental Income (€)

2.000 €

Monthly Property Costs (€)

300 €

Annual Rent Increase (%)

3.0%

Expected yearly rent increase

Effective Tax Rate (%)

42%

Tax rate for rental income/deductions

Annual Depreciation Rate (%)

2.0%

Annual building depreciation (only if rent income > 0)

Annual Costs Increase (%)

2.0%

Expected yearly costs increase

Provided by calculare.me

Integration Instructions

React Applications

Import the CalculatorWidget component and use it in your React application. The component accepts props for customization.

Vanilla JavaScript

Include the widget script and use the CalculatorWidget.mount() method to attach widgets to DOM elements.

CDN Integration

Use the CDN link for quick integration without bundling. The widget will automatically initialize based on data attributes or global configuration.

Available Props

type: 'mortgage' | 'rent' | 'investment' (default: 'mortgage')
country: 'germany' | 'france' | 'usa' | 'italy' | 'uk' (default: 'germany') - Country-specific calculations and tax rules
showNavigation: boolean (default: false) - Show calculator type switcher
compact: boolean (default: false) - Minimal layout without headers/footers
hideTitle: boolean (default: false) - Hide title and description only, keep footer
theme: 'light' | 'dark' | 'auto' (default: 'auto')
className: string - Additional CSS classes
onCalculate: function - Callback when calculation is performed