ScribeSVG is a next-generation, high-performance, and visually stunning typing animation generator for GitHub profiles, repositories, and portfolios.

Built with Next.js, React, and TypeScript, and running entirely on Vercel Edge Functions, ScribeSVG generates lightweight, CSS-only animated SVGs in real-time. It requires zero JavaScript on the client rendering side, making it fully compatible with GitHub's image sandbox and Content Security Policies.

Explore Features • Deploy Instantly • API Docs • Contribute

Most profile widgets output static designs or struggle with browser compatibility. ScribeSVG is engineered with key differences:

• 🔒 Web Sandbox Font Inlining (Google Fonts): Browsers block external network requests inside <img> tags, which breaks custom Google Fonts in normal SVGs. ScribeSVG's Edge Engine fetches, parses, and inlines fonts as Base64-encoded Woff2 data URIs directly inside the SVG, ensuring your custom fonts render flawlessly for every visitor.
• 🎨 Custom Layout Mockups: Renders text standalone, inside a sleek macOS Terminal Window (complete with window controls), or inside a Glassmorphic Card with glowing borders.
• 🌈 Text Gradients: Native linear text gradients (SVG gradient mappings) with angle controls.
• 💡 Neon Glow Effects: Customize filter gaussian blurs to apply subtle glowing neon signs to the text and cursor.
• ⚡ Edge Powered (0ms Cold Starts): The rendering API is built on Vercel Edge Runtime. It compiles to V8 isolates, delivering response times under 50ms, with global CDN caching.
• 🧹 Short, Clean URLs: The builder only serializes non-default properties, keeping your Markdown clean and lightweight.

ScribeSVG comes with a local, fully interactive visual builder interface. Toggle styles, add text lines, try preset themes (like Dracula, Cyberpunk, or Tokyo Night), change preview backgrounds to match GitHub Dark/Light modes, and copy code in one click.

To run it locally:

npm run dev
# or
yarn dev

Open http://localhost:3000 to view the builder playground.

Host your own instance of ScribeSVG globally for free in less than 2 minutes.

Serve animations dynamically by appending parameters to the /api/render endpoint.

The render API accepts at most 10 non-empty lines, 200 Unicode code points per line, and 1000 code points in total. Longer lines values and request URLs over 8192 characters return 400. Unknown layout or cursor values also return 400. XML-invalid characters in rendered text are replaced.

Out-of-range numeric values are clamped: width to 100–2000, height to 40–1000, size to 12–120, speed and deleteSpeed to 10–1000 ms, and pause to 0–10000 ms.

Use layout=minimal-border for a rounded outline in the text color. It works with transparent backgrounds and keeps the text alignment unchanged.

https://your-domain.com/api/render?lines=Hello+World&layout=minimal-border&color=36bcf7&background=transparent&center=true

https://your-domain.com/api/render?lines=Fullstack+Engineer;Open+Source+Contributor&layout=terminal&theme=dracula&center=true

Contributions make the open-source community an amazing place to learn and create. Any contributions you make are greatly appreciated.

See CONTRIBUTING.md for local setup, project structure, and pull request guidance.

We encourage adding new beautiful themes. Simply open src/app/api/render/renderer.ts and add your custom preset to the THEMES object:

export const THEMES: Record<string, Partial<RenderOptions>> = {
  // Add your preset style details here
  mycooltheme: {
    color: '#ffffff',
    gradient: ['#color1', '#color2'],
    background: '#121212',
    cursorColor: '#color1',
    font: 'Outfit'
  }
}

Then, update the THEME_PRESETS list in src/app/page.tsx to render it in the builder UI!

If you find this widget useful, please consider starring the repository or supporting the project's development.

Sponsors will be displayed prominently on the live dashboard and interactive builder website.

Distributed under the MIT License. See LICENSE for more information.