GraFx Studio is a multichannel smart template editor for animated and print output, built by CHILI publish. I contributed to its core features as part of a collaborative engineering team.
1. Studio Engine (Flutter Web)
Built on-top of Flutter, the Editor Engine is a closed-source application loaded in a browser that provides interactive editing of Studio documents. These documents are defined in JSON.
- Multi-Frame Transformation: Built a system for selecting, transforming, and manipulating multiple elements simultaneously, improving workflow efficiency
- Shape Rendering: Developed a shape renderer (rectangles, ellipses, polygons) with precise corner radius control and consistent cross-format output
- Data Integration Framework: Implemented external data source integration with performance-oriented caching
- Performance Optimization: Enhanced frame manipulation to support smooth 60FPS interactions in complex templates
- Animation System: Created a GSAP-based HTML animations output with type-safe APIs and declarative JS code generation
2. Studio SDK (TypeScript)
A type-safe controller-based SDK with promise-based APIs and cross-origin support for document manipulation.
- Implemented various features exposed from the Engine as per the product roadmap
Engineering practices:
- Maintained code quality with unit, widget, golden and integration tests
- Estimated features, wrote specs, and contributed to roadmap planning
- Improved CI/CD pipelines and build systems
- Participated in agile development rituals
