Save CSS changes on any website

Keep your CSS edits after you reload or come back another day. Screen Ruler remembers the rules you changed on each site and restores them the next time you activate it there.

What it does

Normally, CSS you change in the browser disappears the moment you reload. With Screen Ruler, the rule edits you make in the live CSS editor are saved automatically for that site. Activate Screen Ruler on the same site later, even after restarting the browser, and your edits are applied again, with a short note confirming how many were restored.

There is no save button. Edits are written shortly after you stop typing, and once more when you leave the page, so an edit made just before closing the tab is not lost.

How it works

1. Start Screen Ruler with Alt + Shift + S (Option + Shift + S on a Mac) and click Edit in the control bar.
2. Edit rules in the CSS tab, or add new ones with Add Rule.
3. Reload the page or come back later, and activate Screen Ruler again. Your edits are restored and listed in the Changes tab, where each one can still be copied or reverted on its own.

What gets saved

• Saved: edits to the page's stylesheet rules, including declarations, edited selectors and rules inside media queries, plus rules you added yourself.
• Not saved: inline edits to a single element made from Effective Styles, class edits, HTML structure edits and text edits. Those depend on a specific element on a specific page load and cannot be matched reliably after a reload.

Edits are stored per site, by origin, so https://example.com keeps its own set and every page on that site shares it. A rule edit is replayed wherever the same stylesheet rule shows up. Local files opened from your computer are kept per file instead.

Built to survive a changing site

• Edits find their rule again. Each edit remembers the stylesheet, its original selector and its at-rule wrappers, so it lands on the same rule after a reload even if you renamed the selector.
• Nothing is thrown away when the CSS changes. If a site ships new CSS and a saved edit cannot find its rule this time, Screen Ruler keeps it in storage rather than deleting it, so it can apply again if the rule comes back.
• Multiple tabs do not overwrite each other. A tab that only restored edits, without making new ones, does not rewrite the saved set when you close it.
• Reverting cleans up. Revert a change in the Changes tab and it is removed from the saved set too. Clear all changes and the site's saved entry is deleted.

Privacy and limits

• Saved edits are stored locally in your browser's extension storage. They are not uploaded anywhere and are never applied for other visitors.
• Edits are only applied when you activate Screen Ruler on the site. Browsing the site normally shows the original page.
• To remove saved edits for every site at once, open Screen Ruler's options and use Clear in the Saved edits row.
• Saved edits are not a way to publish changes. When you are happy with them, copy the CSS from the Changes tab into the site's code.

When it is useful

• Design work across sessions. Refine a page over several days without starting from zero each time.
• Checking a fix across pages. Edit a shared rule once and see it applied on every page of the site that uses it.
• Surviving reloads during development. Keep your experiments when a hot reload or navigation refreshes the page.

Looking for other tools to change pages live? See the best Chrome extensions for editing live web pages.

Save Edits per Site is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

Can I save CSS changes made in the browser?

Yes. With Screen Ruler, rule edits made in the CSS editor are saved automatically per site and restored the next time you activate Screen Ruler there. Chrome DevTools only keeps changes if you set up Workspaces to map the site to local files.

Will other people see my saved edits?

No. Saved edits are stored in your own browser and only applied in your tab when Screen Ruler is active. The website itself does not change.

Why did some of my edits not come back?

Only stylesheet rule edits and rules you added are saved. Class, HTML, text and single-element inline edits reset on reload. A saved rule edit also needs its rule to exist on the page: if the site changed its CSS, the edit is kept in storage until the rule appears again.

How do I delete saved edits?

Revert them in the Changes tab to remove them for the current site, or open Screen Ruler's options and click Clear under Saved edits to remove them for every site.