A beautiful, minimal markdown editor backed by GitHub Gists. Write, share, and edit markdown documents with a clean interface and the power of GitHub's gist platform.
- 🎨 Clean Editor: Minimal, distraction-free writing experience
- 🔐 GitHub Integration: Save documents as GitHub Gists
- 🔗 Shareable URLs: Share docs at
fancygist.com/@username/gist-id - 📝 GitHub Flavored Markdown: Full support for tables, code blocks, task lists, and more
- 🎯 Syntax Highlighting: Beautiful code highlighting in previews
- 😀 Emoji Autocomplete: Type
:to search and insert emoji shortcodes - 🍴 Fork on Edit: Edit someone else's gist? It creates a fork automatically when you save it.
- ⌨️ Keyboard Shortcuts:
Ctrl/Cmd+Sto save,Ctrl/Cmd+Nfor new.
- Node.js 18+ installed
- A GitHub account
- GitHub OAuth App credentials
-
Clone the repository
git clone https://github.com/yourusername/fancygist.git cd fancygist -
Install dependencies
npm install
-
Create a GitHub OAuth App
- Go to https://github.com/settings/developers
- Click "New OAuth App"
- Fill in the details:
- Application name:
FancyGist(or your preferred name) - Homepage URL:
http://localhost:8888(for development) - Authorization callback URL:
http://localhost:8888/.netlify/functions/auth-callback
- Application name:
- Click "Register application"
- Copy the Client ID and generate a Client Secret
-
Configure environment variables
cp .env.example .env
Edit
.envand add your GitHub OAuth credentials:VITE_GITHUB_CLIENT_ID=your_client_id_here GITHUB_CLIENT_SECRET=your_client_secret_here -
Run the development server
npm run dev
Or with Netlify CLI for full API support:
npm install -g netlify-cli netlify dev
-
Open your browser Navigate to
http://localhost:8888(Netlify) orhttp://localhost:5173(Vite only)
- Anonymous Writing: Just start typing - no login required for editing
- Save to GitHub: Click "Login with GitHub" and then "Save" to store your document
- Share: After saving, copy the shareable link to send to others
- Edit Others' Gists: Click "Edit" on any shared gist, make changes, and save (creates a fork)
-
Install Netlify CLI
npm install -g netlify-cli
-
Login to Netlify
netlify login
-
Deploy
netlify deploy
For production:
netlify deploy --prod
-
Configure environment variables in Netlify dashboard:
- Go to Site settings → Environment variables
- Add:
VITE_GITHUB_CLIENT_IDGITHUB_CLIENT_SECRET
-
Update GitHub OAuth App
- Add production URLs to your GitHub OAuth App:
- Homepage URL:
https://your-site.netlify.app - Callback URL:
https://your-site.netlify.app/.netlify/functions/auth-callback
- Homepage URL:
- Add production URLs to your GitHub OAuth App:
- Push your code to GitHub
- Go to https://app.netlify.com
- Click "Add new site" → "Import an existing project"
- Connect your repository
- Netlify will auto-detect the settings from
netlify.toml - Add environment variables in site settings
- Deploy!
- Frontend: React + TypeScript + Vite
- Styling: TailwindCSS + @tailwindcss/typography
- Editor: CodeMirror 6
- Markdown: react-markdown + remark-gfm + rehype-highlight
- Routing: React Router
- Backend: Netlify Functions
- API: GitHub Gists API via Octokit
fancygist/
├── netlify/
│ └── functions/ # Netlify serverless functions
│ ├── auth-*.js # GitHub OAuth handlers
│ └── gist*.js # Gist CRUD operations
├── src/
│ ├── components/ # React components
│ ├── contexts/ # React contexts (Auth)
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── types/ # TypeScript types
│ └── utils/ # Utility functions
└── public/ # Static assets
Contributions are welcome:
- Make sure there's an Issue first
- Use tabs instead of spaces
- Follow existing code style
- If you're going to use AI, please review the generated code carefully before submitting, don't keep unnecessary comments, and use your brain.
- Inspired by Stashpad Docs and iA Writer
- Built with ❤️ using GitHub's amazing Gist API