{"id":31725061,"url":"https://github.com/dimillian/hyperdrafter","last_synced_at":"2026-03-14T07:07:34.714Z","repository":{"id":303984505,"uuid":"1016489477","full_name":"Dimillian/HyperDrafter","owner":"Dimillian","description":"Draft your medium and long form content at insane speed","archived":false,"fork":false,"pushed_at":"2025-07-26T07:15:00.000Z","size":153,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T22:55:42.964Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hyper-drafter.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dimillian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-09T05:08:30.000Z","updated_at":"2025-09-17T06:31:38.000Z","dependencies_parsed_at":"2025-07-10T20:33:11.785Z","dependency_job_id":"51540446-bf65-4afb-b187-ffdaa9f97703","html_url":"https://github.com/Dimillian/HyperDrafter","commit_stats":null,"previous_names":["dimillian/hyperdrafter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Dimillian/HyperDrafter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimillian%2FHyperDrafter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimillian%2FHyperDrafter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimillian%2FHyperDrafter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimillian%2FHyperDrafter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dimillian","download_url":"https://codeload.github.com/Dimillian/HyperDrafter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimillian%2FHyperDrafter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000741,"owners_count":26082933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-09T05:19:56.121Z","updated_at":"2025-10-09T05:19:57.437Z","avatar_url":"https://github.com/Dimillian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HyperDrafter 🚀\n\nA sophisticated AI-powered writing editor that provides intelligent feedback as you write. Built with a focus on seamless text editing and contextual AI assistance.\n\n## ✨ Key Features\n\n- **📝 Professional Editor**: TipTap-powered editor with typewriter font and elegant paper styling\n- **🤖 Intelligent AI Analysis**: Real-time feedback with category-based highlighting system using TipTap marks\n- **🎯 Contextual Highlights**: Seven feedback categories (expansion, structure, factual, logic, clarity, evidence, basic) with distinct colors\n- **📊 Smart Sidebar**: Compact paragraph indicators with smooth animations and expandable detailed feedback\n- **🔄 Document Context**: AI analyzes each paragraph within full document context for better suggestions\n- **⚡ Modern Architecture**: TipTap framework with custom extensions for paragraph-based AI analysis\n- **✨ Smooth Animations**: Polished transitions for paragraph selection and visual state changes\n\n## 🎨 Design Philosophy\n\nHyperDrafter follows the Hyper suite's cyberpunk design language:\n- **Typography**: Courier Prime typewriter font family\n- **Colors**: Category-based system (green=expansion, blue=structure, red=factual, orange=logic, purple=clarity, yellow=evidence, gray=basic)\n- **Themes**: Seamless dark/light mode with paper metaphor\n- **Interactions**: Smooth transitions with glass morphism effects\n\n## 🚀 Getting Started\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server  \nnpm run dev\n\n# Build for production\nnpm run build\n\n# Run type checking\nnpm run typecheck\n```\n\n## 🏗️ Architecture\n\n### Editor Core\n- **TipTap Framework**: Professional editor built on TipTap with custom extensions\n- **Paragraph-based Architecture**: Each paragraph maintains unique ID with independent AI analysis\n- **Real-time Feedback**: 1-second debounced analysis after typing stops\n- **TipTap Marks**: Advanced highlighting system using TipTap's mark system with overlap resolution\n- **Theme Management**: React context with localStorage persistence\n- **Smooth Animations**: CSS transitions for paragraph selection and state changes\n- **Clean Architecture**: Separation of concerns with dedicated hooks and services\n\n### AI Integration\n- **Service Layer**: Dedicated `analysisService` for AI operations with abort handling\n- **Two-stage Analysis**: Efficient span identification followed by detailed feedback\n- **Document Context**: Full document awareness for contextual paragraph analysis\n- **Category System**: Seven distinct feedback types with priority ordering\n- **Robust Parsing**: Handles AI responses with extra text and JSON formatting\n\n### State Management\n- **Custom Hooks**: Modular state management with `useEditorState`, `useAnalyzeParagraph`, and `useEditorHandlers`\n- **Service Pattern**: Separate services for analysis and highlight management\n- **Type Safety**: Full TypeScript coverage with proper interfaces\n- **Performance**: React.memo and useMemo optimizations throughout\n\n## 📁 Project Structure\n\n```\nHyperDrafter/\n├── components/\n│   ├── editor/          # Core editing components\n│   │   ├── Editor.tsx   # Main editor orchestration (117 lines)\n│   │   └── TipTapEditor.tsx # TipTap editor wrapper with React.memo\n│   ├── sidebar/         # AI feedback interface\n│   │   ├── Sidebar.tsx  # Main sidebar with paragraph indicators\n│   │   └── HighlightCard.tsx # Individual feedback cards\n│   └── ui/              # Shared UI components\n├── lib/\n│   ├── ai/              # AI integration layer\n│   │   ├── anthropic.ts # Anthropic API service\n│   │   └── prompts/     # AI prompts and templates\n│   └── tiptap/          # TipTap extensions\n│       └── extensions/  # Custom TipTap extensions\n│           ├── ParagraphWithId.ts # Paragraph node with unique IDs\n│           └── AIHighlight.ts     # AI highlight mark\n├── services/\n│   └── editor/          # Editor services\n│       ├── analysisService.ts  # AI analysis operations\n│       └── highlightService.ts # Highlight management\n├── types/\n│   └── editor.ts        # TypeScript interfaces (Paragraph, Highlight, etc.)\n├── contexts/            # React contexts (theme, etc.)\n└── hooks/               # Custom React hooks\n    ├── useAnalyzeParagraph.ts  # AI analysis logic\n    ├── useEditorState.ts       # Editor state management\n    ├── useEditorHandlers.ts    # Event handlers\n    └── useParagraphDebounce.ts # Debouncing logic\n```\n\n## 🎯 Current Status\n\nHyperDrafter has a **professional core** with:\n- ✅ TipTap-powered editor with custom extensions\n- ✅ Paragraph-based AI analysis maintaining workflow\n- ✅ Real-time AI analysis with TipTap marks for highlighting\n- ✅ Modern paper-like UI with smooth animations\n- ✅ Interactive sidebar with polished transitions\n- ✅ Document-context aware AI feedback\n- ✅ Preserved cursor positioning during paragraph selection\n- ✅ Clean architecture with separated concerns\n- ✅ Full TypeScript type safety\n- ✅ Performance optimizations with React.memo and useMemo\n- ✅ Service layer for AI and highlight management\n\n## 🔮 Next Steps\n\n- **Draft Management**: Auto-save and document persistence\n- **Export System**: Markdown, TXT, and HTML export\n- **TipTap Formatting**: Bold, italic, and text formatting extensions\n- **Enhanced Node Types**: Headings, lists, blockquotes using TipTap nodes\n- **Keyboard Navigation**: Streamlined highlight traversal\n\n## 🛠️ Tech Stack\n\n- **Framework**: Next.js 15 with App Router\n- **Language**: TypeScript 5.8+\n- **Editor**: TipTap 3.0+ with custom extensions\n- **Styling**: Tailwind CSS 3.4+ with custom design system\n- **UI**: React 19 with custom hooks and contexts\n- **AI**: Anthropic Claude integration with intelligent prompting\n- **Storage**: LocalStorage for settings and draft persistence\n\nPart of the **Hyper suite** maintaining consistent design and architecture patterns.\n\n## 📄 License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimillian%2Fhyperdrafter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimillian%2Fhyperdrafter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimillian%2Fhyperdrafter/lists"}