Description: Prevent Flash of Unstyled/Uninitialized Content (FOUC) by using x-cloak to hide elements until Alpine.js has finished initializing them. This is particularly useful for elements whose initial visibility or content is managed by Alpine directives like x-show, x-if, or x-text.
x-cloak attribute:
This is a special directive you add directly to HTML elements. Alpine.js monitors for this attribute. Once Alpine initializes an element (and its children) that has x-cloak, it automatically removes the attribute. Its sole purpose is to mark elements that should be hidden by CSS *before* Alpine takes control.
CSS rule [x-cloak] { display: none !important; }:
This CSS rule is the other half of the solution and is essential for x-cloak to work. You must include this rule in your stylesheet (e.g., in a <style> tag in the <head>, or in your main CSS file).
How it works:
[x-cloak] targets any HTML element that currently possesses the x-cloak attribute.display: none !important; hides these elements. The !important declaration is crucial here; it helps ensure this rule overrides other display properties that might inadvertently make the element visible before Alpine is ready.x-cloak attribute. As soon as the attribute is gone, the CSS rule [x-cloak] { display: none !important; } no longer applies to that element. At this point, Alpine's own logic (like x-show, x-if, etc.) takes over determining the element's visibility.You typically include this CSS rule globally so it applies to all x-cloak instances:
[x-cloak] { display: none !important; }The CSS rule [x-cloak] { display: none !important; } is absolutely necessary and must be loaded early.
Simply adding the x-cloak attribute to your HTML elements is not enough. Alpine.js only *removes* the attribute after initialization. The actual hiding of the element *before* Alpine initializes it is performed by this CSS rule. If you forget to include this CSS, or if it loads too late, x-cloak will have no effect, and you'll likely still experience FOUC.
It's best practice to include this rule in the <head> of your HTML document or at the very top of your primary CSS file to ensure it's applied as early as possible during page rendering.
x-cloak is for hiding elements during Alpine's own initialization, not for general loading states from API calls (though it can be combined).
The primary purpose of x-cloak is to manage the initial paint of elements that Alpine will control, preventing them from appearing in an unstyled or uninitialized state *before Alpine itself runs*. It's about the very brief period between the HTML parsing and Alpine's first pass.
It is not a general-purpose solution for managing visibility during longer asynchronous operations like fetching data from a server. For those scenarios (e.g., showing a "Loading..." spinner while waiting for API data), you would typically use other Alpine reactive properties (e.g., isLoading = true) to conditionally show/hide elements with x-show or x-if. However, x-cloak can still be useful on the elements that will eventually display this data, ensuring they don't flash in an empty or template state before Alpine and your loading logic take full control.
The "Secret Content" block below is initially set to be hidden by an Alpine.js x-show="isContentVisible" directive, where isContentVisible starts as false. More importantly, the block also has the x-cloak attribute.
The x-cloak attribute, combined with the crucial CSS rule [x-cloak] { display: none !important; } (included in this page's <head>), ensures that the "Secret Content" block doesn't briefly flash on screen in its raw HTML state before Alpine.js initializes and correctly applies the x-show="false" condition.
This content was elegantly hidden by x-cloak until Alpine.js fully initialized it and respected the x-show directive.
If x-cloak or its associated CSS rule were missing, you might have seen this block flash briefly on page load before Alpine could hide it based on isContentVisible being initially false.
🧪 Experiment: See FOUC (for demonstration only)
<head> section of this HTML page.<style> tag that contains the rule: [x-cloak] { display: none !important; }.x-show="false"). This brief flash is the FOUC that x-cloak is designed to prevent.