---
name: interpreting-html
description: 'Map rendered/pasted HTML class names back to source code (CSS Modules, Fluent UI, Griffel). USE WHEN: inspecting Playwright DOM output, debugging styles in the browser, or reverse-engineering pasted HTML.'
---
# How to Interpret Pasted HTML Code
When the site is rendered to HTML, you can identify several aspects of the app code via HTML properties:
- Class names with the pattern `_camelCase_123ab_45` correspond to class names applied from CSS Modules.
- For example, `class="_headerWrapper_16arl_15"` in HTML comes from `className={styles.headerWrapper}` in React.
- Class names prefixed with `fui-` are derived from Fluent UI components.
- These are Fluent component root elements. For example, `fui-Button` is a `<Button/>`.
- These are Fluent component sub-elements if they contain the `__` delimiter (BEM style). For example, `fui-Button__icon` comes from `<Button icon={<SomeIcon20Regular/>}/>`.
- Class names that follow the pattern `f123abc` are Griffel-generated atomic classes. Reset classes use an `r…` hash, and sequence classes start with `___`. These are auto-generated and are not authored source identifiers. For example: `class="f11589ue f1q5o8ev f1pdflbu fkfq4zb"`. Do not search these hashes to locate authored styles.
- `data-*` attributes may be authored in React, generated by a framework, or derived from dynamic state. Verify their origin before using them to locate source; do not assume their values are static.
- `aria-label` attributes and text content often appear as literal strings in this prototype, so searching them can help locate the corresponding JSX. For example, `Create agent` appears directly in the agents route. Values may also come from props, data, or localization, so a rendered string does not always have an exact literal match in source.
## Interpreting React Grab Context
The prototype's customized React Grab context is not raw DOM output. It decodes CSS Module class names to their local names and omits Fluent/Griffel classes. A cleaned class such as `brandLink` can therefore correspond to a hashed CSS Module class in the browser.
The `in Component (path:line:column)` entries describe component usage or rendering ancestry, not necessarily component definitions. Components that render passed-in children may appear in the ancestry even when another component created that JSX. Use the reported location to inspect the relevant call site or component body before deciding which source to edit.