Code Journey is React + TypeScript tool that lets you easily create multi-step code animations to enhance your technical presentations. The goal of this project is to break down a code snipper into multiple steps and animate those steps to visually highlight changes, additions, or refactorings in a progressive and engaging way.
💡 Project origin : When preparing technical slides, it can be tricky to clearly show how a piece of code evolves. Code Journey solves this by providing a dynamic, step-by-step preeiw that guides your audience through th journey of the code -- from the initial version to the final result.
- 🎨 Syntax highlighting powered by Highlight.js
- 🔄 Auto-play with Play/Pause controls
- ➕ Add and 🗑️ Remove code steps dynamically
- ✏️ Live editingof the code for each step
- 🌐 Language selection from a wide list supported by Monaco Editor
- Clone the repository :
git clone https://github.com/Pitchouneee/code-journey.git
cd code-journey- Install dependencies :
npm install- Start the development server :
npm run dev- Open your browser at
http://localhost:5173🌐
▶️ Play / Pause : Start or pause the step-by-step animation- ➕ Add Step : Create a new step with default code
- 🖊️ Edit : Click on a step to edit its code
- 🌐 Select language : Choose a category and a language to match your syntax highlighting
- ✅ Step-by-step animation
- ✅ Language selection and syntax highlighting
- ❌ Export animation output (coming soon: GIF, video, sequential images)
Contributions are welcome! Feel free to open issues or pull requests to :
- Add export options (GIF, video, image sequences) 📹
- Improve the UI and overall user experience ✨
- Expand support for new languages or themes 🛠️
This project is licensed under the MIT License.
Feel free to use, modify, and distribute it as you wish.