# Table of Contents - [Overview | UIParser Docs](#overview-uiparser-docs) - [Layout | UIParser Docs](#layout-uiparser-docs) - [Widgets | UIParser Docs](#widgets-uiparser-docs) - [Checkbox | UIParser Docs](#checkbox-uiparser-docs) - [Slider | UIParser Docs](#slider-uiparser-docs) - [Combo | UIParser Docs](#combo-uiparser-docs) - [Searchbar | UIParser Docs](#searchbar-uiparser-docs) - [Tab | UIParser Docs](#tab-uiparser-docs) - [Child | UIParser Docs](#child-uiparser-docs) - [Fonts | UIParser Docs](#fonts-uiparser-docs) - [Subtab | UIParser Docs](#subtab-uiparser-docs) - [Content | UIParser Docs](#content-uiparser-docs) - [Frames | UIParser Docs](#frames-uiparser-docs) - [Images | UIParser Docs](#images-uiparser-docs) - [Example file | UIParser Docs](#example-file-uiparser-docs) - [Tabs list | UIParser Docs](#tabs-list-uiparser-docs) - [Subtabs list | UIParser Docs](#subtabs-list-uiparser-docs) - [Styles | UIParser Docs](#styles-uiparser-docs) --- # Overview | UIParser Docs Incorrect naming leads to skipped widgets or parsing errors. UIParser recursively parses each object within the main frame named **"menu"**. However, certain elements are explicitly designated and must have strictly defined names in order to be correctly recognized and processed by the system. [NextLayoutchevron-right](https://uiparser.gitbook.io/uiparser-docs/layout) Last updated 2 hours ago --- # Layout | UIParser Docs The main frame must be named **"menu"** Element in Figma Name Frame menu [PreviousOverviewchevron-left](https://uiparser.gitbook.io/uiparser-docs) [NextWidgetschevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets) Last updated 1 hour ago --- # Widgets | UIParser Docs [Checkboxchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/checkbox) [Sliderchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/slider) [Combochevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/combo) [Childchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/child) [Searchbarchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/searchbar) [Tabchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/tab) [Subtabchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/subtab) [Tabs listchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/tabs-list) [Subtabs listchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/subtabs-list) [PreviousLayoutchevron-left](https://uiparser.gitbook.io/uiparser-docs/layout) [NextCheckboxchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/checkbox) --- # Checkbox | UIParser Docs **STRUCTURE** Element in Figma Name Text label**\*** required Frame \*icon\* Frame bb**\*** required **STATES** State Widget name Disabled checkbox Hovered checkbox-hovered Enabled checkbox-enabled **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FoB8mMt6BTX9yDrvhYMZP%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3De9628bf6-863d-4818-8d7e-121c7d4db53d&width=768&dpr=4&quality=100&sign=d9042c34&sv=2) [PreviousWidgetschevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets) [NextSliderchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/slider) Last updated 1 hour ago --- # Slider | UIParser Docs **STRUCTURE** Element in Figma Name Text label**\*** required Frame \*icon\* Text value**\*** required Frame bb**\*** required Frame fill**\*** required Frame grab Ellipse \* STATES State Widget name Idle slider Hovered slider-hovered Active slider-active **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252F0F5dFjdxDMsjV2LtV0Km%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D4fe5344a-466e-417d-9107-4d8a3a13f239&width=768&dpr=4&quality=100&sign=ae5f5c17&sv=2) [PreviousCheckboxchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/checkbox) [NextCombochevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/combo) Last updated 1 hour ago --- # Combo | UIParser Docs **STRUCTURE** Element in Figma Name Text label**\*** required Frame \*icon\* Frame bb**\*** required Text value**\*** required Frame arrow **STATES** State Widget name Idle combo Hovered combo-hovered Active combo-active **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FsOMcSDp6rxiFQ9VWh38u%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D8524d9c2-a049-4197-b2ba-867d21837320&width=768&dpr=4&quality=100&sign=b9fbcdbc&sv=2) [PreviousSliderchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/slider) [NextChildchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/child) Last updated 1 hour ago --- # Searchbar | UIParser Docs A searchbar must be named **"searchbar"** **STRUCTURE** Element in Figma Name Frame searchbar **EXAMPLE OF OUT CODE** Copy widgets->textinput( "##searchbar", g_search->buf, sizeof( g_search->buf ), { .padding = vec2{ 14, 14 }, .icon = I_SEARCH, .hint = "Search for 107 functions...", [PreviousChildchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/child) [NextTabchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/tab) Last updated 1 hour ago --- # Tab | UIParser Docs **STRUCTURE** Element in Figma Name Text label Frame \*icon\* **STATES** State Widget name Selected tab-selected Hovered tab-hovered Not selected tab **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FfrGoDjNsrXiICt3ocKiU%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3Dc593b203-18de-4f87-a1be-e5dea2f2eec4&width=768&dpr=4&quality=100&sign=66e4b587&sv=2) [PreviousSearchbarchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/searchbar) [NextSubtabchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/subtab) Last updated 1 hour ago --- # Child | UIParser Docs **STRUCTURE** Element in Figma Name Frame header Frame \*icon\* Text name Frame content**\*** required **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FaqngWjWWvQCEcoBLeWIU%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D01a8e8ec-9fda-4172-adf2-626fe1e3ee82&width=768&dpr=4&quality=100&sign=bbfc6970&sv=2) [PreviousCombochevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/combo) [NextSearchbarchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/searchbar) Last updated 1 hour ago --- # Fonts | UIParser Docs UIParser configures fonts together with all font sizes used within the interface. All detected font families and their corresponding size variations are automatically collected and applied during the parsing process. [PreviousFrameschevron-left](https://uiparser.gitbook.io/uiparser-docs/frames) [NextImageschevron-right](https://uiparser.gitbook.io/uiparser-docs/images) Last updated 2 hours ago --- # Subtab | UIParser Docs **STRUCTURE** Element in Figma Name Text label Frame \*icon\* **STATES** State Widget name Selected subtab-selected Hovered sutab-hovered Not selected subtab **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252Fk8Q2Hwrug8zVthrI2kqF%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3Dd1d939d1-0895-472b-a0a2-e18f6fb6413c&width=768&dpr=4&quality=100&sign=83eeb7a8&sv=2) [PreviousTabchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/tab) [NextTabs listchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/tabs-list) Last updated 1 hour ago --- # Content | UIParser Docs Element in Figma Name Frame content A Frame of content must be named **"content"** and in expands in Copy PushStyleVar( ImGuiStyleVar_Alpha, GImGui->Style.Alpha * widgets->nav.tab_anim * widgets->nav.subtab_anim ); PushStyleVar( ImGuiStyleVar_WindowPadding, vec2{ 14, 14 } ); PushStyleVar( ImGuiStyleVar_ItemSpacing, vec2{ 14, 14 } ); BeginChild( "content", { 0, 0 }, ImGuiChildFlags_AlwaysUseWindowPadding, ImGuiWindowFlags_NoBackground | ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoScrollWithMouse ); { widgets->child.smoothscroll( ); widgets->nav.drawpage( ); } EndChild( ); PopStyleVar( 3 ); **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252Fs2vcy21YAkOYLXKqWbHb%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D3441c24d-7805-4b38-8c9c-189d69bbd232&width=768&dpr=4&quality=100&sign=94038864&sv=2) [PreviousSubtabs listchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/subtabs-list) [NextFrameschevron-right](https://uiparser.gitbook.io/uiparser-docs/frames) Last updated 1 minute ago --- # Frames | UIParser Docs Frames that are not explicitly predefined or handled by the parser are processed as generic child containers and parsed using the following structure: Copy BeginChild( frameName, frameSize, flags ); { // content } EndChild( ); [PreviousContentchevron-left](https://uiparser.gitbook.io/uiparser-docs/content) [NextFontschevron-right](https://uiparser.gitbook.io/uiparser-docs/fonts) Last updated 1 hour ago --- # Images | UIParser Docs UIParser converts image assets into binary data and stores them in a separate file. The images are then initialized and rendered at runtime based on the generated binary resources. [PreviousFontschevron-left](https://uiparser.gitbook.io/uiparser-docs/fonts) [NextStyleschevron-right](https://uiparser.gitbook.io/uiparser-docs/styles) Last updated 2 hours ago --- # Example file | UIParser Docs This page provides a reference Figma design file that demonstrates the correct structure, naming conventions, and layout organization required for proper UIParser processing. The example file illustrates: * Proper frame hierarchy and nesting * Correct naming of predefined and custom elements * Usage of required rectangles for color configuration * Font styles and size variations * Image placement and asset preparation The provided design serves as a canonical example and should be used as a guideline when creating new UI layouts intended for parsing. By following the structure shown in this file, you can ensure full compatibility with UIParser and avoid parsing inconsistencies or missing configurations. ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252Fxka2hhAYGOhYuTW6up3I%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3Db27d8880-1031-4f14-9bf9-34618e7b68e6&width=768&dpr=4&quality=100&sign=e4fe7d07&sv=2) **Download the example Figma file using the button below.** [Download file](https://uiparser.com/download/fig) [PreviousStyleschevron-left](https://uiparser.gitbook.io/uiparser-docs/styles) Last updated 0 minutes ago --- # Tabs list | UIParser Docs A list of tabs must be named **"tabs"** and it expands in Copy widgets->nav.drawtabs( ); **EXAMPLE OF DRAWTABS CODE** Copy void c_widgets::widget_nav::drawtabs( ) { SetCursorPos( vec2{ 14, 44 } ); BeginChild( "tabs", vec2{ 168, 0 }, 96, 128 ); { // "tabs" frame content } EndChild( ); tab_anim = ImLerp( tab_anim, tab_animdest, GetIO( ).DeltaTime * 17 ); subtab_anim = ImLerp( subtab_anim, subtab_animdest, GetIO( ).DeltaTime * 17 ); if ( tab_anim < 0.05f ) { tab_animdest = 1.f; current = next; } if ( subtab_anim < 0.05f ) { subtab_animdest = 1.f; tabs[current].current = tabs[current].next; } } **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FL9V4GVDDaPzjUhTDupYg%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D7ad23a41-faaf-4512-b471-5f3688c644e5&width=768&dpr=4&quality=100&sign=73c8951c&sv=2) [PreviousSubtabchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/subtab) [NextSubtabs listchevron-right](https://uiparser.gitbook.io/uiparser-docs/widgets/subtabs-list) Last updated 1 hour ago --- # Subtabs list | UIParser Docs A list of subtabs must be named **"subtabs"** and have this structure Copy // Frame "subtabs": // -- Frame "list": // ---- Subtabs It expands in Copy widgets->nav.drawsubtabs( ); **EXAMPLE OF DRAWTABS CODE** Copy void c_widgets::widget_nav::drawsubtabs( ) { if ( tabs[current].subtabs.empty( ) ) return; PushStyleVar( ImGuiStyleVar_Alpha, GImGui->Style.Alpha * tab_anim ); SetCursorPos( vec2{ 14, 14 } ); BeginGroup( ); { // "list" frame content } EndGroup( ); PopStyleVar( ); } **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252Ft9tL9JKRrjBFZL6PSl5k%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D3eeebe11-3a8a-4f21-bbf6-3b0e01ab83ef&width=768&dpr=4&quality=100&sign=2448abec&sv=2) [PreviousTabs listchevron-left](https://uiparser.gitbook.io/uiparser-docs/widgets/tabs-list) [NextContentchevron-right](https://uiparser.gitbook.io/uiparser-docs/content) Last updated 1 hour ago --- # Styles | UIParser Docs To ensure that a color configuration is registered in the table, a dedicated **Rectangle** element may be created and filled with the required color. This element must be named using the `pcol_*` naming convention. UIParser detects such elements and automatically extracts the color value for inclusion in the configuration table. **EXAMPLE** ![](https://uiparser.gitbook.io/uiparser-docs/~gitbook/image?url=https%3A%2F%2F1372447566-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FBz0povx2JtdzS0hYcsci%252Fuploads%252FPpsLw4asaClMD68KfPwt%252F%25D0%25B8%25D0%25B7%25D0%25BE%25D0%25B1%25D1%2580%25D0%25B0%25D0%25B6%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5.png%3Falt%3Dmedia%26token%3D9f960dfe-2c24-4427-bb4f-7abdaf4a87f8&width=768&dpr=4&quality=100&sign=dcb93976&sv=2) [PreviousImageschevron-left](https://uiparser.gitbook.io/uiparser-docs/images) [NextExample filechevron-right](https://uiparser.gitbook.io/uiparser-docs/example-file) Last updated 1 hour ago ---