An effortless video code diff-animation tool for visualizing code changes

Present your code like never before.

Features

• 💯 Free & open-source
• 🤩 diff animation (example)
• 🏗️ canvas-based video
• 🎬 preview player
• 🖼️ Export video to webm
• ✍️ in-browser code editor
• 🎨 Customizable
• 📷 capture screenshots
• 🌓 Dark mode

Use Cases

• Creating programming video tutorials (youtube, udemy..).
• Assisting tutors in explaining code solutions effectively.
• Student showcasing specific code snippets during presentation.
  ...

Developing

Clone the repository, then you can run it locally or in a docker container

locally

Tip

Install pnpm [npm i -g pnpm] if not already installed

1. Install the dependencies

   pnpm run install

2. Run the app locally

   pnpm run dev

Docker

1. Run in it a container

   docker-compose up

After running the app either locally or in docker, navigate to http://localhost:5173.

Tech Stack

• TypeScript : A statically typed superset of JavaScript, for better DX
• React : A library for building user interfaces using components
• Tailwind : A utility-first CSS framework for rapid web development
• Zustand : A lightweight state management library for React
• Framer-Motion : A production-ready animation library for React
• Shadcn : A set of pre-designed ui components, accessible. customizable.
• CodeMirror : A code editor component for the web.
• DiffJs : A text differencing implementation based on the O(ND)Algorithm.
• PrismJs : A syntax highlighting library for code blocks

Privacy

App is designed to be offline-first, meaning that it does not rely on any external servers or backdoors,

However, code motion utilizes Vercel Basic Analytics:
but only stores anonymized data, and does not use cookies more info

Contributing

• Found a bug? Report here.
• Feature missing? Request here.

Like Code Motion?

Don't forget to star the repository! ⭐️