x-cloak Directive

Hide elements until Alpine is ready – prevents flash of unstyled content.

What is x-cloak?

x-cloak is a directive used to hide elements until Alpine has finished initializing. It prevents the flash of unrendered templates (like {​{ mustache }} expressions) before Alpine starts.

When to Use

Always add x-cloak to the root element of your Alpine components, especially if you are using the CDN and the script is deferred. It ensures a smooth, professional user experience.

Setup

<!-- In your CSS -->
<style>[x-cloak] { display: none !important; }</style>

<div x-data="{ show: true }" x-cloak>
  <span x-show="show">This text won't flash</span>
</div>

As soon as Alpine boots up, it removes the x-cloak attribute, making the component visible.