> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# Editing Directly with the Editor Tab
Use the Composer's Editor tab to change your converted section visually, without touching code.
**Use the Editor tab to change your section visually, without touching code.** It's a full visual builder for the converted section, pick this tab when you'd rather point-and-click than write code or describe the change in words.
### What You Can Do
| Capability | What it does |
|---|---|
| **See the structure** | The layer panel shows the exact structure, so you can select, reorder, add, or remove any element: containers, headings, buttons, links, images, any HTML tag. |
| **Bind dynamic content** | The **Content** panel lets a text element pull its value from a data source instead of staying static, see [Content: Insert Dynamic Values](#content-insert-dynamic-values) below. |
| **Style anything** | The **Design** tab gives each element a short style list, like Color, Size, and Align for text. The **Developer** tab has the full style panels: **Typography, Layout, Spacing, Background, Border, Effects,** and **Custom CSS**. Click **+ Add property** on any panel for less common fields. |
| **Animate visually** | An **Animation** panel in the **Developer** tab extracts and exposes GSAP values from the section's JavaScript as editable fields, see [Animation: Editing GSAP Values Visually](#animation-editing-gsap-values-visually) below. |
| **Bind any field to a global** | Click the small globe icon beside almost any style field to open **Search globals**, then pick a variable from any of your collections to bind that field directly to it. Free caps you at 2 global collections, 1 typography class, and 1 other class, Pro removes the cap. See [Global Style Overview](/uichemy-composer/global-style/overview). |
| **Use your brand styles** | Your synced Figma globals are ready as reusable classes (for example, `.text-md-semibold`, `.display-lg-medium`), and you can create your own with **+ Add class**, next to a **Local** label. |
| **Edit with confidence** | Every change updates live in the preview, so you never edit blind. |
The Design tab: Assets, Text, and Background sections
### Content: Insert Dynamic Values
The **Content** panel sits above the style panels and holds the selected element's text. Click the database icon beside it to open **Insert dynamic value**, a searchable list of fields you can bind instead of typing static text. Pick one, and the element displays that live value instead of fixed text.
Free ships four dynamic tags: Post Title, Post Image, Post Content, and Post URL. Every other field below, including all of Product, Current User, This Term, Site, and URL/Request, needs UiChemy Pro. A Pro field still shows in the picker on Free, it just resolves to nothing until you upgrade.
The text or content inside the selected element, editable directly in the box. Sets the element's HTML content, what actually renders between its opening and closing tag.
Appears when the selected element is (or can become) a link. Sets the `href` attribute, where the link goes. Type a URL, or click the database icon to bind it to a dynamic value like a post's link instead of a fixed address.
Sets `target="_blank"` on the link, so clicking it opens a new browser tab instead of navigating away from the current page.
Adds `rel="nofollow"` to the link, telling search engines not to pass SEO ranking credit through it, useful for sponsored links, ads, or untrusted external links.
Only appears on a real `` element. Add extra HTML attributes to the link itself, written as pairs separated by `||`, for example `data-id|123 || aria-label|Read more`. Kept separate from the general Attributes panel since these apply specifically to the link.
#### Dynamic Value Sources
What **Insert dynamic value** can pull from. Each is a separate data source in the picker, click through Source → Field, and for a value that points at another item (like a post's author), keep clicking to drill into that item's own fields.
Fields on the post or page the section lives on.
- Title: the post or page's title.
- Content: the full post or page content.
- Excerpt: the short summary text.
- Link: the post or page's URL.
- Date: the publish date, format customizable.
- ID: the post's numeric ID.
- Slug: the post's URL slug.
- Status: the post's publish status.
- Comment count: how many comments the post has.
- Author: drills into Current User for the post's author.
- Featured image: drills into Image for the post's featured image.
- Categories: the post's categories, drills into This Term.
- Tags: the post's tags, drills into This Term.
- Previous post: drills back into This Post for the post published just before this one.
- Next post: drills back into This Post for the post published just after this one.
- Custom field: looks up any meta field by key.
Everything This Post has, plus WooCommerce fields.
- Price (raw number): the numeric price, unformatted.
- Price (formatted): the price with currency symbol and formatting.
- Regular price: the price before any discount.
- Sale price: the discounted price.
- Discount %: the percentage saved on sale.
- Is on sale?: whether the product is currently discounted.
- Sale starts: the date the sale begins.
- Sale ends: the date the sale ends.
- Currency code: the store's currency code, like USD.
- Currency symbol: the store's currency symbol, like $.
- SKU: the product's stock-keeping unit code.
- Product type: simple, variable, or another WooCommerce product type.
- Featured?: whether the product is marked as featured.
- Downloadable?: whether the product is a downloadable good.
- Virtual?: whether the product has no physical shipping.
- Stock status: in stock, out of stock, or on backorder.
- Stock quantity: how many units are in stock.
- In stock?: whether the product is currently available.
- On backorder?: whether it's available to order despite being out of stock.
- Availability text: the human-readable stock message.
- Short description: the product's short summary text.
- Description: the product's full description.
- Purchase note: the note shown after a customer buys it.
- Product categories: the categories this product belongs to.
- Product tags: the tags this product belongs to.
- Brands: the brand terms this product belongs to.
- Categories (linked list): the product's categories rendered as ready-made clickable links.
- Tags (linked list): the product's tags rendered as ready-made clickable links.
- Attribute: looks up a named product attribute, like color.
- All attributes: every attribute as a label-to-value list.
- Add-to-cart URL: the URL that adds this product to the cart.
- Add-to-cart label: the button text for adding it to the cart.
- Purchasable?: whether the product can currently be bought.
- Cart URL: the URL to the cart page.
- Checkout URL: the URL to the checkout page.
- Shop URL: the URL to the main shop page.
- Average rating: the product's average review rating.
- Review count: how many reviews it has.
- Star rating (markup): the star-rating display as ready-made HTML.
- Reviews allowed?: whether reviews are enabled for this product.
- Total sales: how many units have sold.
- Weight: the product's shipping weight.
- Length: the product's shipping length.
- Width: the product's shipping width.
- Height: the product's shipping height.
- Dimensions (formatted): all three dimensions combined into one readable string.
- Related products: other products WooCommerce considers related.
- Upsells: manually chosen upsell products.
- Cross-sells: manually chosen cross-sell products.
- Variations: this product's variations, for variable products.
- Gallery: the product's additional gallery images.
The logged-in visitor.
- Display name: their display name.
- ID: their numeric user ID.
- Website: the URL from their profile.
- Bio: their profile bio text.
- Posts URL: a link to their posts archive.
- Avatar URL: their avatar image URL, size customizable.
- Email: their email address, visible to admins only.
The category or tag being viewed.
- Name: the term's name.
- ID: the term's numeric ID.
- Slug: the term's URL slug.
- Description: the term's description text.
- Post count: how many posts use this term.
- Link: the term archive's URL.
Fields on a specific image, used wherever another field drills into one (like a post's Featured image).
- URL: the image file's URL, size customizable.
- Alt text: the image's accessibility text.
- Width: the image's width in pixels.
- Height: the image's height in pixels.
- Caption: the image's caption text.
Site-wide values.
- Name: the site's name.
- Tagline: the site's tagline or description.
- Home URL: the site's homepage URL.
- Language: the site's configured language.
- Site icon: drills into Image for the site's favicon.
- Logo: drills into Image for the site's logo.
- Option: looks up any WordPress option by name.
Values from the current page request.
- Query parameter: looks up a value from the current URL's query string.
- Current URL: the page's current full URL.
- Referrer: the URL the visitor arrived from.
#### Filters (Transform a Bound Value)
Once a value is bound, apply a filter to reformat it without changing the source data. Which filters are offered depends on the field's type (text, number, date, HTML, or array).
- UPPERCASE: converts the text to all capital letters.
- lowercase: converts the text to all lowercase letters.
- Capitalize: capitalizes just the first letter of the text.
- Title Case: capitalizes the first letter of every word.
- Trim spaces: removes extra spaces from the start and end.
- Truncate: cuts the text off after a set length.
- Strip HTML: removes any HTML tags, leaving plain text.
- Slugify: turns the text into a URL-friendly slug.
- Number format: sets how many decimal places to show.
- Round: rounds the number to a set number of decimal places.
- As currency: formats the number as a currency amount.
- Format date: displays the date in a custom format you choose.
- Time ago: shows the date as a relative time, like "3 days ago".
- Excerpt (words): trims HTML content down to a set number of words.
- Strip HTML: removes HTML tags, leaving plain text.
- Auto paragraphs: wraps line breaks in paragraph tags automatically.
- Raw: outputs the HTML exactly as stored, without escaping it.
- Join with…: combines a list into one string, separated by a character you choose.
- Count: shows how many items are in the list.
- First item: shows only the first item in the list.
- Last item: shows only the last item in the list.
- Reverse: reverses the order of the list.
### Editing Per Device (Responsive Breakpoints)
Every style you set in the Design panel is scoped to a **breakpoint**, not just applied everywhere at once. Switch device with your builder's own responsive-mode switcher, in Elementor, that's the Desktop/Tablet/Mobile icons in its top bar, and the Design panel follows along: it shows and edits styles for whichever breakpoint is currently active there, including any extra breakpoints your site defines (Widescreen, Laptop, Tablet Extra, Mobile Extra).
A value you don't set at a narrower breakpoint isn't blank, it inherits from the next breakpoint up (Tablet falls back to Desktop, Mobile falls back to Tablet, and so on), the same cascade Elementor's own responsive controls use. Set a property once at Desktop and it applies everywhere until you override it at a narrower breakpoint.
This follows Elementor's device switcher specifically. Responsive per-breakpoint editing inside the Composer panel has only been confirmed working in the Elementor editor.
### Design Tab
The Editor tab opens on **Design**, a short, simple panel made for quick content and style changes. The controls you see depend on what you select: pick the whole section and you get an overview of everything in it, pick one element and you get just that element's content and a few style fields.
#### Selecting What to Edit
There are two ways to select something:
- **On the canvas**, click any element in your design.
- **In the Layers panel**, click the **Toggle Layers** button (the stacked-layers icon) in the Composer bottom toolbar at the bottom of the canvas. The **Layers** panel lists every element in the section, for example **Section 2**, **login-container**, **MyPlatform**, with its tag on the right. Use **Search name, class or text** to find one fast, then click it to select it.
Once something is selected, a breadcrumb at the top of the Design tab shows where it sits, for example **Section > Box > Box > Text**. Click any step in the breadcrumb to jump up to that parent.
#### Whole Section Selected
With the section itself selected, the Design tab gives you an overview of everything in it. A dot beside a group name, like **Assets •** or **Background •**, means it has values set.
**Assets**
Every image in the section, with a count. Click one to select it and swap the file.
Every icon in the section, with a count, for example **Icons 1**. Click one to select it and edit it.
Every video in the section, with a count. Click one to select it and swap the file.
**Text**
Every text item in the section, with its type on the left (**Text 1**, **Heading**, **Paragraph**, **Link**, **Button**) and its current value on the right.
Click a row to select that item and open its controls, without hunting for it on the canvas.
Long lists show **View more** to reveal the rest, and **View less** to collapse them again.
**Background**
Choose whether the section background is a color or an image.
Choose a single flat color or a gradient that blends colors.
The background color value. Click the swatch to pick a color, or type a value like `#FFFFFF`.
**Objects**
Shows only when the section has a 3D or WebGL element, and lists those elements so you can select them.
**Example:** On a sign-in section, the Text list shows **Heading: Welcome Back**, **Text 3: Email Address**, **Button: Sign In**, and **Link: Create Account**. Click **Button: Sign In** to jump straight to that button's controls.
#### One Element Selected
With a single element selected, the Design tab shows two groups: **Content**, to change what the element says or shows, and a short style group named after the element type. The breadcrumb at the top tells you which element you're on, for example **Section > Box > Box > Text**.
**Text**
Plain text, like a label or a short line.
A Text element selected: Content, plus Color, Size, and Align
The text itself, in an editable box. The database icon in the corner binds it to a live value, like a post title, instead of fixed text.
The text color. Click the swatch to pick a color, or type a value like `#4f46e5`.
The font size, in px.
Left, center, right, or justify.
**Heading**
A heading, like a section title. It has the same fields as Text.
A Heading element selected: Content, plus Color, Size, and Align
The text itself, in an editable box. The database icon in the corner binds it to a live value, like a post title, instead of fixed text.
The text color. Click the swatch to pick a color, or type a value like `#4f46e5`.
The font size, in px.
Left, center, right, or justify.
**Link**
A text link. On top of the text fields, it has the link's own settings.
A Link element selected: Content, Link, Open in new tab, nofollow, Attributes, and Text styles
The link text visitors see, for example **Forgot password?**
Where the link goes. Type a URL, or click the database icon to bind it to a live value, like a post's permalink.
Opens the link in a new browser tab.
Adds `rel="nofollow"`, telling search engines not to follow the link. Useful for sponsored or affiliate links.
Extra HTML attributes for the link, written as `name|value` pairs separated by `||`, for example `data-id|123 || aria-label|Read more`.
The text color. Click the swatch to pick a color, or type a value like `#4f46e5`.
The font size, in px.
Left, center, right, or justify.
**Button**
A button, like **Sign In**.
A Button element selected: Content, plus Fill and Text color
The button label, for example **Sign In**. The database icon binds it to a live value.
The button's background color.
The color of the button label.
**Icon**
An icon, like a logo mark or a symbol.
An Icon element selected: icon preview, Paste SVG URL, SVG code, plus Color and Size
The image button on the icon preview. Opens the media library to pick a different icon.
The arrow button on the icon preview. Puts the original icon back.
Loads an icon from an SVG file's web address.
Opens the icon's SVG code so you can edit it directly.
The icon color.
How big the icon is, for example **100 %**.
**Image or Video**
Swap the image or video file.
How wide it is.
How it fills its space, for example cover or contain.
How rounded its corners are.
**Form Field (input, message box, dropdown)**
The field's background color.
The color of the text typed in the field.
How rounded the field's corners are.
**Box, Card, or Badge**
The background color of the box.
**Embed**
How wide the embed is.
How rounded its corners are.
Every color and size field has a small globe icon on its right. Click it to bind the field to one of your [global styles](/uichemy-composer/global-style/overview) instead of a fixed value.
**Example:** Select the **Everything you need,** heading. The Design tab shows its text under **Content**, and **Color**, **Size 46 px**, and **Align** under **Text**. Change the size to 40 and the heading updates on the canvas right away.
For anything beyond these fields, like spacing, borders, layout, or custom CSS, switch to the [Developer Tab](#developer-tab).
### Developer Tab
**Developer** sits next to Design in the Editor tab's sub-navigation. It has the full panel list, top to bottom: the element row, **Content**, **Attributes**, **Typography**, **Layout**, **Spacing**, **Background**, **Border**, **Effects**, **Animation**, and **Custom CSS**. Each one is explained below, in the same order. Click a property to expand it.
The Developer tab: the element row, then Content, Attributes, Typography, Layout, Spacing, Background, Border, Effects, Animation, and Custom CSS
#### Element Row
The row at the top of the Developer tab gives you deeper element-level access:
A dropdown showing the selected element's tag, for example ``, so you always know exactly what you're editing. Click it to search and change the tag itself, covering text tags (`<h1>`–`<h6>`, `<p>`, `<span>`, `<blockquote>`, `<cite>`, `<time>`, `<abbr>`, and more), plus containers, media, lists, and form controls. Changes the underlying HTML tag, useful for fixing semantics, for example turning a `<div>` that's really a quote into a proper `<blockquote>`, without changing anything visual.
</Expandable>
<Expandable title="Local (Class scope)" default-open="false">
The default scope, styles you set apply only to this one element, not shared with anything else. Switch to a class (below) once you want the same styling reused elsewhere.
</Expandable>
<Expandable title="+ Add class (Class)" default-open="false">
Creates a reusable CSS class instead of styling the element inline. Sets the element's `class` attribute. Useful when you want the same look reused across several elements, style the class once, apply it anywhere.
</Expandable>
<Expandable title="State dropdown (Default / Hover / Active / Focus / Disabled)" default-open="false">
The dropdown to the right of the class selector, for example next to `.login-container`. It shows **Default** until you pick another state. Choose a state, then change any Typography, Layout, Spacing, Background, Border, or Effects field, and that style applies only in that state:
- **Default**: the normal look, when nothing is happening to the element.
- **Hover**: when a visitor points at the element with the mouse, for example a button that changes color.
- **Active**: while the element is being clicked or pressed.
- **Focus**: when the element is selected with the keyboard or clicked into, like a form field being typed in.
- **Disabled**: when the element is turned off, for example a faded submit button.
<Callout kind="tip">
States only work on a class, not on **Local**. A one-off inline style can't carry a state, so pick or add a class first.
</Callout>
</Expandable>
<Expandable title="Mark as" default-open="false">
A dropdown to mark the selected element as a **loop** or a **form**. The button itself shows which one is active, so you can see it at a glance without opening the dropdown.
- **Loop**: repeats this element once for each item in a data set, like turning one product card into a full grid of products.
- **Form**: turns the element into a working form. The same action described in [Turn Any Element Into a Form](/uichemy-plugin/forms/atom-form), reachable here or via the Layers panel's right-click menu.
<Callout kind="tip">
An element can't be both at once, marking it a form disables Loop (and vice versa) until you remove the first one. Clicking the active option again removes it.
</Callout>
<Callout kind="warning">
On the free plan, Loop only works with **Posts** as the data source. Looping over Products, Terms/Categories, Users, or an external JSON API needs UiChemy Pro.
</Callout>
</Expandable>
</ExpandableGroup>
None of this row appears in Design mode, it's Developer-only. See [Design vs Developer Mode](/uichemy-composer/concepts/design-vs-developer-mode) for what each mode restricts.
#### Content
The selected element's inner content, with the database icon to bind it to a live value. See [Content: Insert Dynamic Values](#content-insert-dynamic-values) for every source and filter.
#### Attributes
Add custom HTML attributes to the selected element with **+ Add Attribute**, as free key/value pairs. Use this for things the UI doesn't have a dedicated field for, like `data-*` attributes for tracking scripts, `aria-*` attributes for accessibility, or `id` for a jump-link anchor.
<Callout kind="tip">
`style`, `class`, `href`, and `target` can't be added here, they're controlled by their own dedicated fields (the style panels, Class, and Link) instead.
</Callout>
<Callout kind="tip">
Each panel only shows its most common fields by default. Click **+ Add property** at the bottom of a panel to reveal the rest, the number beside it (for example **15 available**) counts how many are still hidden. Once you add one, it moves up into the panel's main list.
</Callout>
#### Typography
<ExpandableGroup>
<Expandable title="Font Family" default-open="false">
Changes the typeface. Use this to switch a heading from a generic font to your brand's font.
<Callout kind="tip">
The field often shows more than one name at once, for example `'Segoe UI', Roboto, sans-serif`. That's a fallback list: the browser tries the first font, and if a visitor's device doesn't have it installed, it falls back to the next one in line, all the way down to a generic type like sans-serif. Picking a font from the dropdown sets a new fallback list for you automatically, so you don't need to write one by hand.
</Callout>
Clean, modern sans-serif fonts, good for UI text, body copy, and most headings:
- **Inter**: a clean, highly legible UI font, the default choice for most modern web and app interfaces
- **Roboto**: Android's default font, friendly and neutral, works well for general body text
- **Open Sans**: warm and readable, one of the most widely used web fonts
- **Lato**: rounded and approachable, common in marketing and corporate sites
- **Montserrat**: geometric and bold, popular for stylish, modern headings
- **Poppins**: geometric and rounded, a trendy choice for startups and modern brands
- **Nunito**: soft and rounded, gives a friendly, approachable feel
- **Nunito Sans**: a more neutral, less rounded sibling of Nunito, good for body text
- **Source Sans Pro**: Adobe's clean, professional sans-serif, versatile for UI and text
- **Source Sans 3**: the newer version of Source Sans Pro, with refined details
- **Raleway**: elegant and thin, popular for stylish headings and modern branding
- **Oswald**: tall and condensed, bold impact for headlines and labels
- **Mulish**: minimal and neutral, a safe modern default for body text
- **Work Sans**: optimized for on-screen reading, clean and practical
- **Karla**: a slightly quirky, friendly grotesque-style sans-serif
- **PT Sans**: a humanist sans-serif designed for clarity
- **Noto Sans**: Google's font designed to support virtually every language and script
- **DM Sans**: low-contrast geometric sans, great for clean modern UI
- **Manrope**: modern geometric sans-serif with a slightly technical feel
- **Plus Jakarta Sans**: a contemporary geometric sans, popular in current SaaS design
- **Rubik**: rounded corners give it a soft, playful, modern look
- **IBM Plex Sans**: IBM's corporate typeface, technical and precise
- **Helvetica**: the classic, neutral Swiss sans-serif, a timeless default
- **Helvetica Neue**: a refined, more complete version of Helvetica
- **Arial**: Helvetica's widely available system alternative, safe and neutral
- **Verdana**: designed for screen clarity, even at small sizes
- **Tahoma**: compact and clear, common in older Windows interfaces
- **Trebuchet MS**: a humanist sans with a slightly casual, friendly feel
- **SF Pro**: Apple's system font, clean and modern, used across iOS and macOS
- **SF Pro Display**: SF Pro's variant tuned for larger headline sizes
- **SF Pro Text**: SF Pro's variant tuned for smaller body text sizes
Serif fonts, good for elegant headings, editorial content, and long-form reading:
- **Playfair Display**: high-contrast and elegant, a popular choice for luxury or editorial headings
- **Merriweather**: designed for comfortable on-screen reading of body text
- **Lora**: a balanced serif with a slightly calligraphic feel, good for articles
- **PT Serif**: a serif companion to PT Sans, classic and readable
- **Source Serif Pro**: Adobe's serif designed to pair with Source Sans
- **Source Serif 4**: the newer version of Source Serif Pro
- **Crimson Text**: inspired by old-style book typefaces, good for long-form reading
- **Cormorant Garamond**: delicate and high-contrast, elegant for display headings
- **Libre Baskerville**: a web-optimized take on the classic Baskerville, great for readable body text
- **EB Garamond**: a faithful digital revival of the classic Garamond, refined and literary
- **Bitter**: a slab serif built for comfortable screen reading
- **Georgia**: designed specifically for screen legibility, a reliable classic choice
- **Times New Roman**: the traditional print and document standard, formal and familiar
- **Garamond**: an old-style classic serif, elegant and literary
Monospace fonts, where every character is the same width, good for code snippets:
- **JetBrains Mono**: designed for code editors, with clear distinction between similar characters
- **Fira Code**: a coding font known for ligatures that combine symbols like `=>` into one glyph
- **Source Code Pro**: Adobe's clean monospace font for code
- **IBM Plex Mono**: IBM's monospace companion to Plex Sans, technical and precise
- **Roboto Mono**: the monospace companion to Roboto
- **Inconsolata**: a humanist monospace font, popular for code and terminals
- **Courier New**: the classic typewriter-style monospace font
- **Menlo**: Apple's default monospace font for code editors
- **Consolas**: Microsoft's default monospace font for code editors
Generic and system options, these aren't one specific font, they tell the browser which category or which device font to use:
- **monospace**: lets the browser pick its own default fixed-width font
- **system-ui**: uses whatever font the visitor's operating system uses for its own interface
- **ui-sans-serif**: the device's own sans-serif system font
- **ui-serif**: the device's own serif system font
- **ui-monospace**: the device's own monospace system font
- **sans-serif**: lets the browser pick its own default sans-serif font
- **serif**: lets the browser pick its own default serif font
- **cursive**: a decorative, handwriting-style font, the browser picks its own
- **fantasy**: a decorative, stylized font, the browser picks its own
</Expandable>
<Expandable title="Font Size" default-open="false">
How big the text is. Go bigger for headlines, smaller for fine print like captions or disclaimers.
</Expandable>
<Expandable title="Font Weight" default-open="false">
How thick or thin the letters look. Use a heavier weight to make something stand out, like a heading or a price, and a lighter weight for regular body text.
- **100 Thin** to **900 Black**: a numeric scale from thinnest to boldest
- **normal**: the font's regular weight
- **bold**: a bold weight
- **lighter**: one step lighter than the inherited weight
- **bolder**: one step bolder than the inherited weight
</Expandable>
<Expandable title="Line Height" default-open="false">
The breathing room between lines of text. Increase it to make a paragraph easier to read, tighten it to fit more lines into a small space.
</Expandable>
<Expandable title="Letter Spacing" default-open="false">
The gap between individual letters. Tighten it to make a heading feel punchier, loosen it to make a label feel airier or more spaced-out, like on a badge.
</Expandable>
<Expandable title="Word Spacing" default-open="false">
The gap between whole words, separate from the gap between letters. Rarely changed, but useful for fine-tuning how dense a paragraph feels.
</Expandable>
<Expandable title="Text Align" default-open="false">
Where the text sits inside its box.
- **left**: aligns to the left, normal reading alignment
- **center**: centers the text, good for a headline or button label
- **right**: aligns to the right, good for something like a price column
- **justify**: stretches text evenly to fill the line, newspaper-style
- **start**: same as left, but flips automatically for right-to-left languages
- **end**: same as right, but flips automatically for right-to-left languages
- **match-parent**: uses whatever alignment the parent element already has
</Expandable>
<Expandable title="Color" default-open="false">
The text's color. Change this to match your brand, or make a call-to-action stand out.
</Expandable>
<Expandable title="Font Style" default-open="false">
Changes the slant of the letters.
- **normal**: the regular, upright look
- **italic**: slants the text for emphasis or a quote
- **oblique**: a mechanically-slanted version, used when the font has no real italic
</Expandable>
<Expandable title="Text Transform" default-open="false">
Changes the letter case automatically, without retyping anything.
- **none**: leaves the text exactly as typed
- **uppercase**: ALL CAPS, good for a bold label like a badge
- **lowercase**: all lowercase
- **capitalize**: capitalizes the first letter of each word, good for title-style headings
- **full-width**: renders characters at full-width spacing, for Japanese/Chinese text
- **full-size-kana**: renders small kana characters at full size, for Japanese text
</Expandable>
<Expandable title="Text Decoration" default-open="false">
Adds a line to the text.
- **none**: no line
- **underline**: a line below the text, the classic look for a link
- **overline**: a line above the text, rarely used
- **line-through**: a crossed-out look, good for showing an old price
- **blink**: makes the text flash, rarely used and often ignored by modern browsers
</Expandable>
<Expandable title="Decoration Style" default-open="false">
Changes how the Text Decoration line looks.
- **solid**: a normal, single line
- **double**: two parallel lines
- **dotted**: a dotted line
- **dashed**: a dashed line
- **wavy**: a wavy, spellcheck-style squiggle
</Expandable>
<Expandable title="White Space" default-open="false">
Controls how extra spaces and line breaks in your text behave. Leave this on normal for regular paragraphs, use nowrap to force something like a button label to stay on one line instead of wrapping.
- **normal**: wraps automatically, extra spaces are collapsed
- **nowrap**: keeps everything on one line, no wrapping
- **pre**: shows spaces and line breaks exactly as typed, no wrapping
- **pre-line**: collapses extra spaces but keeps line breaks
- **pre-wrap**: keeps spaces and line breaks, and still wraps
- **break-spaces**: like pre-wrap, but also wraps spaces at the end of a line
</Expandable>
<Expandable title="Word Break" default-open="false">
Stops a very long word (like a URL) from breaking your layout by forcing it to wrap.
- **normal**: breaks only where normal, at spaces
- **break-all**: breaks anywhere so nothing overflows
- **keep-all**: never breaks Chinese/Japanese/Korean words
- **break-word**: breaks a long word only if it has no other choice
</Expandable>
<Expandable title="Overflow Wrap" default-open="false">
A backup safety net for words too long to fit in their box, like an email address.
- **normal**: leaves them alone
- **break-word**: breaks a long word only if it would otherwise overflow
- **anywhere**: breaks anywhere needed, and also counts toward line-wrapping calculations
</Expandable>
<Expandable title="Font Variant" default-open="false">
A stylistic touch some brands use for labels.
- **normal**: leaves the text as typed
- **small-caps**: renders lowercase letters as smaller capital letters
- **all-small-caps**: turns every letter, including capitals, into a small capital
- **petite-caps**: a smaller, more delicate small-caps variant some fonts support
- **unicase**: mixes cap-height and small-caps letterforms for a single-case look
- **titling-caps**: capital letterforms designed for large display headings
</Expandable>
<Expandable title="Font Stretch" default-open="false">
Makes the letters visually narrower or wider. Rarely needed unless the chosen font actually supports different widths.
- **ultra-condensed**: the narrowest setting
- **extra-condensed**: very narrow
- **condensed**: noticeably narrow
- **semi-condensed**: slightly narrow
- **normal**: the font's regular width
- **semi-expanded**: slightly wide
- **expanded**: noticeably wide
- **extra-expanded**: very wide
- **ultra-expanded**: the widest setting
</Expandable>
<Expandable title="Direction" default-open="false">
Sets whether text reads left-to-right or right-to-left.
- **ltr**: left-to-right, the default for most languages
- **rtl**: right-to-left, for languages like Arabic or Hebrew
</Expandable>
<Expandable title="Writing Mode" default-open="false">
Turns text vertical instead of horizontal, useful for a sidebar label or a vertical Japanese-style layout.
- **horizontal-tb**: normal horizontal text, the default
- **vertical-rl**: vertical text stacked top to bottom, columns read right-to-left
- **vertical-lr**: vertical text stacked top to bottom, columns read left-to-right
- **sideways-rl**: vertical text with each character laid on its side, columns read right-to-left
- **sideways-lr**: vertical text with each character laid on its side, columns read left-to-right
</Expandable>
<Expandable title="Text Orientation" default-open="false">
Only matters once Writing Mode is set to vertical, it decides how each character sits along that vertical line.
- **mixed**: rotates Latin letters sideways but keeps CJK characters upright, the natural default
- **upright**: keeps every character upright, stacked top to bottom
- **sideways**: lays every character on its side
- **sideways-right**: lays every character on its side, rotated the opposite way
- **use-glyph-orientation**: a legacy option for older SVG content
</Expandable>
<Expandable title="Text Shadow" default-open="false">
Adds a shadow behind the text to help it stand out, especially over a busy background image.
- **X**: how far the shadow shifts sideways
- **Y**: how far the shadow shifts up or down
- **Blur**: how soft or sharp the shadow's edge is
- **Text Shadow Color**: the shadow's color and transparency
<Callout kind="tip">
Each of these four sub-fields has its own globe icon, so you can bind X, Y, Blur, or the Color individually to a global instead of typing a fixed number.
</Callout>
</Expandable>
</ExpandableGroup>
#### Layout
<ExpandableGroup>
<Expandable title="Display" default-open="false">
The single most important layout setting, it decides how this element behaves and sits among the elements around it.
- **block**: use for things that should stack on their own, like a paragraph or a full-width section
- **inline**: use for something that should sit inside a line of text, like a highlighted word
- **inline-block**: like inline, but lets you also set a width, height, or padding, for example a small badge next to text
- **flex**: use to line several things up in a row or column and control the spacing between them, like a row of buttons. See Flex Container below
- **inline-flex**: same as flex, but the row/column itself sits inside a line of text instead of taking its own line
- **grid**: use to lay things out in rows and columns, like a photo gallery or pricing table. See Grid below
- **inline-grid**: same as grid, but sits inside a line of text
- **table**: makes the element behave like a classic HTML table, rarely needed outside real tabular data
- **table-row**: makes the element behave like a table row
- **table-cell**: makes the element behave like a table cell
- **list-item**: makes it look like a bullet-point list entry
- **contents**: an advanced option, hides the element's own box but keeps its children visible
- **flow-root**: an advanced fix for when content inside this element (like a floated image) spills outside its box
- **none**: completely hides the element and removes the space it took up
</Expandable>
<Expandable title="Position" default-open="false">
Where the element sits relative to its normal spot on the page.
- **static**: the default, the element just sits where it naturally falls
- **relative**: keeps its normal spot, but lets you nudge it slightly with Top/Right/Bottom/Left, useful for small visual tweaks
- **absolute**: pulls it out of normal flow so you can place it exactly, like pinning a badge to the corner of a card
- **fixed**: keeps it in the same spot on screen even while visitors scroll, like a sticky call-to-action bar
- **sticky**: scrolls normally until it reaches a point you set, then sticks in place, like a table header that stays visible while you scroll the table
</Expandable>
<Expandable title="Box Sizing" default-open="false">
Decides whether padding and border make the element bigger than the width you typed, or stay inside it.
- **content-box**: the width you type is for the content only, padding and border get added on top, so the element ends up bigger than the number
- **border-box**: padding and border are included in the width you type, so the element never grows past that size, usually the safer choice
</Expandable>
<Expandable title="Visibility" default-open="false">
- **visible**: shown normally
- **hidden**: invisible, but the empty space is still reserved, unlike Display none which removes the space too
- **collapse**: only for tables, cleanly removes a row or column
</Expandable>
<Expandable title="Width" default-open="false">
How wide the element is.
</Expandable>
<Expandable title="Height" default-open="false">
How tall the element is.
</Expandable>
<Expandable title="Min W" default-open="false">
A floor for Width, the element is never allowed to shrink narrower than this, even if its content or the browser window would otherwise make it smaller.
</Expandable>
<Expandable title="Max W" default-open="false">
A ceiling for Width, the element is never allowed to grow wider than this, even on a large screen.
</Expandable>
<Expandable title="Min H" default-open="false">
A floor for Height, the element is never allowed to shrink shorter than this.
</Expandable>
<Expandable title="Max H" default-open="false">
A ceiling for Height, the element is never allowed to grow taller than this.
</Expandable>
<Expandable title="Inset" default-open="false">
A shortcut to move a positioned element by setting all four sides, Top, Right, Bottom, and Left, at once.
</Expandable>
<Expandable title="Z-Index" default-open="false">
Decides which element appears in front when two overlap, like making a popup appear above the page content behind it. Higher numbers sit on top.
</Expandable>
<Expandable title="Overflow" default-open="false">
What happens when content is too big for its box, like a long list inside a small card. Controls both directions at once.
- **auto**: only shows a scrollbar if needed, usually the safest choice
- **scroll**: always shows a scrollbar
- **hidden**: cuts off anything that doesn't fit
- **visible**: lets it spill out messily
- **clip**: same as hidden, but blocks scrolling entirely
</Expandable>
<Expandable title="Overflow X" default-open="false">
Same options as Overflow, but only for the horizontal (side-to-side) direction.
</Expandable>
<Expandable title="Overflow Y" default-open="false">
Same options as Overflow, but only for the vertical (up-and-down) direction.
</Expandable>
<Expandable title="Float" default-open="false">
An older way to push an element to one side and let text or other content wrap around it, mostly replaced today by Flex and Grid.
</Expandable>
<Expandable title="Clear" default-open="false">
Forces an element to move below any floated elements next to it instead of wrapping around them, used alongside Float.
</Expandable>
<Expandable title="Cursor" default-open="false">
Changes the mouse icon to give visitors a visual hint.
- Cursor → auto: browser picks the cursor based on context
- Cursor → default: the standard pointer arrow
- Cursor → pointer: a hand, signals a clickable element
- Cursor → text: an I-beam, signals selectable text
- Cursor → wait: a loading/busy indicator
- Cursor → help: a pointer with a question mark, signals more info is available
- Cursor → move: a cross-arrow, signals the element can be dragged
- Cursor → not-allowed: a blocked circle, signals the action isn't allowed here
- Cursor → grab: an open hand, signals the element can be picked up
- Cursor → grabbing: a closed hand, shown while actively dragging
- Cursor → crosshair: a precision cross, used for selection tools
- Cursor → zoom-in: a magnifying glass with a plus, signals a click will zoom in
- Cursor → zoom-out: a magnifying glass with a minus, signals a click will zoom out
- Cursor → ew-resize: a left-right arrow, for dragging a vertical edge
- Cursor → ns-resize: an up-down arrow, for dragging a horizontal edge
- Cursor → nesw-resize: a diagonal arrow, for dragging a corner along that diagonal
- Cursor → nwse-resize: a diagonal arrow, for dragging a corner along the opposite diagonal
- Cursor → none: hides the cursor entirely
- Cursor → progress: a pointer with a spinner, signals background work while still usable
- Cursor → cell: signals a selectable table cell
- Cursor → copy: signals a drag-and-drop will copy, not move
- Cursor → alias: signals a shortcut will be created
</Expandable>
<Expandable title="Pointer Events" default-open="false">
- Pointer Events → auto: the element responds to clicks and hovers normally
- Pointer Events → none: makes the element "click-through", useful for a decorative overlay that shouldn't block clicks on what's behind it
</Expandable>
<Expandable title="User Select" default-open="false">
Controls whether visitors can select and copy the text, useful for blocking copying on something like a coupon code.
- **auto**: normal
- **none**: can't select
- **text**: can select
- **all**: one click selects everything inside
- **contain**: selection can't spread outside the element
</Expandable>
<Expandable title="Resize" default-open="false">
Lets visitors manually drag-resize the element themselves, like a comment box a visitor can make bigger, in either direction or just one.
</Expandable>
<Expandable title="Object Fit" default-open="false">
For images and videos, how they fill their box.
- **cover**: fills the box completely, may crop edges, good for consistent thumbnail grids
- **contain**: shows the whole image without cropping, may leave empty space
- **fill**: stretches to fit exactly, may distort the image
- **none**: shows it at full size regardless of the box
- **scale-down**: uses whichever of none/contain ends up smaller
</Expandable>
<Expandable title="Object Position" default-open="false">
For images and videos, which part of the image stays visible when it's cropped, for example center, top, or bottom right.
</Expandable>
</ExpandableGroup>
**Flex Container group** (only shows once Display is set to Flex)
<ExpandableGroup>
<Expandable title="Flex Direction" default-open="false">
Which way the children line up.
- Flex Direction → row: lines children up left to right, like a horizontal menu
- Flex Direction → row-reverse: lines children up right to left
- Flex Direction → column: stacks children top to bottom, like a vertical list
- Flex Direction → column-reverse: stacks children bottom to top
</Expandable>
<Expandable title="Flex Wrap" default-open="false">
- Flex Wrap → nowrap: squeezes everything onto one line, shrinking items if needed
- Flex Wrap → wrap: lets items drop to a new line when they run out of room, useful for a responsive row of cards
- Flex Wrap → wrap-reverse: wraps onto multiple lines, but in reverse order
</Expandable>
<Expandable title="Justify Content" default-open="false">
Controls the spacing along the row or column.
- Justify Content → flex-start: packs children at the start
- Justify Content → flex-end: packs children at the end
- Justify Content → start: same as flex-start, but direction-aware for right-to-left layouts
- Justify Content → end: same as flex-end, but direction-aware for right-to-left layouts
- Justify Content → center: centers children, use it to center a button
- Justify Content → space-between: equal gaps between items, none at the ends, like a logo on the left and a menu on the right of a header
- Justify Content → space-around: equal gap around each item
- Justify Content → space-evenly: perfectly equal gaps everywhere
- Justify Content → left: packs children to the physical left, regardless of direction
- Justify Content → right: packs children to the physical right, regardless of direction
- Justify Content → stretch: stretches auto-sized items to fill the line
- Justify Content → normal: default packing, behaves like flex-start
</Expandable>
<Expandable title="Align Items" default-open="false">
Controls alignment across the row or column, the other direction from Justify Content.
- Align Items → stretch: stretches children to fill the cross axis
- Align Items → flex-start: aligns children to the start
- Align Items → flex-end: aligns children to the end
- Align Items → start: same as flex-start, but direction-aware
- Align Items → end: same as flex-end, but direction-aware
- Align Items → self-start: aligns this item to its own start edge, direction-aware
- Align Items → self-end: aligns this item to its own end edge, direction-aware
- Align Items → center: centers children, use it to vertically center an icon next to a line of text
- Align Items → baseline: aligns children by their text baseline
- Align Items → normal: default alignment, behaves like stretch
</Expandable>
<Expandable title="Align Content" default-open="false">
Like Align Items, but only matters once items have wrapped onto more than one line.
</Expandable>
</ExpandableGroup>
**Gaps group**
<ExpandableGroup>
<Expandable title="Row Gap" default-open="false">
Adds even vertical spacing between rows of items, like the gap between cards stacked in a grid, without needing a margin on each one.
</Expandable>
<Expandable title="Column Gap" default-open="false">
Adds even horizontal spacing between columns of items.
</Expandable>
</ExpandableGroup>
**Flex Item group** (set on one child, not the whole row/column)
<ExpandableGroup>
<Expandable title="Align Self" default-open="false">
Overrides the parent's Align Items setting for just this one child.
</Expandable>
<Expandable title="Justify Self" default-open="false">
Overrides the parent's Justify Content setting for just this one child.
</Expandable>
<Expandable title="Flex Grow" default-open="false">
Lets this item stretch to fill leftover space, like a search bar that expands to fill a toolbar.
</Expandable>
<Expandable title="Flex Shrink" default-open="false">
Controls how much this item shrinks first when space gets tight, relative to its siblings.
</Expandable>
<Expandable title="Flex Basis" default-open="false">
The item's starting size before it grows or shrinks.
</Expandable>
<Expandable title="Order" default-open="false">
Visually reorders items without changing anything in the underlying code.
</Expandable>
</ExpandableGroup>
**Grid group** (only shows once Display is set to Grid)
<ExpandableGroup>
<Expandable title="Grid Template Columns" default-open="false">
Defines the grid's columns, for example `1fr 1fr 1fr` for a 3-column layout with equal-width columns.
</Expandable>
<Expandable title="Grid Template Rows" default-open="false">
Defines the grid's rows, for example `auto auto` for two rows sized to their content.
</Expandable>
<Expandable title="Grid Auto Flow" default-open="false">
Decides how new items get placed automatically.
- Grid Auto Flow → row: fills row by row
- Grid Auto Flow → column: fills column by column
- Grid Auto Flow → dense: backfills earlier empty gaps instead of only moving forward
- Grid Auto Flow → row dense: fills row by row, backfilling earlier gaps
- Grid Auto Flow → column dense: fills column by column, backfilling earlier gaps
</Expandable>
</ExpandableGroup>
#### Spacing
Two nested visual boxes, an outer **Margin** box and an inner **Padding** box, Top, Right, Bottom, and Left on each. Click a side and type a value.
<ExpandableGroup>
<Expandable title="Margin" default-open="false">
Pushes the element itself outward, away from its neighbors, without affecting its own size. Click the chain-link icon next to it to link all four sides together, so typing one value sets all four at once.
</Expandable>
<Expandable title="Padding" default-open="false">
Pushes the element's content inward, away from its own edge, making the element itself bigger. Nested inside the Margin box, with its own chain-link icon to link all four sides together.
</Expandable>
<Expandable title="Unit" default-open="false">
Each box has its own unit dropdown, applied to whichever side you're editing.
- **px**: a fixed number of pixels
- **%**: a percentage of the parent element's size
- **em**: relative to this element's own font size
- **rem**: relative to the page's root font size
- **vw**: a percentage of the browser window's width
- **vh**: a percentage of the browser window's height
- **auto**: Margin only, lets the browser calculate the value, useful for centering an element horizontally
</Expandable>
</ExpandableGroup>
#### Background
<ExpandableGroup>
<Expandable title="Color" default-open="false">
A flat, solid background color.
</Expandable>
<Expandable title="Image" default-open="false">
A background photo or graphic, by URL or upload.
</Expandable>
<Expandable title="Gradient" default-open="false">
A smooth blend between two or more colors, instead of one flat color.
</Expandable>
<Expandable title="Repeat" default-open="false">
Controls whether a small background image tiles to fill the space, like a repeating pattern.
- **no-repeat**: shows it once
- **repeat**: tiles in both directions
- **repeat-x**: tiles horizontally only
- **repeat-y**: tiles vertically only
- **space**: tiles without cutting the image off, spacing the copies out evenly
- **round**: tiles without cutting the image off, scaling the copies to fit evenly
</Expandable>
<Expandable title="Size" default-open="false">
- **cover**: fills the whole box, may crop the image slightly
- **contain**: fits the whole image without cropping, may leave empty space
- **auto**: uses the image's real size
</Expandable>
<Expandable title="Position" default-open="false">
Where the image sits inside its box, useful when the image is bigger than its container and you want to control which part shows, for example centered or pinned to a corner.
</Expandable>
<Expandable title="Attachment" default-open="false">
- Attachment → scroll: moves the background with the page normally
- Attachment → fixed: keeps the background still while the page scrolls past it, a common parallax effect
- Attachment → local: scrolls the background with the element's own inner content
</Expandable>
<Expandable title="Origin" default-open="false">
An advanced control for exactly where the background is allowed to start painting from, inside the border, inside the padding, or from the content only. Rarely needed for everyday use.
</Expandable>
<Expandable title="Clip" default-open="false">
An advanced control for where the background gets cut off. Can even clip it to the exact shape of the text, for a gradient-text effect.
</Expandable>
<Expandable title="Blend Mode" default-open="false">
Blends the background with whatever's behind it for a stylized effect, similar to blend modes in Photoshop, see Mix Blend under Effects below for the full list.
</Expandable>
</ExpandableGroup>
#### Border
<ExpandableGroup>
<Expandable title="Width" default-open="false">
How thick the border line is, on all sides.
</Expandable>
<Expandable title="Style" default-open="false">
What the border line looks like.
- **solid**: a single solid line
- **dashed**: a dashed line
- **dotted**: a dotted line
- **double**: two parallel solid lines
- **groove**: a carved-in 3D look
- **ridge**: a raised-out 3D look
- **inset**: makes the whole box look pressed in
- **outset**: makes the whole box look popped out
- **none**: no border
- **hidden**: no border, but wins conflicts in table borders
</Expandable>
<Expandable title="Color" default-open="false">
The border's color, can be bound to a global.
</Expandable>
<Expandable title="Radius (all)" default-open="false">
Rounds all four corners together, a small number gives a subtle rounded look, a very high number turns it into a circle or pill shape.
</Expandable>
<Expandable title="Per-corner radius" default-open="false">
Rounds each corner (TL, TR, BR, BL) by its own amount, lets you round just some corners, like only the top of a card.
</Expandable>
<Expandable title="Per-side width" default-open="false">
Gives each side (Top, Right, Bottom, Left) its own thickness, for when you want a border on just one edge.
</Expandable>
</ExpandableGroup>
#### Effects
<ExpandableGroup>
<Expandable title="Opacity" default-open="false">
Makes the element see-through. Useful for a faded disabled state, or fading something in and out.
</Expandable>
<Expandable title="Shadow Preset" default-open="false">
Adds a ready-made drop shadow to lift the element visually off the page, like a card that looks like it's floating. Pick from a range going from subtle to dramatic.
</Expandable>
<Expandable title="Box Shadow" default-open="false">
Write a custom shadow instead of using a preset, for full control over its color, blur, and offset.
</Expandable>
<Expandable title="Mix Blend" default-open="false">
Blends the whole element with the background behind it for a creative effect, similar to blend modes in Photoshop, for example darkening, lightening, or inverting colors where they overlap.
</Expandable>
<Expandable title="Blur" default-open="false">
Softens the element, like frosted glass, commonly used to blur an image or background behind a popup.
</Expandable>
<Expandable title="Brightness" default-open="false">
Makes the element lighter or darker overall.
</Expandable>
<Expandable title="Contrast" default-open="false">
Increases or decreases the difference between light and dark areas.
</Expandable>
<Expandable title="Saturate" default-open="false">
Makes colors more vivid or more muted.
</Expandable>
<Expandable title="Hue Rotate" default-open="false">
Shifts every color around the color wheel, for a stylized tinted effect.
</Expandable>
<Expandable title="Grayscale" default-open="false">
Fades the element toward black and white, useful for turning an image gray on hover or in a disabled state.
</Expandable>
<Expandable title="Invert" default-open="false">
Flips every color to its opposite, like a photo negative.
</Expandable>
<Expandable title="Sepia" default-open="false">
Gives the element a warm, brownish, old-photo tint.
</Expandable>
<Expandable title="Translate X" default-open="false">
Moves the element sideways (left or right) from its normal position, without affecting the layout around it, commonly used for hover effects.
</Expandable>
<Expandable title="Translate Y" default-open="false">
Moves the element up or down from its normal position, without affecting the layout around it, commonly used for hover effects.
</Expandable>
<Expandable title="Rotate" default-open="false">
Spins the element visually, for example tilting an icon on hover.
</Expandable>
<Expandable title="Scale" default-open="false">
Resizes the element larger or smaller visually, like a button that grows slightly when you point at it.
</Expandable>
<Expandable title="Skew X" default-open="false">
Tilts the element sideways at an angle, like a slanted italic effect applied to the whole shape.
</Expandable>
<Expandable title="Skew Y" default-open="false">
Tilts the element vertically at an angle, a different axis of the same slanting effect.
</Expandable>
<Expandable title="Transform Origin" default-open="false">
Sets the point everything else in this group (Rotate, Scale, Skew) pivots around, for example the center versus a corner.
</Expandable>
<Expandable title="Property" default-open="false">
Which style change should animate smoothly instead of snapping instantly, like color or size.
</Expandable>
<Expandable title="Duration" default-open="false">
How long the animation takes, for example a button that fades to a new color over half a second on hover instead of flashing instantly.
</Expandable>
<Expandable title="Delay" default-open="false">
How long to wait before the animation starts.
</Expandable>
<Expandable title="Timing" default-open="false">
The animation's pacing, for example starting slow and ending fast, or a constant speed throughout.
</Expandable>
</ExpandableGroup>
#### Animation
Exposes GSAP values from the section's JavaScript as editable fields. It's a multi-step flow, so it has its own section: see [Animation: Editing GSAP Values Visually](#animation-editing-gsap-values-visually).
#### Custom CSS
The last style panel, for anything the other seven panels don't cover. Write raw CSS property/value pairs directly, they apply straight to the selected element, the same as if you'd typed them in a stylesheet. Use this as an escape hatch for a one-off property the visual panels don't expose yet, instead of switching to the Code tab for a single line.
### Animation: Editing GSAP Values Visually
**What GSAP is.** GSAP (GreenSock Animation Platform) is a widely used JavaScript animation library for building smooth, high-performance motion, scroll effects, hover states, staggered reveals, and similar interactions.
**Generating a GSAP animation with AI Chat.** In the Composer's Chat tab, connect your CLI tool and describe the section along with the animation you want, GSAP ScrollTrigger effects, parallax, reveals, and so on.
<Callout kind="tip">
**Example prompt:** "Create a clean About Us section with an image, heading, description, and statistics. Add GSAP ScrollTrigger animations with image parallax and smooth content reveals."
</Callout>
Once the section is generated, switch to the Editor tab's Developer mode. Its **Animation** panel, which sits in the style panel list right after Effects and before Custom CSS, now reflects that the section animates: **"This section does animate. Extract its values to get controls,"** with an **Extract N values from the code** button, the count matches how many animation values UiChemy found.
<Callout kind="warning">
Extracting and editing values from this panel is a **Pro** feature. On the free plan the animation still runs normally on the live site, but the Extract button and the value fields are locked behind an upgrade prompt, you'd need to open the Code tab and edit the JavaScript by hand instead.
</Callout>
<Callout kind="tip">
This works the same way for a Hero section, a Sign-Up Form, or any other section, describe the GSAP animation you want when you generate it, then use the Animation panel afterward to extract and customize its values.
</Callout>
<Steps>
<Step title="Click Extract to see the detected values" icon="search" title-type="h3">
A **Found in the Code** checklist appears, listing every GSAP property UiChemy detected, grouped by the element or timeline step it belongs to, things like Ease, Repeat, Yoyo, Scale, and Duration, each with its current value and a checkbox.
</Step>
<Step title="Choose which values to extract" icon="list-checks" title-type="h3">
Every value starts checked except ones UiChemy can't safely turn into a field. Uncheck any others you don't want as a control, then click **Add N options** (the count updates as you check or uncheck) to confirm.
<Callout kind="tip">
Extracting doesn't change the animation. The values stay exactly as they are, UiChemy just rewrites the code to read them from the new editable block, so nothing changes until you actually adjust a field.
</Callout>
</Step>
<Step title="See the fields appear" icon="sliders-horizontal" title-type="h3">
The Animation panel now lists the extracted properties as live fields, grouped under a heading like **Whole section**: a dropdown for each Ease value, and number inputs (with a unit like `s` where relevant) for Duration, Repeat, and Scale.
If you left some detected values unchecked, or the section has more than one animation, an **Extract N values from the code** button stays at the bottom of the panel so you can pull in the rest later.
</Step>
<Step title="Change a value" icon="pencil" title-type="h3">
Open a field, for example **Ease**, and pick from the options UiChemy detected in your code (`none`, `power1.out`, `power1.in`, `power1.inOut`, `power2.out`, and so on). The change applies to the live preview immediately, no need to open the Code tab or edit JavaScript directly.
</Step>
</Steps>
### Scroll Timeline: Retiming Every Scroll Animation on the Page
Once a page has GSAP scroll animations on it, a **Scroll Timeline** *(Beta)* button appears in the bottom-right corner of the front end, next to the canvas toolbar. It's a different way into the same underlying values the Animation panel's Extract flow works with, instead of opening one widget's Animation panel at a time, it shows every scroll-driven animation on the whole page at once, laid out against where you actually scroll to trigger them.
<Callout kind="tip">
Scroll Timeline puts retiming entirely in your hands. Once it's turned on, you can adjust every scroll animation's start point, end point, and easing directly from this panel, no developer or code edit needed. It's a hassle-free way to fine-tune scroll effects yourself.
</Callout>
<Callout kind="warning">
The button only shows up when **Scroll timeline** is on for the site. It's on by default. If you don't see it, go to **UiChemy → Settings → General**, turn on **Scroll timeline**, then click **Save changes**. It also only appears on a page that actually has a GSAP scroll animation running, on any other page there's nothing to show.
</Callout>
<Steps>
<Step title="Open the timeline" icon="panel-bottom" title-type="h3">
Click **Scroll Timeline** in the bottom-right corner. A panel docks along the bottom of the screen, with a ruler across the top marking your actual scroll position in pixels, for example `0160 / 13189px` means you're 160px into a page that scrolls 13,189px total.
</Step>
<Step title="Find an animation" icon="list" title-type="h3">
Animations are grouped by the section they belong to, group headers like **Hero Narrative** or **Testimonials**, with one row per animated element underneath. Each row's bar shows exactly where along the page's scroll range that animation plays.
</Step>
<Step title="Scrub the page" icon="move-horizontal" title-type="h3">
Drag the playhead along the ruler to scroll the live page to that exact position, so you can see precisely what's on screen when an animation starts or ends.
</Step>
<Step title="Retime an animation" icon="maximize-2" title-type="h3">
Drag a bar's left or right edge to change where that animation starts or ends as the visitor scrolls, without touching a single line of code.
</Step>
<Step title="Edit its values" icon="sliders-horizontal" title-type="h3">
Click a bar to open its property popup. The fields shown depend on that specific animation, for example a text reveal might show Ease, Starts at, Letter stagger, and Word hold, while an image effect might show Rise, Duration, Stagger, and Image drift. Adjust what you need, then **Save**.
</Step>
</Steps>
<Callout kind="tip">
This reads live GSAP `ScrollTrigger` data directly off the page, so it reflects animations generated by AI Chat or written by hand in the Code tab, whether or not you've ever opened that widget's own Animation panel to extract values.
</Callout>
### WebGL Animation: Built in the Code Tab
**What it is.** WebGL uses your computer's GPU to render graphics directly in the browser. It's what powers 3D objects that rotate and move, particle effects, and fluid visuals well beyond what plain CSS can do.
**How it's built.** There's no dedicated visual panel for WebGL yet, it's written as code, the same as any other custom section:
<Steps>
<Step title="Write the code" icon="code" title-type="h3">
Whether it comes from an AI connected over MCP, the Composer's AI Chat, or you write it by hand, it lands in the Code tab's **Standard** scope: markup in the HTML panel, styling in the CSS panel, and the WebGL setup in the JS panel.
</Step>
<Step title="Add a 3D library" icon="package" title-type="h3">
Open the Code tab's **Assets** panel, the **Catalog** tab has a dedicated **3D** category, ready to add without hand-typing a CDN URL. See [Loading a Third-Party Library](/uichemy-composer/uichemy-widget/code-tab#loading-a-third-party-library).
</Step>
</Steps>
<Callout kind="info">
Editable controls for tuning a WebGL animation's own values aren't documented yet. This section will be extended once that's available.
</Callout>
### How to Make a Change
1. **Select an element.** Use the layer panel to pick any container, heading, button, link, image, or other element in the section.
2. **Style it.** Shape the selected element through the seven style controls.
3. **Reuse your brand styles.** Apply a synced Figma global class, or create a new one.
4. **Check the live preview.** Every change updates instantly, so you always see the real result.
### Related
<Columns cols={2}>
<Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
Prefer working in code? Drop into raw HTML, CSS, and JS.
</Card>
<Card title="AI Chat Tab" href="/uichemy-composer/uichemy-widget/ai-chat-tab">
Prefer describing the change? Let AI make it for you.
</Card>
</Columns>