This is a fully animated, dark-themed text editor built using React, TypeScript, and Framer Motion. It features an Undo/Redo system using Stacks, along with a live stack visualization.
✅ Rich Text Editor - Type and edit text seamlessly.
✅ Undo (Ctrl+Z) & Redo (Ctrl+Y) - Go back and forth through text changes.
✅ Live Stack Visualization - View the Undo/Redo stacks dynamically.
✅ Back to Top Button - Scroll stacks to the latest entry.
✅ Smooth Animations - Fully animated using Framer Motion.
✅ Dark Theme UI - Elegant and minimal UI for a great user experience.
✅ Auto-Scrolling Stacks - The latest stack entry stays in view.
- React (Framework for UI Development)
- TypeScript (Static Typing for better development experience)
- Framer Motion (For smooth animations)
- Tailwind CSS (For beautiful and responsive styling)
1️⃣ Typing Text - When the user types, the previous text is stored in the Undo Stack.
2️⃣ Undo Action - Moves the last state from Undo Stack to Redo Stack and restores the previous state.
3️⃣ Redo Action - Moves the last state from Redo Stack back to Undo Stack and applies it again.
4️⃣ Stack Visualization - Displays live updates of Undo & Redo Stacks.
5️⃣ Animations - The text editor, stack updates, and buttons are animated for a smooth user experience.
🔄 Undo: Ctrl + Z
🔄 Redo: Ctrl + Y
1️⃣ Clone the repository:
git clone https://github.com/divyanshmehta355/text-editor-undo-redo.git
cd text-editor-undo-redo2️⃣ Install dependencies:
yarn install # or npm install3️⃣ Run the development server:
yarn dev # or npm run devOpen http://localhost:5173 in your browser to see the app in action! 🚀
🔹 Support for Multi-line Editing
🔹 Markdown Parsing & Code Highlighting
🔹 Persistent State (LocalStorage Support)
🔹 More Animations & UI Improvements
We welcome contributions! Feel free to fork this repo, submit PRs, or suggest new features. 💡
This project is open-source and available under the MIT License.
🎉 Thank you for checking out this project! Happy coding! 🚀