GitPad is a web app built with React, TypeScript, and Tailwind CSS. It provides a rich text editing experience with git like branching using TipTap.
- Rich text editing with TipTap
- Git like versioning and branching
- Responsive design with Tailwind CSS
- TypeScript support
- Node.js (>= 18.x)
- npm or yarn package manager
- Install dependencies:
npm i- Start the development server:
npm run dev- To host on the local network and test the application on other devices:
npm run host- Frontend Framework: React 18
- Type System: TypeScript
- Styling:
- Tailwind CSS
- tailwindcss-animate
- @tailwindcss/typography
- UI Components:
- Radix UI components
- Lucide React icons
- Editor: TipTap
- State Management: Jotai
- Build Tools: Vite
The project uses several modern development tools:
- ESLint for code linting
- TypeScript for type checking
- Vite for fast development and building
Bugs fixed, pending and observed during the development are tracked under /src/notes/bugtracker.md
The designs might not match the actual implementation. The designs are just rough ideas of how the UI should look like. They are made using figma.
Simple Editor UI with Light and Dark themes and a toolbar for basic text formatting
Version history browser which opens on clicking the history button on the bottom left of the editor
Alternative UI with a vertical history browser optimized for conserving vertical screen space