Webflow Designer API: Get all styles

`webflow.getAllStyles()`

Retrieve all Styles, also known as Classes, present on the Webflow site.

Syntax

1 webflow.getAllStyles(): Promise<Array<Style>>

Returns

Promise<Array<Style>>

A Promise that resolves to an array of Style objects representing all the styles present on the current site.

Example

1 // Get all Styles
2 const allStyles = await webflow.getAllStyles();
3 
4 // List Styles
5 if (allStyles.length > 0) {
6 
7   console.log("List of all styles:");
8 
9   allStyles.forEach(async (style, index) => {
10 
11     // Print style names and ids
12     console.log(`${index + 1}. Style Name: ${await style.getName()}, Style ID: ${style.id}`);
13   });
14 } else {
15   console.log("No styles found in the current context.");
16 }

Try this example

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Get all Styles
2	const allStyles = await webflow.getAllStyles();
3
4	// List Styles
5	if (allStyles.length > 0) {
6
7	console.log("List of all styles:");
8
9	allStyles.forEach(async (style, index) => {
10
11	// Print style names and ids
12	console.log(`${index + 1}. Style Name: ${await style.getName()}, Style ID: ${style.id}`);
13	});
14	} else {
15	console.log("No styles found in the current context.");
16	}