A modern, responsive, and feature-rich text editor built with React and Vite. This application provides a seamless writing experience with robust local storage persistence, custom history management, and a beautiful UI.
- Real-time Auto-Save: Your work is automatically saved to your browser's local storage as you type (debounced to optimize performance).
- Custom Undo/Redo: Implemented using custom stack data structures for reliable history navigation.
- Dark & Light Mode: A sleek theme toggle for comfortable writing in any lighting condition.
- File Management:
- Create new files
- Open existing
.txtfiles from your device - Download/Export your work as a
.txtfile
- Live Statistics: Real-time word and character count tracking.
- Modern UI/UX: Features a premium glassmorphism design with animated background elements.
- React 19: UI Library
- Vite: Build Tool & Dev Server
- Vanilla CSS: Custom styling and animations
- Local Storage API: For data persistence without a backend
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository or download the source code.
- Navigate to the project directory:
cd auto-save-editor - Install dependencies:
npm install
Start the development server:
npm run devThe application will be available at https://autosaver-ip-project.netlify.app/.
To create a production build:
npm run buildYou can preview the built application locally with:
npm run previewsrc/components/: Contains UI components likeEditorandToolbar.src/hooks/: Custom React hooks, includinguseDebouncefor optimized auto-saving.src/utils/: Utility classes, such as theStackimplementation for undo/redo.src/index.css: Global styles, CSS variables, and animations.src/App.jsx: Main application container and state management.
This project is created for demonstration and educational purposes. Feel free to use and modify the code as needed.