HarfCanvas

A browser-based design tool for Arabic calligraphy.

Compose Arabic text on a canvas, flow it along a curve or pour it into a shape, adjust individual letters and diacritics by hand, and export to PNG, JPEG, SVG or PDF.

Text is shaped with real HarfBuzz compiled to WebAssembly — the same engine your browser and operating system use — not a JavaScript approximation. Letters connect, contextual forms are chosen by the font's own rules, and ligatures fuse where the font says they should.

What it does

Typesetting

• Arabic text shaped by HarfBuzz, rendered from real font outlines via opentype.js onto a Konva canvas
• 22 bundled faces across Naskh, Thuluth, Kufi, Diwani, Ruq'ah, Nastaliq, Maghribi and more, plus uploading your own .ttf/.otf
• Start by typing a word and seeing it in every face; switch fonts from a one-click strip in the editor
• Five block types: plain text, text on a curve, text poured into an SVG silhouette, mirror blocks (reflection or radial repetition of another block, live-linked to it), and guides
• An on-screen Arabic keyboard, plus one-tap insertion of harakat, honorific symbols and Urdu/Farsi letters

Letter-level control — the part that makes it a calligraphy tool rather than a text box

• Stretch individual strokes. A letter's straight strokes are detected automatically from its own outline; drag the handle along one to lengthen it, in half-nuqta steps (Alt for free amounts) — the rhombic dot a reed nib makes, the unit traditional Arabic calligraphy actually measures in. Coverage varies by font and letterform; not every stroke offers a handle.

• Next Shape. Click a letter to step through the alternate shapes its font contains — looped, tailed, swash and justification forms — with labelled thumbnails in the sidebar — or tick one of the font's named style sets to restyle every matching letter at once.

• Kashida. Insert real elongation (U+0640) at any legal join in a run — the connecting stroke is drawn at the letters' own weight, not a deformed outline — or hit Fit to width and let it solve the counts automatically to span a target.

• Per-mark diacritic control. Move, resize or hide any single tashkeel mark without touching the text underneath, on plain text and Shape Fill blocks alike.

Composition

• Muthanna and radial mirrors. Reflect or repeat any block — a mirrored pair or an N-copy medallion — staying live as the source is edited.
• A font picker that shows your own text in every bundled and uploaded style at once, grouped by genre.
• Mirrors and medallions. Reflect a block into a muthanna pair, or turn copies of its text into a medallion spaced to the size it actually draws.
• Gradient fills (including gold/silver/copper/lapis metallic presets) and generated paper textures for the page.
• An artboard: preset or custom page sizes, margins, and exports cropped to exact pixel dimensions regardless of where blocks sit.
• Multi-select, grouping, alignment and distribution
• Snapping to other blocks' edges and centres, to ruler guides, and to a grid, with equal-spacing hints
• Undo/redo with a visual history you can jump back into
• Starter templates with a fill-in-the-blanks wizard
• Export presets, clipboard copy, and export-all-formats in one pass
• Named projects saved locally, and optionally synced to a Supabase account

Running it

npm install
npm run dev

Then open the URL Vite prints (usually http://localhost:5173).

npm run build    # production build
npm test         # test suite
npm run lint

Node 20+ recommended. No API keys or services are required — cloud sync is optional and the app runs fully offline without it.

Optional: cloud sync

Named projects are stored in your browser by default. To also sync them to an account, set

VITE_SUPABASE_URL=...
VITE_SUPABASE_ANON_KEY=...

and apply the migration in supabase/migrations/. Without these the cloud UI is hidden entirely and nothing else changes. Sign-in is email magic-link only.

Fonts and licensing

Please read this before redistributing anything from public/fonts/.

The bundled fonts come from several sources under several licences, and every one of them has been modified — a set of ten honorific symbols (ﷺ and similar) was merged into each file so those glyphs render regardless of which face is selected. A modified font is not the upstream font, and some licences constrain what you may then do with it.

One case is documented in full as the worked example: HarfCanvasDiwani.ttf is a modified version of Layla Diwani (OFL, Mohammed Isam), renamed as the OFL requires because the upstream reserves its name. Its licence and a note on what changed sit beside it in public/fonts/HarfCanvasDiwani-OFL.txt.

The provenance of the remaining faces is not fully documented in this repository. If you intend to redistribute this project or its fonts, verify each file's licence yourself first. scripts/FONTS.md describes the tooling and the obligations that come with modifying a font.

Licence

The source code is MIT licensed — see LICENSE.

That grant covers the code only. It explicitly does not cover the font files in public/fonts/, which are third-party typefaces under their own terms, as set out in the scope note at the bottom of the licence file and in the section above.

Project documentation

• CLAUDE.md — the engineering guide: architecture, the reasoning behind each subsystem, and the traps. Long, and worth reading before changing rendering or shaping code.
• PROGRESS.md — what shipped when, what is known-broken, and what is deliberately not built yet.
• docs/superpowers/specs/ — design documents for individual features.
• scripts/FONTS.md — adding and measuring fonts.

Status

Actively developed, pre-1.0, and honest about its edges — see PROGRESS.md for current limitations. Built with React 19, TypeScript, Vite, Konva, harfbuzzjs and opentype.js.