SmallYa

SmallYa is a free, open-source alternative to services like Headliner, built to transform your audio into captivating videos effortlessly. With an intuitive drag-and-drop editor, anyone can create professional-looking audiograms with dynamic waveforms, text, and graphics. It's the perfect tool for podcasters, musicians, and creators looking to boost their social media presence without the complexity or cost of traditional video software.

English | 中文

✨ Why SmallYa?

Tired of using heavy, complex video software just to add a dynamic waveform to your podcast or audio clips?

SmallYa is designed to solve this problem. We provide a lightweight, focused, and efficient online editor that lets you:

• Create in Minutes: Forget complex timelines. Create audio visualization videos in minutes with an intuitive canvas.
• Cloud-Native: Built on Cloudflare, ensuring a smooth and fast experience for users worldwide.
• Fully Open-Source: Freely use, modify the code, or deploy it on your own servers.

🌟 Core Features

• Visual Audio Editor: Create stunning audio visualizations with a drag-and-drop canvas.
• AI-Powered Tools: Intelligent audio processing and content generation (planned).
• Multi-Format Support: Export to various video formats (MP4, WebM).
• Responsive Design: Works seamlessly across all devices.
• Cloud-Native Architecture: Built with modern cloud technologies for scalability.
• Customizable Templates: Pre-built templates for quick content creation.

🚀 Quick Start

Prerequisites

• Node.js 18.x or later
• pnpm package manager
• Cloudflare account (for deployment, not required for local use)

Installation

# Clone the repository
git clone https://github.com/your-username/smallya.git
cd smallya

# Install dependencies
pnpm install

Environment Setup

# API configuration
cd apps/api
cp .env.example .dev.vars
cp wrangler.toml.example wrangler.toml

Web Configuration

cd ../web
cp .env.example .env.local

Renderer Configuration

cd ../renderer
cp .env.example .env

Initialize Database:

# Return to project root
pnpm setup
# or
node scripts/init-db.js

Access Applications:

• Web Application: http://localhost:3000
• API Server: http://localhost:8787
• Renderer Service: http://localhost:8788

Development

# Start all services
pnpm dev

Troubleshooting

Port conflicts:

# Windows (automatic port cleanup)
pnpm dev

# Linux/Mac (manual port cleanup)
pnpm dev:linux

Database issues:

# Check if database is initialized
cd apps/api
pnpm db:check

# Reset database (delete and recreate)
pnpm db:reset

Environment variable issues:

• Ensure all required .env files are created from .example files
• Verify JWT_SECRET and NEXTAUTH_SECRET are set
• Check that wrangler.toml exists in apps/api/

Dependency issues:

# Clean and reinstall
pnpm clean
rm -rf node_modules
pnpm install

Production Build

# Build all applications
pnpm build

# Build individual applications
pnpm build:api
pnpm build:web

🏗️ Technical Architecture

SmallYa follows a modern monorepo architecture with these main components:

• Frontend (apps/web): Next.js 14, React, TypeScript, Tailwind CSS, Zustand, Fabric.js
• Backend (apps/api): Cloudflare Workers, Hono.js, Drizzle ORM, Cloudflare D1 & R2
• Renderer Service (apps/renderer): Fastify, Puppeteer, FFmpeg, AudioMotion-analyzer
• Shared Packages:
  • packages/shared-types: Shared TypeScript types across services.
  • packages/ui: Reusable UI components.

🗺️ Roadmap

We are excited about the future of SmallYa! Here are some features we are planning:

• AI Auto-Subtitles: Integrate speech recognition to auto-generate and align subtitles.
• More Visualization Templates: Provide a richer library of waveform styles and background templates.
• Team Collaboration: Support real-time collaboration on the same project.
• Plugin System: Allow the community to create and share their own visualization plugins.

We welcome your ideas and suggestions in the Issues!

📁 Project Structure

smallya/
├── apps/
│   ├── api/          # Cloudflare Workers API
│   ├── web/          # Next.js Web Application
│   └── renderer/     # Video Rendering Service
├── packages/
│   ├── shared-types/ # Shared TypeScript types
│   └── ui/           # Shared UI components
├── docs/             # Documentation
└── ...

🔧 Key Concepts

Projects

Projects in SmallYa consist of:

• Audio files stored in Cloudflare R2
• Canvas design configurations stored as JSON
• Video format settings (landscape, portrait, square)
• Rendering status and output URLs

Authentication

The application uses a dual-layer authentication system:

1. NextAuth.js handles user authentication on the frontend
2. Cloudflare Workers API uses JWT tokens for secure communication

File Storage

All files (audio, images, videos) are stored in Cloudflare R2 with pre-signed URLs for secure access.

Rendering Pipeline

1. Users create projects with audio files and canvas designs
2. Projects are exported to trigger rendering
3. Rendering service processes the project and generates videos
4. Completed videos are stored in R2 and made available to users

🤝 Contributing

We welcome contributions to SmallYa! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please read our Contributing Guidelines for more details.

🆘 Support

• Create an issue for bug reports or feature requests

🙏 Acknowledgments

• Thanks to all contributors who have helped shape SmallYa
• Special thanks to the open-source community for the amazing tools that make this project possible