Get Started
Usage
Learn how to use the Craft Quick Edit Craft CMS plugin.
After installing the Plugin you are already set up. But you can give your authors an even better experience by styling the Quick Edit button.
Custom Styling
You can personalize the button’s look and feel by adding your own custom styles. The following example will animate the Quick Edit button in if a user hovers over the left corner.
app.css
.craft-quick-edit {
position: fixed;
top: 0;
left: 0;
width: 1.5rem;
height: 1.5rem;
z-index: 1000;
a.craft-quick-edit_link {
position: fixed;
top: 0.5rem;
left: 0.5rem;
right: unset;
background-color: black;
color: white;
padding: 6px;
text-decoration: none;
border-radius: 3px;
transform: translateY(-100px);
transition-property: opacity, transform;
transition-duration: 300ms;
opacity: 0;
}
&:hover .craft-quick-edit_link {
transform: translateX(0);
opacity: 1;
}
}
CSP Compatibility
If your site uses Content Security Policy (CSP), you need to disable automatic injection and render the Quick Edit assets manually using Twig template tags. Set autoInject to false in your config or via the Control Panel.
Template Tags
{# Without nonce #}
{{ craft.quickEdit.render() }}
{# With nonce #}
{{ craft.quickEdit.render(nonce) }}
{# Full control - raw code without tags #}
<div class="craft-quick-edit"></div>
<script nonce="{{ nonce }}">{{ craft.quickEdit.js()|raw }}</script>
<style nonce="{{ nonce }}">{{ craft.quickEdit.css()|raw }}</style>
Caution
CSP nonces and static caching don't work together. The nonce gets cached but the CSP header doesn't. Choose one approach:
- Static caching + no CSP nonce →
{{ craft.quickEdit.render() }} - CSP nonce + no static caching →
{{ craft.quickEdit.render(nonce) }}