Funky Pixi Text Style Editor
A visual tool for designing MSDF text styles. Configure typography, colors, gradients, effects, and texture fills in real-time, then export your style as a JSON file.
Launch Style EditorOpens the live editor at editor.funky-pixi.com.
Features
Live PixiJS preview
Every change renders instantly on the canvas
Font loading
Load MSDF fonts (.json + .png atlas) with validation and a multi-font manager
Typography controls
Font size, alignment, letter spacing, leading, line height, word wrap, auto-scale, smoothing, kerning, and anchoring
Color & gradients
Solid color fill or linear/circular gradients with multi-stop editing and per-stop alpha
Effects
Stroke (width, smoothing, color), Drop Shadow (offset, blur, color, opacity), and Extrude (3D depth, steps, offset, color)
Fill texture
Fill glyphs with tiled/transformed PNG or JPG with UV scale/offset, rotation, mix, alpha, and blend modes
Performance config editor
Visually tune rendering quality vs. performance with device presets and a base config
MSDF Generator
Generate new MSDF fonts directly from .ttf files (desktop app only)
Import / Export
Save and reload complete styles as funky-pixi-text-compatible JSON
Reset controls
Per-property and per-panel reset back to defaults
How to Use
Load a font
Click Load Font and select the MSDF .json file, then click the yellow Load Bitmap (.png) button and select the matching PNG atlas.
Enter text
Type the content to preview (up to 500 characters; newlines supported).
Style it
Adjust Typography, Color, Effects, and Fill Texture in the collapsible panels on the left. Changes appear instantly in the preview canvas.
Tune performance
Open Settings → Performance Config to choose a device preset or fine-tune rendering quality.
Export
Click Export Style JSON to save your finished style for use in your app. Use Load Style JSON to reimport it later.
Tip: Generate your own MSDF fonts from .ttf files using the MSDF Generator in the desktop build.