CSS Snippet Manager

A plugin for managing CSS snippets in Obsidian with an organized interface and metadata support.

1 Stars
GitHub
CSSAny theme
# CSS Snippet Manager

A plugin for managing CSS snippets in Obsidian with an organized interface and metadata support.

## What it does
<img width="1100" height="995" alt="Screenshot 2025-10-09 alle 20 01 25" src="https://github.com/user-attachments/assets/8831755b-f185-43fc-8920-5c3367c138eb" />

- **Two-panel interface** - Browse snippets on the left, edit on the right with CodeMirror
- **Metadata system** - Add name, description, author, version, and tags to snippets
- **Search and filters** - Find snippets by name, tags, status, or content
- **Template gallery** - Use or start from predefined templates
- **Conflict detection** - Find duplicate CSS selectors across snippets
- **Advanced editor** - Syntax highlighting, autocompletion, and CSS validation
<img width="1984" height="1244" alt="Screenshot 2025-10-09 alle 20 02 37" src="https://github.com/user-attachments/assets/6a4c0f18-9cb0-4274-abab-5bb43c4916aa" />

## Metadata
The metadata block is optional but helps organize snippets. Supported fields:
- `name` - Display name
- `description` - Brief description
- `author` - Creator name
- `version` - Version number
- `tags` - Comma-separated tags
<img width="504" height="852" alt="Screenshot 2025-10-09 alle 20 04 06" src="https://github.com/user-attachments/assets/82b280f5-0d0f-488f-94fb-1f358652906f" />

## Commands

| Command | Description |
|---------|-------------|
| `Open CSS Snippet Manager` | Open the main interface |
| `Create new snippet` | Create an empty snippet |
| `Open Template Gallery` | Browse available templates |
| `Reload all snippets` | Refresh snippets from filesystem |

--------
## 🚀 Installation
### Method 1: Using BRAT (Recommended for Testing & Easy Updates)
*   Install BRAT from the Community Plugins store in Obsidian
*   Open BRAT settings (Settings → BRAT)
*   Click "Add Beta plugin"
*   Enter this repository: https://github.com/coderrordan/Obsidian-CSS-Snippet-Manager
*   Select "Last Version" and then "Add Plugin" - BRAT will automatically install and enable it
*   Auto-updates: BRAT will automatically update the plugin when new versions are released
### Method 2: Manual Installation
*   Download the latest release
*   Extract the files to your vault's .obsidian/plugins/css-snippet-manager (new folder)
*   Restart Obsidian and enable the plugin in Settings → Community Plugins

## 🛠️ Contributing
Your ideas, bug reports, and pull requests are highly welcome! If you'd like to contribute, please feel free to fork the repository and submit a pull request.

## 📄 License
This project is licensed under the MIT License

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

1

Forks

0

License

0BSD

Last updated 6mo ago