I Built a Free Browser-Based Urdu Writing and Design Platform

ANILA NAWAZ — Sat, 27 Jun 2026 16:45:27 +0000

I Built a Free Browser-Based Urdu Writing and Design Platform

iloveurdu.com

I want to tell you about a tool I built for Urdu writers, students, designers, and content creators. It's called I Love Urdu and it's live at iloveurdu.com. The whole thing runs in a browser, works on mobile and desktop, and has no watermarks or paid tiers. You don't even need to create an account to use most of it.

This post is a complete walkthrough of what it does and how it works. I'll cover both editor modes, the designer features, the standalone tools, and what you get as a guest versus a logged-in user.

Why I Built This

Urdu has around 230 million speakers. The dominant tool for Urdu typography in Pakistan for the last 30 years has been InPage, a desktop(now has mobile application as well) application that costs money, requires installation, and hasn't fundamentally changed in decades. If you're on a Mac, a phone, or a Chromebook, you're out of options for professional Urdu typesetting.

Beyond InPage, the other Urdu tools are mostly broken. Free online tools either render Nastaliq poorly (letters don't connect correctly, the calligraphic baseline collapses), slap watermarks on exports, or require a subscription to do anything useful.

iloveurdu.com is my attempt at fixing this. The platform is fully browser-based, uses proper Nastaliq font rendering, and exports clean files with no watermarks for free.

The Two Editor Modes

When you open the editor at iloveurdu.com/editor/guest, you pick between Simple Mode and Designer Mode. These are genuinely different tools serving different needs, not just a feature toggle.

Simple Mode (Word Processor Style)

Simple Mode is the fastest way to write Urdu. Think of it like a focused word processor optimized for Nastaliq typography.

You get a clean writing canvas with a toolbar for the essentials: font selection (Jameel Noori Nastaleeq, Noto Nastaliq Urdu, and others), font size, bold, italic, underline, text color, and text alignment. RTL alignment is default since Urdu reads right to left.

Input Methods

There are three ways to type in Simple Mode.

Roman Urdu (Phonetic): You type using your normal English QWERTY keyboard and the transliteration engine converts it to Urdu in real time. Type shukriya and you get شکریہ. This is built on a custom transliteration engine with a local dictionary, LRU cache, and a fallback pipeline for words it hasn't seen before. It's fast and handles common words well.

Standard Urdu Keyboard: A traditional Urdu keyboard layout for people who already know the standard key mapping.

English Mode: For when you need to mix in English words or numbers without the input switching back to Urdu.

Voice Typing

There's a microphone button in the toolbar. Click it, speak in Urdu, and the text transcribes directly into the editor using the browser's native Web Speech API. This runs locally on your device. No audio goes to any server.

Multipage Documents

Simple Mode supports multiple pages. You can build a full multi-page Urdu document entirely in the browser.

Local Autosave

For guest users, the editor saves to localStorage automatically. You can close the tab, come back later, and your content is still there. For logged-in users, saves go to the cloud.

Export

PNG or PDF based on your chosen dimensions. No watermarks, guest or logged in.

Note: Simple Mode does not include AI features. Those are available only in Designer Mode for logged-in users.

Designer Mode (Canvas-Based Layout Tool)

Designer Mode is a different beast. This is closer to a simplified Canva or Adobe Express, built specifically for Urdu typography and layouts.

There are two sub-modes inside Designer Mode: Word Mode and Canvas Mode.

Designer Mode > Word Mode

Word Mode gives you a page-based writing surface where you can change the page color, pick a page style (lined, boxed, dotted, or plain), and write freely. It feels more like a designed document than a plain text editor.

You can add images from a built-in image gallery, set an image as the document background, or upload your own image and toggle it as a background across all pages. Basic text styling (font, size, color, bold, italic, underline, alignments) is available here.

Designer Mode > Canvas Mode

Canvas Mode is the full design editor. This is where things get more interesting.

You start with a blank canvas at a specific pixel dimension or pick from a template.

Templates

There's a large categorized template library. Categories include:

Poetry cards
Urdu notes (blackboard style, golden notes, Urdu grammar panels)
Newspaper layouts
Certificates (academic, corporate, madrasa)
Posters (academy ads, gym ads, IT institute ads)
Islamic content (Jumuah cards, hadith cards, Ramadan cards)
Wedding invitations (Nikkah, Walima, Barat)
Educational materials

Each template is pre-sized for its use case. Wedding invitations are 400x750px, certificates are A4 landscape (842x595px), poetry cards are 500x500px or taller, newspaper layouts are 800x1200px. You pick a template and it loads into the canvas ready to edit.

Elements

You can add text boxes, shapes, emojis, and images from the gallery. Every element supports:

Free drag and reposition on the canvas
Resize
Rotate
Duplicate
Group with other elements
Multi-select by holding Shift and clicking

Element Styling

Text boxes support all the font and color options. Non-text elements like shapes and image boxes support border customization, corner rounding, background color, and opacity control.

Layer Management

Every element sits on its own layer. You can lock a layer so it doesn't accidentally move, hide it, or reorder layers by dragging them in the layers panel. Same layer model you'd find in Photoshop or Figma, just simpler.

File Import

You can upload images (JPG, PNG), TXT files, or DOCX files. If you upload a text or document file, its contents fill into the canvas pages, replacing whatever was there before.

Multipage Export

Canvas Mode supports multiple pages. When you export, all pages export together. For PDF, this means a proper multipage PDF document. For PNG, each page exports as a separate image.

AI Features (Logged-in Only)

The AI assistant in Canvas Mode includes:

Image to Text (OCR): upload an image with text and extract it
Mistake correction
Text improvement
Content generation

Guest users can see these options but can't use them.

Sharing (Logged-in Only)

Logged-in users can generate a shareable link for their design or document. Guest users can export files but can't generate share links.

Document History (Logged-in Only)

Every save is tracked and you can roll back to previous versions. Guest users get local autosave but no version history.

The Standalone Tools

Alongside the editor, there are three separate tools accessible from the main navigation. These don't require you to open the full editor.

Write Urdu on Photos

iloveurdu.com/write-urdu-on-photos

Upload any JPG or PNG (or choose from preset card backdrops), add a text box, type in Urdu using the phonetic keyboard or English mode, pick a Nastaliq font, set the color and size, drag the text where it looks right, and download a full-resolution PNG with no watermark.

There's a background band opacity slider that adds a semi-transparent strip behind the text for readability when the image background is busy. You can also rotate the text box for angled layouts.

Common use cases: poetry cards for Instagram, YouTube thumbnails with Urdu titles, WhatsApp status images, event graphics.

Urdu Voice Typing

iloveurdu.com/urdu-voice-typing

A standalone voice typing interface. Click the microphone, speak in Urdu, and the transcription renders in Nastaliq directly. All the same text styling tools are available. Export as PNG, PDF, or copy the text.

The transcription runs via the Web Speech API in the browser. No audio leaves your device. Supported in Chrome, Edge, and Safari. Not supported in Firefox.

Urdu Typing Test with Certificate

iloveurdu.com/urdu-typing-test

Take a 1-minute, 3-minute, or 5-minute timed Urdu typing test. The test uses the phonetic keyboard, displays a visual keyboard on screen that highlights each key as you press it, and shows live WPM and accuracy as you type.

WPM is calculated as (correct characters / 5) / minutes elapsed. Accuracy is (total keystrokes - mistakes) / total keystrokes. Backspace counts, so fixing a mistake helps your accuracy score.

When the timer ends, you enter your name and a certificate generates instantly. The certificate includes your name, WPM, accuracy, date, timestamp, and a unique verification ID with a QR code that anyone can scan to verify the certificate is real. Download as PNG or PDF.

Aimed at students applying for stenographer roles, data entry positions, and content writing jobs in Pakistan where verified Urdu typing speed is a requirement.

Guest Mode vs. Logged-In Mode

Here's a clear breakdown of what each access level gets you.

Guest mode:

Full Simple Editor with all writing tools
Full Designer Mode (Word Mode and Canvas Mode) with all design tools
All three input methods (Roman/Phonetic, Standard Urdu, English)
Voice typing
Multipage documents
File import (TXT, DOCX, images)
PNG and PDF export, no watermarks
Local autosave via localStorage
All three standalone tools (photos, voice typing, typing test)

Logged-in mode adds:

Cloud autosave and sync across devices
Full document and design history with version rollback
AI writing assistant (text generation, improvement, correction)
Image to Text OCR
Shareable design and document links

The free account has no paid tier above it. Everything listed under logged-in is free once you register.

Technical Notes for Developers

A few things that might be of interest:

Transliteration engine: The engine in Simple Mode uses a local dictionary of common Urdu words with an LRU cache for fast lookups, then falls back to cloud APIs for uncommon words. The candidate suggestion menu tracks RTL word boundaries correctly, which took a while to get right.

Canvas architecture: Designer Mode uses a hybrid positioning model. Text layers use a flow-based layout (document model), while design elements use absolute positioning with a layer system on top.

Export pipeline: Exports from Simple Mode use html2canvas with a Noto Nastaliq Urdu font pipeline. Getting the font metrics right for PDF export took significant debugging because Nastaliq has unusual line height and baseline behavior compared to Latin fonts.

Voice typing: Entirely client-side via the Web Speech API. No server component, no audio upload, no backend cost.

Certificate verification: The typing test certificate uses a QR code that encodes a unique verification ID. Scanning it hits a verification endpoint that confirms the certificate is genuine and unmodified.

Who It's For

The platform gets used by a few distinct groups:

Students who write Urdu assignments and need to format and print them properly. The lined and boxed page styles in Designer Mode's Word Mode are popular for this.

Poets and writers who make poetry cards for social media. The template library has pre-sized poetry card templates that match standard Instagram and Facebook dimensions.

Teachers who create printed Urdu handouts, notes layouts, and educational materials. The notes templates were added specifically for this use case.

Content creators who need YouTube thumbnails with Urdu text, or who want to dictate Urdu scripts via voice instead of typing.

Job seekers applying for roles that require verified Urdu typing speed. The typing test with downloadable, scannable certificate handles this.

Try It

Everything is at iloveurdu.com. No installation required. Open the editor as a guest and start typing.

If you're a developer working on anything related to Urdu NLP, RTL text rendering, or browser-based typography tools, I'd genuinely like to hear from you. There's a lot of interesting engineering in this space that doesn't get much attention outside of Arabic and Hebrew tooling communities.

Built by Anila Nawaz. iloveurdu.com is free to use.

DEV Community: ANILA NAWAZ

I Built a Free Browser-Based Urdu Writing and Design Platform

I Built a Free Browser-Based Urdu Writing and Design Platform

Why I Built This

The Two Editor Modes

Simple Mode (Word Processor Style)

Input Methods

Voice Typing

Multipage Documents

Local Autosave

Export

Designer Mode (Canvas-Based Layout Tool)

Designer Mode > Word Mode

Designer Mode > Canvas Mode

The Standalone Tools

Write Urdu on Photos

Urdu Voice Typing

Urdu Typing Test with Certificate

Guest Mode vs. Logged-In Mode

Technical Notes for Developers

Who It's For

Try It