Rendly is a powerful code-first video creation tool that lets you create stunning videos using a simple DSL (Domain Specific Language). Write code, preview in real-time, and export professional videos.
- Features
- Getting Started
- How It Works
- DSL Reference
- Creating Multiple Scenes
- Example Projects
- Tech Stack
- Development
- Contributing
- License
- Contact
- Code-First Video Creation: Write simple DSL code to create professional videos
- Real-Time Preview: See your changes instantly in the preview panel
- Multiple Scenes: Create complex videos with multiple scenes
- Custom Animations: Add fade, slide, pop, and bounce animations
- Custom Fonts: Use any font family for your text
- Custom Colors: Set any color for text and backgrounds
- Video Export: Export your videos in WebM format
- Open Source: Free and open source under MIT license
- Node.js 18+
- npm or yarn
- Clone the repository
git clone https://github.com/mukundzha/rendly.git
cd rendly- Install dependencies
npm install
# or
yarn install- Start the development server
npm run dev- Open your browser
Navigate to http://localhost:3000
Rendly uses a simple DSL (Domain Specific Language) to define video scenes. Each scene consists of:
- TEXT: The content to display on screen
- FONT: The font family to use
- SIZE: The font size in pixels
- COLOR: The text color (hex or named color)
- BACKGROUND: The background color
- ANIMATION: The entrance animation
- DURATION: How long the scene lasts
TEXT "Hello World"
FONT Inter
SIZE 64
COLOR #FF4D00
BACKGROUND #FFFFFF
ANIMATION fade in
DURATION 1.5sTo create multiple scenes, separate each scene with 2 or more empty lines.
TEXT "Scene 1"
COLOR #FF4D00
ANIMATION fade in
DURATION 1.5s
TEXT "Scene 2"
COLOR #00AAFF
ANIMATION slide up
DURATION 2sEach scene can have its own:
- Text content or shape
- Font, size, and color
- Background color
- Animation type
- Duration
TEXT "Welcome"
FONT Inter
COLOR #1A1A1A
BACKGROUND #FFFFFF
ANIMATION fade in
DURATION 1.5sTEXT "Welcome to Rendly"
FONT Inter
SIZE 48
COLOR #FF4D00
BACKGROUND #FFFFFF
ANIMATION fade in
DURATION 2s
TEXT "Code-first video creation"
FONT Inter
SIZE 36
COLOR #1A1A1A
ANIMATION slide up
DURATION 1.5s
SHAPE circle
COLOR #00AFFF
ANIMATION pop
DURATION 1sTEXT "Your Brand"
FONT Poppins
SIZE 72
COLOR #FF4D00
BACKGROUND #000000
ANIMATION fade in
DURATION 2s
SHAPE rect
COLOR #FF4D00
ANIMATION bounce
DURATION 1s- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Deployment: Vercel
- License: MIT
rendly/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── editor/ # Code editor page
│ │ ├── dashboard/ # User dashboard
│ │ ├── examples/ # Example projects
│ │ └── page.tsx # Landing page
│ ├── components/ # React components
│ └── styles/ # Global styles
├── public/ # Static assets
├── package.json # Dependencies
└── README.md # This file
Contributions are welcome! Please read our contributing guidelines before submitting PRs.
- Fork the repository
- Create a feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Website: rendly-one.vercel.app
- GitHub: github.com/mukundzha/rendly
Made with ● for developers who love code-first tools.