$ show glyphr-studio/Glyphr-Studio-2
Glyphr Studio 2 is a fully functional, web-based font editor that runs entirely in the browser. It provides a complete workflow for designing typefaces: creating and editing glyphs via a canvas with Bézier path tools, managing kerning pairs and ligatures, building reusable component instances, and importing/exporting fonts in OTF, TTF, WOFF, WOFF2, and SVG font formats. The application is built as a single-page application using vanilla JavaScript (ES modules) with Vite as the build tool, and it relies on several external libraries: font-flux-js for binary font I/O, bezier-boolean for boolean path operations, and svg-to-bezier for SVG outline parsing. The architecture separates project data (a hierarchical model of glyphs, paths, points, components, and settings) from the UI layer, which is composed of custom web components (e.g., FancyButton, EditCanvas, DisplayCanvas) and a publish-subscribe event system for decoupled state updates. Key entry points include src/app/main.js (application bootstrap), src/project_editor/project_editor.js (central controller managing navigation, history, and selection), and src/formats_io/otf/font_export.js (binary font generation). The editor supports multi-project editing, undo/redo with IndexedDB persistence, and a variety of panels for attributes, layers, guides, and quality checks. The codebase demonstrates solid engineering practices with a clear data model, reusable UI components, and comprehensive unit tests for core data structures and import/export routines, though some areas (e.g., UI panels) have less test coverage.
The LLM identified 5 files worth highlighting for reuse:
Implements a lightweight publish-subscribe event system used throughout the application for decoupled communication between components. Supports subscribing to single topics, arrays of topics, or wildcard '*' for all events. Subscribers receive a callback with the topic and data. This pattern enables the UI panels, canvas, and navigator to react to data changes without tight coupling, and can be extracted and reused in any JavaScript application needing an event bus.
Provides a base class (GlyphElement) for all project data objects (Glyph, Path, PathPoint, ComponentInstance, etc.). It implements automatic caching of computed properties (e.g., bounding boxes) with cache invalidation on property changes via a `changed()` method that propagates up the parent chain. Also includes `save()` and `print()` methods for serialization. This pattern is reusable for any hierarchical data model where performance-sensitive derived data needs to be cached and invalidated efficiently.
Parses SVG path data (including all commands: M, L, C, Q, A, etc.) and converts them into the application's internal path representation (PathPoints with handles). Handles inherited transforms (translate, rotate, scale, skew, matrix) and nested `<g>` elements, `<use>` references, and shape elements (rect, circle, ellipse, polygon, polyline). The module is self-contained, well-tested with a large suite of SVG test files, and can be extracted for any project needing robust SVG path-to-Bézier conversion with transform support.
Implements an algorithm for offsetting polygon and general curve segments (Bézier) by a given distance. It uses least-squares fitting to approximate offset curves and handles both polygon and curve segments. This is a non-trivial geometric operation commonly needed in vector graphics applications (e.g., creating parallel paths, stroke outlines). The module is isolated and can be reused in any JavaScript project requiring curve offsetting.
A custom HTML element (`<fancy-button>`) that provides a styled button with icon, label, tooltip, and disabled state. It uses Shadow DOM for encapsulation, observes attributes for reactivity, and emits custom events. The component is self-contained with its own CSS and can be extracted and used in any web application as a reusable UI button with minimal dependencies.