Lilly; Sumi.css; Tegaki

Today’s three resources include a modal terminal editor written in V, a classless stylesheet to help dry some Pico tears, and a library that writes any font out by hand, one stroke at a time. Two of them share a Japanese naming thread (sumi is ink, tegaki is handwriting), which was a happy accident of the queue and not some clever editorial plan on my part.

NOTE: Tegaki’s repo carries CLAUDE.md, AGENTS.md, and a .claude/ directory, so it was built with AI help. Folks who prefer to skip such projects can jump over the last section.

Lilly

Lilly is a terminal text editor with Vim tendencies, written in V by Adam Stringer (tauraamui). The README pitches it as “basically Helix but for VIM motions.” The goal is a batteries-included editor with no plugin system, and eventually one-to-one parity with Vim’s motions, macros, and the rest.

The canonical home moved this year to Catkin, a Forgejo instance, and the GitHub repo is now a read-only mirror, and I heartily recommend ignoring the GH repo.

A new syntax layer for it dropped on October 15 in a single large PR. Each language is a KDL file of contexts with push, pop, and set transitions plus scope names. Anyone who has written a .sublime-syntax file will recognize the model. The build turns each grammar into a generated V lexer (lib/syntax/lexer_*.v), and the editor keeps a queryable syntax tree that also helps power code-folding ops. Thirteen grammars ship with it: C, CSS, Gleam, Go, HTML, JavaScript, Markdown, Perl, Python, Rust, TypeScript, V, and Zig (CSS literally arrived yesterday). The whole set is 777 lines of KDL, which makes adding a language a reasonable afternoon project.

The project’s CI is more serious than most hobby editors I’ve seen (and definitely more serious than any of mine save for {hrbrthemes}). It runs unit tests, visual regression against “golden” frame snapshots, and fuzzing of release binaries on every platform after publish.

I built it from source since I never played with V before. Lilly depends on two modules by the same author, bobatea (the TUI library) and kdlv (KDL for V). The result is a statically linked, 3.3 MB x86-64 binary.

v install
v run make.vsh build

Two things to know before you try the same:

1. Use the V commit CI pins. Lilly tracks V master closely and pins an exact compiler (V_REF in .forgejo/ci-image/Containerfile, built by .forgejo/ci-image/build-v.sh). V master as of this morning rejects syntax in the generated HTML lexer (“the condition of an if cannot start with a parenthesized if expression”) but the pinned commit built clean. The shell script’s comments explain the V/vc bootstrap skew in more detail than you’d ever want.
2. It’s very alpha. The tag is alpha-v1.0.4. The legacy editor core was removed on October 18, and you can check out the TODO.md to track the Vim parity gaps. Item one on that list is a data-loss bug flagged “do first” and marked deferred: yy and cc delete the line instead of yanking or changing it. For heavy Vim users, the register subsystem does not exist yet, p/P are not wired, :wq is missing, and writes do not preserve file permissions.

So, keep it far away from files you care about for now, but do keep an eye on it, since it has some pretty solid benchmarks against a few other editors you may use or have tried.

Sumi.css

Sumi.css (docs) is a classless-first CSS framework from Vladimir Carrer. You write semantic HTML, link one stylesheet, and have a polished page in no time flat. You can and should only reach for an additional class definition when you want something super specific. It is MIT licensed, has no JavaScript, and needs no build step. It adds a mere 6.7 KB to your page weight.

One design decision in Sumi that may go unappreciated is the specificity story. Sumi wraps its element styles in :where() (209 of them in the source), and :where() contributes zero specificity. A plain blockquote { … } in your customized stylesheet wins without the dreaded !important and without a selector arms race. Theming is 74 --s-* custom properties for color, type, spacing, radius, and shadow, and they work at any scope, so one <div style="--s-primary: …"> restyles just its buttons.

Dark mode (still my preference) follows the OS setting, and data-theme="dark" or "light" forces a mode on <html> or on any single element. The dark palette configurations are in two different CSS blocks (one for the media query, one for the attribute). Heed the README, as it warns that you must edit both. Other choices made by the framework give it a browser compatibility of Chrome/Edge 111, Firefox 121, and Safari 16.2 (primarily due to :where(), :has(), and color-mix()).

Pico CSS users will feel right at home. The markup conventions line up closely: <nav> with two <ul> groups, <article> as a card, role="group" and role="switch", aria-busy spinners, aria-invalid validation, data-tooltip, <details class="dropdown">, and <dialog> modals. I have not tested whether an existing Pico page swaps over cleanly, but the overlap makes it a short exercise left to an intrepid reader.

For a quick internal report page, a tool UI, or a one-off doc that should not look like 1996, it’s one <link> tag away.

The next section has a link to a live page I made for the Drop.

Tegaki

Tegaki (GH) is an MIT-licensed library that animates any font as handwriting, stroke by stroke, in natural stroke order. It draws on a canvas laid over real DOM text. That means the text stays selectable, copyable, and readable by screen readers, which is bonkers cool.

The usual trick for this is an SVG stroke-dashoffset animation. That traces the glyph outline, so the “pen” goes around each letter twice. Tegaki instead recovers the centerline of each stroke and its width. The generator docs lay out the default geometry pipeline, and it’s a nice bit of computational geometry:

1. opentype.js reads the outlines, and adaptive de Casteljau subdivision flattens the curves.
2. A conforming Delaunay triangulation fills each glyph’s ink.
3. The chordal axis of those triangles gives the stroke centerlines, and the chord lengths give the width.
4. Short spurs at corners and points are pruned, and an elliptic “nib” stamp paints the ink they covered.
5. At junctions, arms are paired so the pen runs straight through a crossing.
6. A width-aware Ramer-Douglas-Peucker pass simplifies the result.
7. Stroke order comes from the best-fit reference dataset: KanjiVG, Make Me a Hanzi, the Hershey fonts, Letterpaths, or composed Hangul. You can also draw your own references in the Studio.

(If I missed anything def let me know.)

The playback is also scriptable. The time prop takes seconds, a percentage, or 'css' to read a --tegaki-progress custom property, so a scroll-driven animation timeline can move the pen. A streaming mode continues from where the pen is as new text arrives, with a catchUp speed boost. Plugins can reshape, retime, or repaint strokes, and the built-in glow, wobble, gradient, and taper effects are plugins themselves.

Adapters exist for React, Svelte, Vue, Solid, Astro, Web Components, and vanilla JS, plus Remotion for video. For those of us who avoid build steps, the Web Component loads straight from esm.sh.

The section header is a screencap of this HTML example page which uses both Sumi and Tegaki.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• Bluesky via <https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy>

☮️