ReferenceUtilities

Use Webflow Context

useWebflowContext()

Call the useWebflowContext hook to get information about the current Webflow environment.

Webflow provides multiple modes to support different parts of the design process including designing, page building, previewing, and publishing. The useWebflowContext hook provides information about the current mode and locale to help you adapt your component’s behavior and content accordingly.

Use useWebflowContext when you need to:

  • Adapt component behavior depending on the mode, provide placeholders, expanded states, or guidance for designers.
  • Control interactivity - When in a non-interactive state, provide
  • Handle localization with locale-specific content and formatting

Syntax

1useWebflowContext(): WebflowContext;
2
3// Type definitions
4type WebflowContext = {
5  mode: WebflowMode;
6  interactive: boolean;
7  locale: string | null;
8};
9
10type WebflowMode = 
11  | "design" 
12  | "build" 
13  | "edit" 
14  | "preview" 
15  | "component-preview" 
16  | "comment" 
17  | "analyze" 
18  | "publish";

Returns

WebflowContext - An object containing the current mode, interactive state, and locale.

WebflowContext properties

PropertyTypeDescription
modeWebflowModeThe current Webflow mode
interactivebooleanWhether the component is in an interactive state
localestring | nullThe current ISO string for the current locale, or null if the locale isn’t set

Examples

Conditional rendering based on interactive state

In this example, the accordion component opens by default in design mode (when not interactive) so designers can see the full content while working.

interactive.tsx
1import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
2import { useWebflowContext } from '@webflow/react';
3
4const MyComponent =  ({
5    text,
6    variant,
7}: {
8    text: string;
9    variant: string;
10}) => {
11  const { interactive } = useWebflowContext();
12  
13  // Open accordion by default in design mode (when not interactive)
14  // so designers can see the full content while working
15  return (
16    <div>
17      <h1>My Component</h1>
18      <Accordion defaultExpanded={!interactive}>
19        <AccordionSummary
20          expandIcon={<span>▼</span>}
21          aria-controls="content-section-content"
22          id="content-section-header"
23        >
24          <Typography>Content Section</Typography>
25        </AccordionSummary>
26        <AccordionDetails>
27          <Typography>
28            This content is visible by default in design mode.
29          </Typography>
30        </AccordionDetails>
31      </Accordion>
32    </div>
33  );
34}
35
36export default MyComponent;

Locale-aware content

In this example, the component automatically switches to Spanish and French based on the locale.

locale.tsx
1import { useWebflowContext } from '@webflow/react';
2
3const LocalizedComponent = () => {
4
5// Get the current locale
6  const { locale } = useWebflowContext();
7  
8//  Get the localized content based on the locale
9  const getLocalizedContent = () => {
10    switch (locale) {
11      case 'es':
12        return {
13          title: 'Bienvenido a nuestro sitio',
14          description: 'Descubre nuestros productos y servicios',
15          cta: 'Comenzar ahora'
16        };
17      case 'fr':
18        return {
19          title: 'Bienvenue sur notre site',
20          description: 'Découvrez nos produits et services',
21          cta: 'Commencer maintenant'
22        };
23      default:
24        return {
25          title: 'Welcome to our site',
26          description: 'Discover our products and services',
27          cta: 'Get started'
28        };
29    }
30  };
31  
32  const content = getLocalizedContent();
33  
34//  Render the localized content
35  return (
36    <div style={{ padding: '20px', maxWidth: '400px' }}>
37      <h2>{content.title}</h2>
38      <p>{content.description}</p>
39      <button 
40        style={{
41          padding: '10px 20px',
42          backgroundColor: '#007bff',
43          color: 'white',
44          border: 'none',
45          borderRadius: '4px',
46          cursor: 'pointer'
47        }}
48      >
49        {content.cta}
50      </button>
51    </div>
52  );
53}
54
55export default LocalizedComponent;