CSS Editor

A lightweight, standalone CSS editor for quickly testing and tweaking stylesheets — right in your browser.

👉 Live Demo · ⬇️ Download

---

✨ Features

Feature	Description
⚡ Live editing	CSS changes apply to the preview instantly — no reload needed
🔌 100 % offline	No server, no bundler, no Node.js. Just open index.html in your browser.
💾 Version control	Save, rename, and delete named CSS versions in localStorage
📂 File I/O	Load .css files from disk · Download your CSS anytime
🔖 Section jumps	Navigate large stylesheets via /* === Section Name === */ comments
👁️ HTML samples	Ten built-in templates covering typography, lists, tables, forms, cards, navigation, code, media, admonitions, and a full-page layout
🔄 Reset button	Restore the default stylesheet with one click
📱 Isolated preview	Preview runs in an <iframe> — your CSS never leaks into the editor UI
💾 Persistent storage	Your work is saved automatically to localStorage
⚙️ Zero dependencies	A single HTML file plus a few scripts. Easy to understand, easy to extend.
🎨 Easy customization	Add your own templates, color palettes, and snippets
🌗 Theme switching	Default CSS uses :root variables — swap light/dark theme via snippets

Screenshot

🚀 Quick Start

1. Download the latest release or clone the repo:

   git clone https://github.com/arakel2/css-editor.git

2. Use it — Open index.html in your browser and start editing.

Requirements: A modern browser (Firefox, Chrome, Edge, Safari).
Works offline – no server required.

Keyboard Shortcuts

Line Operations

Windows/Linux	Mac	Function
Ctrl+D	Command+D	Delete current line
Alt+Shift+Down	Command+Option+Down	Copy line down
Alt+Shift+Up	Command+Option+Up	Copy line up
Alt+Down	Option+Down	Move line down
Alt+Up	Option+Up	Move line up

Editor Font Size

Windows/Linux	Mac	Function
Ctrl+Alt++	Ctrl+Alt++	Increase Font-Size
Ctrl+Alt+-	Ctrl+Alt+-	Decrease Font-Size
Ctrl+Alt+R	Ctrl+Alt+R	Reset Font-Size

Multi-Cursor

Windows/Linux	Mac	Function
Ctrl+Alt+Up	Ctrl+Option+Up	Add cursor above
Ctrl+Alt+Down	Ctrl+Option+Down	Add cursor below
Ctrl+Alt+Right	Ctrl+Option+Right	Add next occurrence to multi-selection
Ctrl+Alt+Left	Ctrl+Option+Left	Add previous occurrence to multi-selection

Find & Replace

Windows/Linux	Mac	Function
Ctrl+F	Command+F	Find
Ctrl+H	Command+Option+F	Replace
Ctrl+G	Command+G	Find next
Ctrl+Shift+G	Command+Shift+G	Find previous

Undo / Redo / Toggle Comment

Windows/Linux	Mac	Function
Ctrl+Z	Command+Z	Undo
Ctrl+Y	Command+Y	Redo
Ctrl+/ or Ctrl+#	Command+/	Toggle comment

⚙️ Customization

Add Your Own Samples 📋

Create a new file in the samples/ folder:

// samples/sample11.js
window.CSS_SAMPLES = window.CSS_SAMPLES || [];
window.CSS_SAMPLES.push({
    name: 'My Custom Sample',
    html: `
        <h1>Hello World</h1>
        <p>Your HTML goes here.</p>
    `
});

Then add the script tag in index.html (before the app script):

<script src="samples/sample11.js"></script>

Add Your Own Images 🖼️

Place images in samples/images/ and reference them in your samples with relative paths, e.g. <img src="samples/images/img01.jpg">.

Use Your Own Default CSS 💻

Edit style.js to change the stylesheet that is loaded on first run or when clicking the 🔄 Reset button.
The CSS is stored as a string in window.cssContent.

Add Your Own Color Palettes 🎨

Create a new file in the palettes/ folder:

// palettes/brand-colors.js
window.CSS_PALETTES = window.CSS_PALETTES || [];
window.CSS_PALETTES.push({
    name: 'Brand Colors',
    colors: ['#ff6900', '#fcb900', '#00d084', '#0693e3', '#9b51e0']
});

Then add the script tag in index.html:

<script src="palettes/brand-colors.js"></script>

Each palette needs a name (shown as group label) and an array of colors (any valid CSS color string, e.g. hex, rgb, hsl).

Add Your Own Snippets 📝

Create a new file in the snippets/ folder:

// snippets/my-snippets.js
window.CSS_SNIPPETS = window.CSS_SNIPPETS || [];
window.CSS_SNIPPETS.push({
    name: 'My Snippets',
    items: [
        { label: '--brand',     value: 'var(--brand-color)' },
        { label: 'Flex center', value: 'display: flex;\n    align-items: center;' }
    ]
});

Then add the script tag in index.html:

<script src="snippets/my-snippets.js"></script>

Each item needs a label (button text) and a value (text inserted at cursor position). Use \n for line breaks in multi-line snippets.

🔗 Live Demo

The editor is hosted via GitHub Pages:

👉 https://arakel2.github.io/css-editor/

📚 Third-Party Libraries

This project includes ACE — a high-performance code editor for the web, developed by Ajax.org B.V.
ACE is licensed under the BSD License. See ace/LICENSE for details.

License

This project is licensed under the MIT License.
© 2026 by Andreas Keller (arakel2)