What to focus on
To make your contributions as effective as possible, focus on these areas:Good areas to contribute
Timeline functionality
Timeline UI improvements, track management, element manipulation
Project management
Project creation, loading, organization, and metadata
Performance
Optimizations, lazy loading, code splitting, rendering improvements
Bug fixes
Fixing issues in existing functionality
UI/UX improvements
Interface refinements, accessibility, responsive design
Documentation
Code comments, guides, examples, API documentation
Areas to avoid
Why? We’re planning a major refactor of the preview system. The current preview renders DOM elements (HTML), but we’re moving to a binary rendering approach similar to CapCut. This ensures:- Consistency between preview and export
- Better performance and quality
- More accurate representation of final output
Getting started
Before contributing, ensure you have your development environment set up.Development Setup
Follow the setup guide to get your local environment running
Contribution workflow
Open an issue
Before starting work, open an issue to discuss your proposed changes:
- Bug fixes: Describe the bug, steps to reproduce, and expected behavior
- Features: Explain the use case, benefits, and implementation approach
- Improvements: Detail what you want to improve and why
Test your changes
Ensure your changes work as expected:
- Test the functionality manually
- Run existing tests:
bun test - Add new tests if applicable
Commit your changes
Write clear, concise commit messages:Use conventional commit prefixes:
feat:- New featurefix:- Bug fiximprove:- Enhancement to existing featurerefactor:- Code refactoringdocs:- Documentation changestest:- Test additions or changeschore:- Build process or tooling changes
Push and create a pull request
Push your branch and create a pull request:On GitHub:
- Navigate to your fork
- Click “Compare & pull request”
- Fill out the pull request template completely
- Link any related issues
- Request review from maintainers
Code style
OpenCut uses Biome for code formatting and linting.Formatting rules
- Indent style: Tabs
- Line width: 80 characters
- Quote style: Double quotes
- Semicolons: Required
Running code quality tools
From theapps/web/ directory:
Code patterns
Use the actions system for user operations
Use the useEditor() hook in components
Follow directory conventions
lib/- Domain-specific logic (actions, commands, video processing)utils/- Generic helper functions that could work in any appservices/- External service integrationscomponents/- React components
Pull request guidelines
PR title format
Use conventional commit format:PR description
Fill out the pull request template completely:- Summary - Brief description of changes
- Motivation - Why are these changes needed?
- Changes - Detailed list of what changed
- Testing - How did you test these changes?
- Screenshots - For UI changes, include before/after screenshots
- Related issues - Link to related issues using
Closes #123orRelates to #456
PR checklist
Before submitting, ensure:- Code follows the style guidelines
- Code has been linted and formatted
- All tests pass
- New tests added for new functionality
- Documentation updated if needed
- PR description is complete
- Related issues are linked
- No merge conflicts
- CI/CD checks pass
Reporting bugs
When reporting bugs, include:- Clear title - Concise description of the issue
- Steps to reproduce - Detailed steps to reproduce the bug
- Expected behavior - What should happen
- Actual behavior - What actually happens
- Screenshots/videos - Visual evidence if applicable
- Environment - Browser, OS, version numbers
- Console errors - Any error messages from the browser console
Bug report template
Suggesting features
When suggesting features, explain:- Use case - What problem does this solve?
- Target users - Who benefits from this feature?
- Implementation approach - How might this be implemented?
- Alternatives - What other solutions exist?
- Additional context - Screenshots, mockups, examples from other tools
Community guidelines
- Be respectful and inclusive - Treat everyone with respect
- Be patient - Maintainers are volunteers with limited time
- Be constructive - Provide helpful feedback and suggestions
- Follow the Code of Conduct - Maintain a welcoming environment
- Help others - Answer questions and assist other contributors
Getting help
Need help contributing?- Discord - Join our Discord community
- GitHub Issues - Ask questions by opening an issue
- Documentation - Check the development guides
Recognition
Contributors are recognized in:- GitHub contributors page
- Release notes for significant contributions
- Project documentation
Next steps
Architecture
Learn about the system architecture
Testing
Understand the testing approach