Scribe is a feature-rich multilingual markdown editor that allows you to seamlessly transition between three distinct viewing modes, and use Pollinations.AI-powered image generation with content management features.
Try Scribe now without installation:
This app is designed for content creators, developers, and writers who need a flexible markdown editing environment. Whether you're drafting documentation, writing blog posts, and/or collaborating, Scribe provides a comprehensive list of tools you need, inlcuding public and private fields.
- Rich Text View: See your markdown rendered in real-time with beautiful formatting
- Markdown Source: Edit raw markdown with a comprehensive formatting toolbar
- Plain Text View: Edit, view, and proofread as clean, unformatted text
Create stunning featured images using AI. Simply describe what you want, and our integration with Pollinations.AI will generate the perfect image for your content in a second.
- Draft History: Automatically save your work and restore previous versions
- Content Sharing: Generate shareable links for your markdown content
- Authentication: Secure sign-in with email/password or Google OAuth
- Real-time Updates: See changes immediately across all viewing modes
- Comprehensive formatting toolbar with one-click markdown insertion
- Support for headings, lists, code blocks, tables, and more
- LLM icon insertion for AI model references
- GitHub-ready badges and status indicators
- Automatic table of contents generation
- Emoji picker integration
- Export to Markdown, HTML, or Plain Text
Toggle between light and dark themes to match your preference and reduce eye strain during long editing sessions.
Scribe is powered by modern web technologies and innovative services:
- React - UI framework for building interactive interfaces
- TypeScript - Type-safe JavaScript for reliable code
- Vite - Lightning-fast build tool and development server
- Tailwind CSS - Utility-first CSS framework for responsive design
- shadcn/ui - High-quality React components built with Radix UI
- Supabase - Backend-as-a-Service for authentication and database
Pollinations.AI AI-powered image generation
KendoReact Components Components for the editor toolbar
- Node.js (v18 or higher)
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/nadinev6/pollinations.git
cd pollinations/hacktoberfest-2025/Scribe- Navigate to the project directory:
cd scribe- Install dependencies:
npm install- Set up environment variables:
Create a
.envfile in the root directory with your Supabase credentials:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
- Start the development server:
npm run devThe app will be available at http://localhost:5173
npm run buildThe production-ready files will be in the dist directory.
- Switch between Rich Text, Markdown Source, and Plain Text views using the tabs
- Use the toolbar in Markdown Source mode for quick formatting
- Upload or generate featured images for your content
- Sign in to unlock draft history and sharing features
- Your work is automatically saved as you type
- Use the Share button to generate a public link to your content
- Access your draft history to restore previous versions
Scribe offers powerful export options for different platforms and use cases. All exports require authentication.
Download your content as individual files:
- Markdown (.md) - Export raw markdown with comments stripped and table of contents processed
- HTML (.html) - Export fully rendered HTML with embedded styles, ready to view in any browser
Create complete packages optimized for specific platforms:
Export for GitHub - Download a ZIP package containing:
README.md- Your content formatted for GitHub with automatic badges and GitHub-flavored markdownimages/folder - All embedded images organized and ready to commit- Relative image paths automatically updated to reference the local images folder
Export for Dev.to - Download a ZIP package containing:
article.md- Your content with Dev.to frontmatter (title, tags, cover image)images/folder - All embedded images organized for upload- Frontmatter automatically generated from your document's first heading
Quickly copy formatted markdown for direct pasting:
- GitHub README - Copies markdown formatted for GitHub with TOC and badges
- Dev.to Blog - Copies markdown formatted for Dev.to with appropriate syntax
All export options automatically process table of contents placeholders, strip private comments, and collect embedded images for platform packages.
Insert icons for popular AI models (ChatGPT, Claude, Gemini, etc.) directly into your markdown using the LLM Icons dropdown.
Access professional documentation tools:
- Insert status badges (build, coverage, license)
- Add table of contents with
{{TOC}} - Use GitHub-flavored markdown features
- Switch to the "Generate with AI" tab
- Describe the image you want to create
- Choose from multiple image variations
- Select the perfect image for your content
Scribe provides comprehensive multilingual support with a global language switcher and AI-powered proofreading.
A language selector is available in the main header (globe icon) with three options:
- English - For English content editing and proofreading
- 中文简体 (Simplified Chinese) - For Simplified Chinese content
- 中文繁體 (Traditional Chinese) - For Traditional Chinese content
The selected language:
- Persists across browser sessions
- Controls the default proofreading language
- Works seamlessly with Chinese IME input across all editing modes
The Flash Proofreader uses AI to correct and improve your content:
- Quick Proofread - Click "Proofread & Fix" to use your currently selected language
- Language-Specific - Click the dropdown arrow to select a specific proofreading variant (US English, UK English, Simplified Chinese, Traditional Chinese)
- Returns corrected text with explanations for all changes
- Works in Plain Text view for distraction-free editing
Configure these env vars in .env (Vite will expose them via import.meta.env):
VITE_GEMINI_API_URL- e.g.https://api.your-llm-provider.example/v1/proofreadVITE_GEMINI_API_KEY- bearer token for the API (if required)
Example request payload (JSON):
{ "model": "gemini-2.0-flash", "language": "zh-CN", "input": "待校对的中文文本", "features": { "spell": true, "grammar": true, "style": true } }
Example response schema:
{ "original": "...", "corrected": "...", "suggestions": [ { "range": [start, end], "suggestion": "替换文本", "explanation": "说明" } ] }
Keep API keys out of source control. Do not commit .env.
multi-view-scribe/
├── src/
│ ├── components/ # React components
│ ├── contexts/ # React context providers
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ ├── utils/ # Helper utilities
│ └── integrations/ # Third-party integrations
├── public/ # Static assets
├── supabase/ # Supabase migrations
└── package.json # Project dependencies
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Main Repository: https://github.com/nadinev6/scribe
- Live Demo: https://nadinev6.github.io/scribe
- Hacktoberfest Entry: pollinations/hacktoberfest-2025/Scribe
- Issues: https://github.com/nadinev6/scribe/issues
Made for Hacktoberfest 2025 🎃