Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including with all npm packages installed. Try it out:

var webglMsdf = require("")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors. v0.1.15

Multi-channel SDF font rendering & basic text layout for WebGL

npm version npm downloads Twitter Follow

This project is part of the monorepo.


Multi-channel SDF font rendering & basic text layout for WebGL. This is a support package for

This package provides multi-channel SDF font rendering capabilities for, incl. optional support for basic text alignment, vertex colors (e.g. for multi-color text), and shader options to draw outlines for each character. Furthermore, the key GLSL functions are provided as shader snippets to embed this functionality in custom shaders without having to resort to copy & paste.

There're different versions of MSDF font generators. The format supported by this module is based on Don McCurdy's.


STABLE - used in production


yarn add

Package sizes (gzipped): ESM: 1.5KB / CJS: 1.5KB / UMD: 1.6KB


Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:



Live demo | Source


Generated API docs



Karsten Schmidt


© 2019 - 2020 Karsten Schmidt // Apache Software License 2.0

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free