DEV Community

Bilal Malik
Bilal Malik

Posted on

Glyphic: A Browser-Based Typography Design Tool

#webdev #javascript #productivity #opensource

Typography tools have always asked too much. An account here, a subscription there, a desktop app that takes 3 minutes to open. All you wanted was to write something and make it look good.Glyphic is a typography-first design workspace that runs entirely in your browser. Write content, style selected text, apply curated themes, adjust spacing, and export high-resolution images - no accounts, no uploads, no setup required. Everything stays on your device.

Try it live → | View on GitHub → (MIT licensed, open source)

Core Editing
Glyphic uses a live canvas preview that updates in real time as you type and format. The rich text toolbar applies formatting only to selected text, giving you precise control over individual words, lines, or paragraphs.

Supported formatting actions:

  • Bold, Italic, Underline, Strikethrough
  • Headings
  • Ordered and unordered lists
  • Case transforms - uppercase, lowercase, title case
  • Per-selection font sizing

Typography Controls
Fine-tune how your text sits on the canvas:

  • 20+ Google Fonts spanning serif, sans-serif, monospace, and handwriting
  • Line height, letter spacing, word spacing
  • Internal padding
  • Drop caps - Standard, Large, and Huge variants

Theme System
Glyphic ships with 25+ curated themes across a range of styles: serif editorial, sans-serif minimal, monospace terminal, vintage, code block, and more.

Every theme supports full color overrides:

  • Background color
  • Text color
  • Texture intensity

Creative Tools
Kaomoji Library - Insert expressive text emoticons at cursor position. (｡◕‿◕｡)
Decorative Elements - Add inline decorative characters: dividers, bullets, stars, hearts, arrows, notes.
Paper Texture - A slider from 0% (clean) to 100% (heavy grain and noise) adds a physical feel to the canvas without affecting export quality.

Viewports
Switch between preset canvas dimensions to design for different contexts:

  • Social media
  • Desktop
  • Mobile

Themes are applied, previewed, and overridden non-destructively. Export-time overrides are independent from the editor canvas - what you see while editing and what you export can be two completely different things.

Export
Glyphic supports PNG and SVG export directly from the browser. Export-time color overrides allow you to customize output independently from the editor.

  • PNG Export scales up to 4320 × 4320 - available at 2×, 3×, and 4× depending on the resolution you need.
  • SVG Export produces vector output that is print-ready and editable in Figma, Illustrator, Inkscape, and more.

Keyboard Shortcuts
Ctrl + B for Bold, Ctrl + I for Italic, Ctrl + Ufor Underline.

Architecture
Glyphic is structured around three primary layers:

User Input → Text Toolbar → Formatting Engine
    → Canvas Renderer → Theme System
        → Export Module → PNG / SVG Output
Enter fullscreen mode Exit fullscreen mode
  • Canvas Layer - Handles rendering, typography, textures, themes, and viewport dimensions.
  • Theme Layer - Manages theme presets, color overrides, random theme generation, and color state.
  • Export Layer - Powered by html-to-image. Handles PNG scaling, SVG generation, and export-time color overrides.

Component Reference
Canvas renders typography. TextToolbar handles formatting actions. Themes manages the theme gallery. ThemeColors powers the custom color picker. ViewPorts controls canvas dimensions. FontSelector and FontSize handle font selection and sizing. LineHeight and Padding manage spacing. DropCap applies editorial drop cap styling. KaomojiSelector handles kaomoji insertion. Decorations manages decorative elements. ExportOptions runs the export pipeline. Navbar handles global actions.

Run It Locally
Prerequisites: Node.js v18+ and npm.

bashgit clone https://github.com/byllzz/glyphic.git
cd glyphic
npm install
npm run dev        # Start dev server
npm run build      # Production build
npm run preview    # Preview production build locally
Enter fullscreen mode Exit fullscreen mode

No API keys. No environment variables. Everything runs locally.

Privacy
Glyphic is fully local-first:

  • No accounts required
  • No tracking or analytics
  • No content uploads
  • Exports generated entirely in your browser
  • Nothing leaves your device

Contributing
Contributions are welcome. The most useful areas:

  • Themes - Add or modify theme presets in src/data/themes.js
  • Fonts - Add or modify available fonts in src/data/fonts.js
  • Other areas - Accessibility, export (PDF support, batch exports), mobile touch refinements.

Workflow: Fork → feature branch → develop → commit with Conventional Commits → open a PR with screenshots for any UI changes.

If Glyphic saved you from opening Canva or firing up Figma for something simple, a ⭐ on GitHub means a lot.

glyphic preview
What feature would you want to see in Glyphic next? Drop it in the comments.

Top comments (0)