Embed a live engineering calculator

An embed is a small window onto a CivilKit Calcs sheet that sits on your own web page: the reader changes the inputs and the results recalculate on the spot, with the workings shown. You add it with one line of HTML. It is free, MIT licensed and has no tracking: the calculation runs in the reader's browser and nothing is sent to a server.

Pick a calculator Read the embedding guide

A live example

This is the simply supported beam template, embedded exactly as the snippet below embeds it. Drag the span slider or type a load.

The link at its top right, Open in CivilKit Calcs, opens the same sheet in the full app in a new tab, where the reader can edit it, save it and export a report.

How to add one

Copy the snippet of a calculator below into your page's HTML. That is all: no account, no key, no script of your own.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-simply-supported-beam" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="simply supported beam check: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Or let a small script place the frames and fit their height to the content: put a placeholder where each calculator goes and load the script once (about 3 KB, no dependencies).

<div data-civilkit-sample="template-simply-supported-beam" data-height="560" data-theme="auto"></div>
<script src="https://civilkit.io/calcs/embed.js" async></script>

Options

Add these to the address of the frame (or as data attributes of the placeholder):

theme=light, theme=dark or theme=auto (the default follows the reader's system setting).
mode=input (only the form), mode=results (only the workings) or mode=both (the default: the form beside or above the results).
hide=title leaves out the sheet's title.
embed=edit in place of embed=1 adds a small text editor under the results, for readers who want to change the sheet itself.

Sandboxing

The snippets carry sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox". It keeps the frame away from your page (no top navigation, no forms on your origin) while letting the sheet calculate and the Open in CivilKit Calcs link open a normal tab. The frame asks for no browser permissions (allow=""). Python blocks never run in an embed unless the address says allowpython=1, and even then the reader is asked first.

Talking to the frame

A page can set inputs and read results with postMessage. The frame answers only its own parent page and checks every value.

Send {type: 'civilkit-set', values: {L: 8}} to set inputs by name. A number must be finite and within the slider's range; a choice must be one of its options. Anything else is refused with {type: 'civilkit-error', errors: [...]}.
After each calculation the frame sends {type: 'civilkit-results', values: {name: {value, unit, text}}}.
It also sends {type: 'civilkit-ready', inputs: [...]} with the inputs and their ranges, and {type: 'civilkit-embed-height', height} whenever its height changes.

Check that a message comes from https://civilkit.io before you use it. The embedding guide has a complete example.

Calculators to embed

Each of these is a sheet from a calculator page. Its numbers are generic textbook calculations, not design-code checks.

simply supported beam check

Span, load, a section and a material from drop-downs, and a deflection limit from radio buttons; bending stress, deflection, both utilisations and a moment diagram follow as you change the form. About it: Simply supported beam.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-simply-supported-beam" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="simply supported beam check: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

retaining wall sliding and overturning

A cantilever retaining wall on level fill: dimensions, a backfill from radio buttons and a surcharge checkbox as inputs; earth thrust, factors of safety against overturning and sliding, and the bearing pressure under the base. About it: Retaining wall stability.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-retaining-wall-stability" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="retaining wall sliding and overturning: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

pad footing bearing pressure

A pad footing under a column load and moment: sizes, depth and a soil from a drop-down; eccentricity, the largest and smallest bearing pressure, uplift and the check against the allowable pressure. About it: Pad footing bearing pressure.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-pad-footing-bearing" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="pad footing bearing pressure: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

pipe flow, Darcy-Weisbach

Friction loss in a full pipe: flow rate, diameter, length, pipe material and water temperature as inputs; velocity, Reynolds number, friction factor, head loss, pump head and hydraulic power. About it: Pipe flow, Darcy-Weisbach.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-pipe-flow-darcy" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="pipe flow, Darcy-Weisbach: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

pump and pipeline operating point

A pump lifting water through a pipeline: pump size from radio buttons, pipe diameter from a drop-down, length, lift and an aged-pipe checkbox as inputs; the operating point, a table of flow against pump and pipeline head, and both curves plotted. About it: Pump operating point.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-pump-operating-point" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="pump and pipeline operating point: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

cantilever with a tip load

A cantilever with a point load at the free end: length, load, a rectangular section, a material and a deflection limit as inputs; moment, shear, stress, tip deflection and rotation and a moment diagram. About it: Cantilever beam.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-cantilever-tip-load" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="cantilever with a tip load: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

rectangular column slenderness

Slenderness and buckling of a solid rectangular column: size, length, end conditions and material as inputs; the slenderness class, the Euler or parabolic critical stress and the allowed load. About it: Column buckling.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=template-column-slenderness" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="rectangular column slenderness: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Beam deflection derived symbolically

The midspan deflection of a simply supported beam derived step by step with the Symbolic dialog (integrate, solve for the constants, substitute), typeset as LaTeX, then fed with numbers and checked against the derived curve. About it: Beam deflection formula, derived.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-beam-deflection-symbolic" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Beam deflection derived symbolically: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Bending moment along a beam (XY chart)

Moment and shear worked out at sixths of a span in a loop, drawn as an XY chart and as a plot of the sheet. About it: Moment and shear diagrams.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=diagram-moment-chart" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Bending moment along a beam (XY chart): CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Principal stresses

Principal stresses and directions of a plane and a 3D stress tensor from eigenvals and eigenvecs, checked with Mohr's circle. About it: Principal stresses.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-principal-stresses" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Principal stresses: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Principal axes of a section

Strong and weak axes of an unsymmetric section from eigenvals and eigenvecs, checked against the closed form. About it: Principal axes of a section.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-principal-axes" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Principal axes of a section: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Shear frame natural frequencies

Natural frequencies and mode shapes of a two storey shear frame from the generalized eigenvalue problem K φ = ω² M φ, eigenvals(K, M). About it: Shear frame frequencies.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-shear-frame-frequencies" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Shear frame natural frequencies: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Gable frame thrust: pinned or rigid ridge

Horizontal thrust of a symmetric pitched roof frame for a pinned ridge and a rigid ridge, with the common shortcut that overstates it. About it: Gable frame thrust.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-gable-frame-thrust" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Gable frame thrust: pinned or rigid ridge: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Concrete strength gain (timeline)

Strength of concrete at ages from 1 to 28 days from a strength gain formula, listed on a timeline and plotted. About it: Concrete strength gain.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=diagram-concrete-strength" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Concrete strength gain (timeline): CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Beam bending with real units

A simply supported beam: moment, section capacity and a utilisation check. Units are real, so a stress times a section modulus comes out in kN.m. About it: Export to Word, Excel and PDF.

<iframe src="https://civilkit.io/calcs/?embed=1&sample=sheet-beam-bending" width="100%" height="560" style="border:1px solid #ccc" loading="lazy" title="Beam bending with real units: CivilKit Calcs" allow="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>

Free, open and private

CivilKit Calcs is free and open source under the MIT licence, so you may embed it anywhere, commercial sites included. The embed sets no cookies, stores nothing, loads no analytics and sends nothing anywhere: the engine runs in the reader's browser. Every embed links back to the full app with Open in CivilKit Calcs. You can also host your own copy from the source on GitHub.