Lottie Open Studio

An open-source web-based animation editor for creating and editing Lottie animations. Import SVGs, create keyframe animations, edit existing Lottie files, and export to JSON format.

🌐 Try it Online

Launch Lottie Open Studio - Try the live version directly in your browser!

🎨 Features

Current Status: 🚧 In Development (Milestone 8 Complete)

Lottie Open Studio is currently under active development.

✅ Working Features:

📁 SVG Import - Import and parse SVG files into layers
🎨 Layer Management - View, select, hide/show, and lock layers
⌛ Timeline Playback - Play/pause animations with 30 FPS playback engine
🎬 Multi-Property Animation - Animate position, scale, rotation, opacity, colors, and stroke width
⚡ Easing Functions - Linear, ease-in, ease-out, ease-in-out with visual feedback
🎨 Color Animation - Smooth RGB interpolation for fill and stroke colors
📊 Property Tracks - Expandable timeline tracks showing keyframes per property
💾 Lottie Export - Export animations as standard Lottie JSON format
🔄 Lottie Import - Import and edit existing Lottie JSON files with full round-trip support
📈 Custom Bezier Curves - Visual bezier curve editor for custom easing with draggable control points
👁️ Live Preview - Real-time canvas preview with smooth interpolated animations
🧪 Test Coverage - 440 tests passing with comprehensive TDD approach
🎬 Lottie Preview - Live preview with official lottie-web player (SVG/Canvas/HTML renderers)
🖥️ Comparison Mode - Side-by-side view of editor canvas vs Lottie preview
🔍 Fullscreen Preview - Immersive preview mode with keyboard shortcuts (F/ESC)
⚙️ Quality Settings - Preview at 0.5x, 1x, or 2x quality for performance testing
⚠️ Warning System - Automatic detection of performance and compatibility issues

🚧 In Progress:

💾 Project Save/Load - Persist projects to local storage with versioning
🎨 Advanced Features - Text layers, gradients, masks

See PLAN.web-editor.md for the complete development roadmap.

📦 Project Structure

This repository contains two complementary tools for working with Lottie animations:

1. Lottie Open Studio (Web Editor) - Main Project

A browser-based animation editor for creating and editing Lottie animations.

Location: web-editor/ Status: 🚧 80% Complete (8/10 milestones to MVP) Technology: React + TypeScript + Vite + Zustand Current Features: SVG import, multi-property animation, Lottie JSON import/export, custom bezier curves

2. Lottie to GIF Converter (CLI Tool)

✅ Production Ready - Convert Lottie JSON animations to animated GIF files.

Location: lottie-to-gif/ Status: ✅ Stable Documentation: lottie-to-gif/README.md

# Quick example
cd lottie-to-gif
npm install
npm run build
node bin/lottie-to-gif examples/bond_vector.json

🚀 Getting Started

Quick Start (Recommended)

The easiest way to get started is using our convenience scripts:

# Clone the repository
git clone https://github.com/marciogranzotto/lottie-tools.git
cd lottie-tools

# Setup (installs dependencies)
./setup.sh

# Run the development server
./run.sh

Then open http://localhost:5173 to try the editor!

Docker Setup (Alternative)

Run the project in a containerized environment:

# Clone the repository
git clone https://github.com/marciogranzotto/lottie-tools.git
cd lottie-tools

# Development mode (with hot-reload)
docker-compose up lottie-dev

# Production mode (optimized build with nginx)
docker-compose --profile production up lottie-prod

Development: http://localhost:5173 (hot-reload enabled) Production: http://localhost:8080 (optimized nginx build)

Manual Setup

If you prefer to run commands manually:

# Clone the repository
git clone https://github.com/marciogranzotto/lottie-tools.git
cd lottie-tools/web-editor

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Check test coverage
npm run coverage

CLI Converter (Available Now)

cd lottie-to-gif
npm install
npm run build

# Convert a Lottie animation to GIF
npx lottie-to-gif animation.json

See lottie-to-gif/README.md for full CLI documentation.

📋 Development Roadmap

MVP (v1.0) - Lottie Open Studio

Current Status: ✅ Milestone 8 Complete - Live preview with lottie-web player, comparison mode, and fullscreen support!

Post-MVP Features

Text layer support (v1.1)
Gradient support (v1.2)
Advanced features: path morphing, masks, expressions (v2.0+)

See PLAN.web-editor.md for detailed milestone breakdown.

🛠️ Technology Stack