webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

Readability Score Gauge — Free Live Flesch Reading Ease Meter

Readability Score Gauge · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGData VisualizationDashboard UIGamesCSS Grid

Copy & paste

Source Code

<section class="rsg-wrap">
  <header class="rsg-head"><h1>Readability check</h1><p>Edit the text below — the gauge recalculates a real Flesch Reading Ease score as you type.</p></header>
  <div class="rsg-grid">
    <div class="rsg-gauge-col">
      <svg class="rsg-svg" viewBox="0 0 200 120" aria-hidden="true">
        <path class="rsg-track" d="M20 100 A80 80 0 0 1 180 100" />
        <path class="rsg-arc" id="rsgArc" d="M20 100 A80 80 0 0 1 180 100" />
      </svg>
      <div class="rsg-score" id="rsgScore">–</div>
      <div class="rsg-label" id="rsgLabel">Type to analyze</div>
      <div class="rsg-stats" id="rsgStats"></div>
    </div>
    <div class="rsg-text-col">
      <textarea class="rsg-textarea" id="rsgTextarea" spellcheck="false">Every city has one hour when it forgets to be loud. In this town it arrives just after six, when the shops dim their signs and the last bus sighs away from the corner stop. For a few minutes the street belongs to nobody in particular.</textarea>
      <div class="rsg-scale">
        <span class="rsg-dot rsg-dot--hard"></span> 0–29 very hard
        <span class="rsg-dot rsg-dot--mid"></span> 30–59 fairly hard
        <span class="rsg-dot rsg-dot--easy"></span> 60–100 easy
      </div>
    </div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real Flesch formula
The actual published equation, not a fake or hardcoded score.
Live recalculation
Updates on every keystroke via a single input listener.
Transparent breakdown
Shows word, sentence, and syllable counts behind the score.
Heuristic syllable counting
No dictionary dependency, works entirely client-side.
Color-banded arc
Green/amber/red bands map directly to score ranges.
Linear SVG mapping
Arc fill is a direct, single-formula read of the 0-100 score.
Divide-by-zero safe
Floors sentence and word counts so empty input never crashes.
Zero dependencies
Pure vanilla JS, no external API or library.

About this UI Snippet

Readability Score Gauge — A Live, Real Flesch Reading Ease Meter

Screenshot of the Readability Score Gauge snippet rendered live

Most "readability score" widgets either hardcode a fake number or hide the formula entirely. This snippet computes a genuine Flesch Reading Ease score from whatever text is typed into it, live, and shows every input the formula actually uses — word count, sentence count, syllable count, and the resulting average sentence length — so the score is legible, not a black box.

The real formula, not an approximation of one

The score comes from 206.835 - 1.015 * (words / sentences) - 84.6 * (syllables / words) — the same Flesch Reading Ease formula used by Microsoft Word's readability statistics, the Hemingway Editor, and most SEO content-scoring plugins. Higher scores mean easier text: 60–100 reads as plain English, 30–59 needs a more attentive reader, and below 30 is dense, technical writing. The formula rewards two things independently — shorter sentences and shorter (fewer-syllable) words — which is why a single long, polysyllabic sentence can drag the score down even in an otherwise simple paragraph.

Estimating syllables without a dictionary

There's no built-in browser API for counting English syllables, so countSyllables() uses a compact heuristic: it counts transitions into vowel groups, strips a silent trailing "e", and floors every word at one syllable. It won't get every irregular word exactly right, but across a real paragraph the small per-word errors average out, which is exactly the tradeoff lightweight readability tools make instead of shipping a full pronunciation dictionary.

Sentence and word counting, done carefully

Sentences are split on ., !, and ? and filtered for non-empty fragments, with a floor of one sentence so a fragment with no terminal punctuation doesn't divide by zero. Words are split on whitespace and filtered to those containing at least one letter, so stray punctuation or numbers alone don't inflate the count. Both counts are shown directly beneath the gauge, alongside the derived average words-per-sentence — the single number most responsible for a score swinging up or down.

The arc as a direct read of the score

The gauge is a single SVG semicircle path with a known, fixed length; the visible stroke-dashoffset is set to ARC_LENGTH * (1 - score / 100), so the filled portion of the arc is a direct, linear read of the 0–100 score — no separate mapping table to keep in sync. The arc's color and the label beneath the number both key off the same three score bands (via bandFor()), so a glance at color alone tells you which zone the text falls in.

Customizing it

Swap in a different readability formula (Gunning Fog, SMOG, Coleman-Liau) by replacing the one calculation inside analyze() — every other piece (the gauge arc, the band coloring, the stat breakdown) is formula-agnostic. Pair it with an SEO score meter for a fuller content-quality panel, or a circular char counter for a simpler companion stat.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA gauge and a pre-filled textarea render with a live score.
  2. 2
    Edit the textThe gauge, score, and stat breakdown recalculate on every keystroke.
  3. 3
    Try a long, dense sentenceWatch the score drop and the arc shrink toward the red band.
  4. 4
    Try short, plain sentencesThe score climbs back toward the green band.
  5. 5
    Read the stat lineSee exactly how many words, sentences, and syllables drove the score.
  6. 6
    Swap the formulaReplace the calculation in analyze() with a different readability metric.

Real-world uses

Common Use Cases

Blog and CMS editors
Show a live Flesch score alongside an SEO score meter, recalculated on every keystroke from the real published formula.
Email and newsletter tools
Flag copy that reads too densely before it is sent, with the word, sentence and syllable counts shown behind the score.
Documentation platforms
Encourage simpler phrasing in technical docs, using a client-side heuristic syllable counter with no dictionary dependency.
Marketing copy review
Check landing-page copy against a target reading level before launch, and see exactly which input moved the score.
Educational writing tools
Give students an objective, explainable measure of their writing, since the formula and every input are visible rather than hidden.

Got questions?

Frequently Asked Questions

It's the real, published Flesch Reading Ease formula — 206.835 minus 1.015 times the average words per sentence, minus 84.6 times the average syllables per word — the same formula built into Microsoft Word's readability statistics and used by tools like the Hemingway Editor. It is not a hardcoded or randomized number.

It uses a vowel-group heuristic (counting transitions into runs of vowels, adjusting for silent trailing "e") rather than a full pronunciation dictionary, so individual irregular words can be off by one syllable. Across a real paragraph those small errors tend to cancel out, which is the same tradeoff most lightweight, dependency-free readability tools make.

60-100 corresponds to text a general audience finds easy to read (short sentences, short words); 30-59 is fairly difficult, typical of more formal or technical writing; below 30 is very difficult, dense academic or legal-style prose. The gauge's color bands (green, amber, red) map directly to these three ranges.

The formula divides by both sentence count and word count, so a genuine zero in either denominator would produce Infinity or NaN. Flooring both at 1 keeps the calculation defined for edge cases like a single word with no terminal punctuation, without meaningfully distorting the score for any real paragraph of text.

Move analyze() and bandFor() into pure utility functions (they take a string and return plain data, with no DOM access), then call them from your framework's input-change handler or a debounced watcher, and bind the returned score/band to the arc's stroke-dashoffset and stroke color via state instead of direct DOM writes.