Skip to content

Markdown Typing SVG

toolLast commit

Generator and cacheable API for customizable animated typing SVGs used in GitHub profiles, README files, and websites.

Open productSource
Role
Developer-tool design and full-stack engineering
Scope
Developer workflow, API surface, and deployment
Status
Publicly deployed
Markdown Typing SVG interface preview

Problem

Creating a customized typing animation for a README normally requires manual SVG/CSS editing and hosting the result.

Constraints

  1. C1

    Public embeds depend on deployment availability.

  2. C2

    Successful responses cache for 24 hours.

  3. C3

    There is no documented request-rate/abuse-control layer and SVG text must be safely escaped/validated.

Architecture

React visual editor and preset state; URL/query serialization with Zod validation; server SVG generator returning explicit image and cache headers.

01

Product interface

React visual editor and preset state.

02

Core service

URL/query serialization with Zod validation.

03

Persistence

Server SVG generator returning explicit image and cache headers.

Decisions

D1

Encode configuration in the URL

Encode configuration in the URL so results are shareable and stateless.

D2

Generate SVG on demand

Generate SVG on demand instead of persisting images, trading service availability for zero asset storage.

D3

Return an error SVG with HTTP 422 for invalid options

Return an error SVG with HTTP 422 for invalid options so image consumers still receive a diagnosable visual response.

Contribution

  • Built multi-line typography/animation controls and live preview.
  • Implemented Markdown/HTML/direct-URL output.
  • Added validated server-side SVG generation and escaping.
  • Configured cache headers and browser-local presets.

Outcomes

  • Users can compose animated text visually.
  • Embed it through Markdown, HTML, or an image URL.
  • Reproduce designs from query parameters.
  • Receive explicit validation behavior without stored generated files.

Product screenshot

Markdown Typing SVG interface preview
Markdown Typing SVG presents generator and cacheable API for customizable animated typing SVGs used in GitHub profiles, README files, and websites.

Verified stack

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • SVG
  • Zod
  • REST APIs
  • Radix UI

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.