A static letter tells you what a Malayalam character looks like. It does not tell you how to write it: where the pen lands, which way it travels, when it lifts. For a script as round and looping as Malayalam, that is most of what a learner needs to know.
Jayasree (ജയശ്രീ) is a JavaScript library that animates Malayalam as handwriting, stroke by stroke, and a demo application built on it for learning to write. Type a word, watch it being written. This series is the story of building it: the thinking, the dead ends, the bugs, and what comes next.
Where the idea came from
It all started with LinguAalayam, which I'll introduce in the next section. While building it, I kept looking for ways to make it more accessible, more open and more useful for learning, for people anywhere in the world.
The way we learned Malayalam, in school or just by speaking it at home, isn't how everyone gets to learn it today. I know several children in Kerala who don't even take Malayalam as a second language, and nobody has the time to sit down and teach them. For the diaspora, whether elsewhere in India or in other countries, it is harder still. But a little effort from the people who know the language, who have lived it and learned it, can go a long way towards keeping it alive.
So Jayasree is my small but honest effort in that direction. I also wanted to release it as open source, so that any edtech app can pull in the package and show the handwriting live, wherever they want to embed it, the same way I did in LinguAalayam as a handwriting tooltip.
LinguAalayam: the seed
LinguAalayam is an open-source Malayalam lexicology companion, a prospective "Leo.org for Malayalam" with a long way still to go. It is built around several dictionary corpora, Manglish search (powered by Varnam) and voice search. It began in April 2025, but the idea goes back much further.
The short version: a lot of significant community work is going into Malayalam, by wonderful people (do check out SMC), and the idea is to bring that work and more together into an educational platform for the future. It already has LLM and MCP support, but it is still growing and being cleaned up while it is live.
One of its features is handwriting tracing, and that feature is powered by Jayasree. The dependency runs one way only: Jayasree is a standalone library that knows nothing about LinguAalayam, and any website can drop it in the same way. LinguAalayam will get its own series later; here it is only the place where the need first showed up.
How this was built (up front)
I want to say this plainly at the start, because it shapes everything below.
- The handwriting is human, and it's mine. The strokes are drawn by hand over a ghost outline of the font. That data is the actual content of the project. No model drew a letter.
- The code was written by Claude. Every line of Python and JavaScript in Jayasree was generated by Claude (Anthropic's model, driven through Claude Code), working from my direction.
- The product decisions and the review were mine too. What to build, what "good" looks like, what to reject, and which trade-offs to take all came from me, through a lot of review: watching the animations, saying "that curve is not clean", sending things back. Several of the best moments in this series are me saying no. I also did a lot of hands-on research into smoothing, centering and geometry, which later parts get into, and it was one of the hardest parts of the whole project.
Where the series says "we", it means that collaboration. Where a decision is described as mine, it was.
Standing on other people's work
Nothing here started from nothing, and the honest way to start a project like this is to list what came before.
Hanzi Writer
The easiest way to describe Jayasree is by pointing at Hanzi Writer, a JavaScript library that animates the stroke order of Chinese characters. "Hanzi Writer, but for Malayalam" was the first one-line description of Jayasree, and it is still the shortest accurate one.
Manjari, and Santhosh Thottingal
Jayasree draws over the Manjari typeface, designed by Santhosh Thottingal and Swathanthra Malayalam Computing (SMC) and released under the SIL Open Font License. Manjari does two jobs here: it is the ghost the strokes are drawn over, and it is the shaper's source of truth for how a letter should look. Every outline in Jayasree's glyph-data.json is Manjari's.
mlmash: the one that came first
Santhosh Thottingal also built mlmash (source, live at learn.smc.org.in), a Malayalam writing-practice app using animated SVG strokes, around 2020. His write-up is the best description of how it works.
This is the part I most want to get right. mlmash is the closest prior art to Jayasree, it came first by several years, and it came from the same person whose typeface Jayasree traces over. The two projects approach the problem differently:
| mlmash | Jayasree | |
|---|---|---|
| Where the strokes come from | Stroke-order master SVGs that already exist inside the Manjari/Chilanka font sources | New strokes drawn by hand over Manjari's rendered outlines |
| Cleanup | Strokes are used as authored by the font designer, so they come out cleaner | Strokes are centred, smoothed and straightened algorithmically, but can still look slightly wavy or shaky, like real handwriting |
| Shape | An application for learning to write | A library you embed, plus a demo application you can use to learn to write |
Jayasree is not a derivative of mlmash and does not diminish it. The overlap is real, and it deserves to be named, not discovered later and left unsaid.
The plumbing
One more name, because the project would not exist without it: HarfBuzz, the text-shaping engine, used through the uharfbuzz Python bindings. Part 2 is about why it matters so much for Malayalam.
What the series covers
Each part stands on its own, and each is technical. The first five:
- Why Malayalam deserves a pen: this post.
- A letter is not a glyph: Unicode, clusters, chillus and what HarfBuzz really does to Malayalam text.
- Teaching a font to draw: the stroke recorder, the data model, and how hand-made data is kept safe.
- Making shaky strokes clean: four failed centering attempts, the one that worked, and a table of corner angles. We also admit up front that the result can still be slightly shaky or wavy, the way real handwriting is.
- Composing 2,000 clusters from 300: four real composition bugs, Hindi as the first test of the design, and the roadmap.
That is not the end of the series. More parts are coming, because I am still building: more languages are on the way, starting with Hindi, and each one teaches something new.
Try it
- Live demo: sachn1.github.io/jayasree
- npm:
jayasree - Source: github.com/sachn1/jayasree
Prefer GitHub?
You can also discuss this post on GitHub Discussions. A GitHub account is needed there, and nothing loads from GitHub until you click.