x-cloak - Hide Uninitialized in Alpine.js
From the Alpine.js cheat sheet · Advanced Features · verified Jul 2026
x-cloak - Hide Uninitialized
Prevent flash of unstyled content before Alpine loads
html
<!-- Add to your CSS -->
<style>
[x-cloak] {
display: none !important;
}
</style>
<!-- Use on Alpine components -->
<div x-data="{ message: 'Hello' }" x-cloak>
<p x-text="message"></p>
</div>✅ Prevents template syntax from showing before Alpine loads
💡 Add CSS rule [x-cloak] { display: none !important; }
🔍 Alpine removes x-cloak attribute when initialized
⚡ Essential for production to avoid flickering
x-cloakloadingfoucinitialization