A personal code snippet manager to save, organize, and share pieces of code
Snippets is a web-based code snippet manager that lets you save, organize, tag, and retrieve pieces of code through an in-browser editor. Built for developers who want a fast, personal library for reusable code — without the overhead of a full note-taking app.
With Snippets you can:
- Save and edit code with full syntax highlighting via CodeMirror
- Organize snippets with tags, favorites, and trash
- Search across your entire snippet library instantly
- Share public snippets with a direct link
- Switch themes between Dracula, GitHub, and more
- Support 13+ languages — JavaScript, TypeScript, Python, Rust, Go, Java, SQL, and more
- Capture snippets as screenshots — Save and share your own or team snippets as images.
Screenshots
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router & Turbopack |
| React 19 | UI library |
| TypeScript | Type safety |
| Supabase | Auth & real-time database |
| CodeMirror | In-browser code editor |
| Zustand 5 | Lightweight state management |
| Vercel | Deployment & analytics |
| Phosphor Icons | Icon set |
Installation
- Clone the repository and install dependencies:
git clone git@github.com:vianch/snippets.git
cd snippets
yarn install- Set up environment variables:
cp .env.example .env.localFill in the required values:
| Variable | Description |
|---|---|
NEXT_PUBLIC_BASE_URL |
Your app's base URL |
NEXT_PUBLIC_SUPABASE_URL |
Supabase project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase anonymous key |
- Start the development server:
yarn devThe app will be available at http://localhost:3000.
| Script | Description |
|---|---|
yarn dev |
Start the development server |
yarn build |
Build for production |
yarn start |
Run the production build |
yarn lint |
Run all linters (ESLint + Stylelint + Prettier) |
yarn lint:code-style |
Run ESLint with auto-fix |
yarn lint:style |
Run Stylelint for CSS with auto-fix |
yarn lint:formatting |
Run Prettier with auto-write |
yarn init |
Reset project (removes node_modules & lock files, reinstalls) |
app/
├── components/ # React components (each in its own directory)
│ └── ui/ # Reusable UI primitives (Button, Input, Modal, etc.)
├── lib/
│ ├── supabase/ # Supabase client & database queries
│ ├── store/ # Zustand stores (menu, toast, viewport, user)
│ ├── constants/ # App constants (menu items, toast types, CodeMirror config)
│ ├── config/ # Language extension mappings
│ └── models/ # Value objects (Snippet factory)
├── utils/ # Pure utility functions
├── snippets/ # Main app route (protected)
├── login/ # Auth route
└── tools/ # Tools section
types/ # Global TypeScript declarations (.d.ts)
CSS, C++, Go, HTML, Java, JavaScript, JSON, Markdown, PHP, Python, Rust, SQL, and YAML.
This project is licensed under the MIT License.
Developed by vianch — info@vianch.com