Obsidian Stats logoObsidian Stats

CSS Snippet Designer

by jeffjberry
5
4
3
2
1
Score: 50/100
Install Code

Description

Design CSS snippets visually for Obsidian: typography, colors, shadows and UI elements.

Reviews

No reviews yet.

Stats

2
stars
21
downloads
0
forks
2
days
1
days
1
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
17
commits

Latest Version

1.0.2
2 days ago

Changelog

Fixed

  • Restored the preset color palettes, which were blank because the swatch styles were only loaded in the injected panel stylesheet.

Removed

  • Removed the Nord Frost, Warm Dark, and Solarized Light presets.
See all version on GitHub

README file from

Github

CSS Snippet Designer

CSS Snippet Designer interface

A visual styling studio for Obsidian. Tune typography, colors, shadows, backgrounds and UI elements with live controls, then save the result as a standard CSS snippet.

Desktop only — requires Obsidian 1.7.2 or newer.

CI License Latest release

Features

  • Live preview across both Reading View and Live Preview
  • Generates plain CSS in real time, ready to copy and share
  • Curated presets and procedural background patterns
  • Shadows, glows and animations, with reduced-motion support
  • Fenced output that preserves your own CSS between saves
  • Built-in structural CSS validation before anything is written

The designer

The CSS Snippet Designer panel — the Typography tab

Switch between Presets, Typography, Colors, UI Elements, and Shadows & Outlines; every control updates the live preview and the generated snippet in real time.

Live CSS generation

The generated CSS pane with a Copy Code button

Every control change updates the Obsidian UI instantly and writes the matching plain CSS in real time. The live snippet appears in a code pane with a Copy Code button, so you can copy and share your CSS just like any other snippet.

Installation

Copy main.js, manifest.json, and styles.css into .obsidian/plugins/css-snippet-designer/ inside your vault, then reload Obsidian and enable CSS Snippet Designer under Settings → Community plugins.

Development

npm install
npm run dev
npm run check
npm run build

dev runs esbuild in watch mode, check runs typecheck, lint, tests, and a smoke load, and build produces the production bundle.

Pure TypeScript with no runtime dependencies. All CSS is produced by pure generator functions and validated before it reaches disk. The suite covers 288 tests running on Node's built-in test runner.

AI disclosure

This plugin was developed with the assistance of AI coding tools. All code is reviewed, tested, and maintained by Jeffrey Berry. AI can make mistakes — if you find one, please Open an issue. This is my first app, and I'm still learning — thank you for your patience and feedback.

Privacy

This plugin runs entirely offline: it makes no network requests and collects no telemetry. It writes to the system clipboard only when you click Copy Code.

License

MIT. Bundled fonts and their licenses are listed in THIRD-PARTY-NOTICES.md.

Sponsors