System, Method, and Computer Program for Dynamic Rendering of UI Components

The present disclosure relates generally to the field of user interface (UI) design and rendering, and, more specifically, to dynamically rendering UI components in a client application by providing UI and layout metadata to a repository accessible to the client application, thereby enabling UI updates without changing underlying client code.

User interfaces (UI) for web applications, mobile applications, and other digital platforms typically include a variety of UI components. The visual appearance and layout of these UI components are commonly designed using specialized design systems or tools (e.g., FIGMA). Once a designer finalizes a UI component's appearance, a development team traditionally translates the designed component into code for a client application that defines how the UI component is to be rendered on one or more client platforms, such as a web browser, an iOS application, or an Android application. This code is referred to as “static rendering code.”

In conventional processes, the designer's work product serves primarily as a reference from which developers create the static rendering code. This code typically includes fixed style definitions, layout constraints, and platform-specific implementation details. Once created, the static rendering code is integrated into the client application. The integration process involves multiple steps, including code approval, quality assurance (QA) testing, and platform-specific validation. Changes to the design of a UI component require corresponding modifications to the static rendering code. Each time a change is made, the code review, testing, and release processes must be repeated. These dependencies render even minor updates to UI elements time-consuming, costly, and prone to errors.

Various systems and tools exist that can automate some portions of the coding process. For instance, some prior art solutions are capable of taking a designer's UI component and automatically generating the static rendering code needed to implement that component in a client application. While such automation reduces the amount of manual coding, the process still requires the production and distribution of static rendering code. This generated code must be tested, validated, and, when changes occur, updated and re-approved. Thus, automated code generation techniques do not fundamentally eliminate the overhead and complexity associated with the traditional code-based UI design-to-deployment cycle.

The solution set forth in the present disclosure overcomes the above-described limitations by introducing a novel approach that leverages metadata to dynamically render UI components. Unlike the prior art, the solution described herein enables real-time updates to UI components without modifying the client application code. By dynamically rendering UI components based on metadata, the solution eliminates redundant coding processes and significantly accelerates the iteration cycle.

The present disclosure relates to a method, system, and computer program for enabling the dynamic rendering of user interface components using UI and layout metadata stored in a cloud-based repository. A server receives layout specifications and a UI design for a UI component from a designer. The layout specifications specify layout parameters for one or more screen sizes, and the UI design specifies style attributes for the component. The server extracts layout metadata and UI metadata from these inputs and publishes them to a repository along with a timestamp.

Client applications periodically check the repository for updated metadata. If updated metadata is found, the client applications download it, thereby updating their local repositories without changing or redeploying client code. When a client application receives a feed for a page containing a referenced UI component, it dynamically renders the component using a rendering engine and the locally stored metadata. Because the rendering is driven by metadata rather than embedded static rendering code, changes made by the designer to UI elements become immediately available across client platforms, streamlining the design-to-deployment process.

receiving, at a server, layout specifications and a UI design for a UI component from a designer, wherein the layout specifications specify layout parameters for one or more screen sizes; extracting, by the server, layout metadata for the UI component from the layout specifications; extracting, by the server, UI metadata from the UI design, wherein the UI metadata includes style attributes for the UI component; publishing, by the server, the UI metadata and the layout metadata to a cloud repository along with an associated timestamp, wherein: the published metadata is accessible to client applications that render pages with the UI component; if either the UI design or the layout specifications is subsequently updated, the server updates the corresponding metadata in the cloud repository and associates the UI and layout metadata in the cloud repository with a new timestamp; and periodically checking, by a client application, the cloud repository for the latest UI metadata and layout metadata by comparing the timestamp of the UI and layout metadata in the cloud repository with a timestamp of local UI and layout metadata in a local repository of the client application; in response to the cloud repository timestamp being newer updating, by the client application, the local UI metadata, local layout metadata, and associated local timestamp by downloading the latest UI metadata, layout metadata, and associated timestamp from the cloud repository; receiving, at the client application, a feed for a page that includes the UI component; and dynamically rendering the UI component using a rendering engine within the client application based on the UI and layout metadata stored in the local repository, wherein the client application can render UI components created or changed after the client application was built without requiring changes to the client application code as a result of downloading the latest UI and layout metadata for the UI components from the cloud repository. In one embodiment, a method for dynamic rendering of user interface components in a client application comprises the following steps:

The present disclosure relates to a system, method, and computer program for dynamic rendering of UI components in a client application by leveraging metadata extracted from a UI design. The method is performed by a computer system that includes a server, a cloud repository for UI and layout metadata, and client applications.

Terms

As used herein, the term “UI design” refers to a visual representation of one or more user interface components that a designer creates using a design tool (e.g., FIGMA or a similar application), AI, or other suitable means. The UI design captures the stylistic and visual aspects of the user interface component, including, but not limited to, color schemes, fonts, spacing, effects (such as shadows or gradients), and other graphical attributes. The “designer” may be a human, an AI agent, or an AI model.

As used herein, the term “layout specification” refers to a set of parameters or rules that define how a user interface component should be arranged, sized, or positioned in one or more display contexts. The layout specification may specify, for example, the dimensions (width, height), minimum and maximum sizing constraints, relative positioning rules, margins, padding, responsive breakpoints for different screen sizes (e.g., mobile, tablet, desktop), and how the component should adapt to various device orientations. A layout specification may include instructions for flexible or responsive layouts, ensuring that the component's presentation can scale or adjust gracefully as the display environment changes.

1 FIG. illustrates an example system architecture for dynamic rendering of UI component. The figure highlights how UI and layout metadata flow from the design stage to the client application, enabling real-time updates without requiring changes to client code.

105 110 A Design Module () that receives UI component designs, as well as layout specifications, from a designer, typically produced using a design tool such as FIGMA. 120 A UI Metadata Extraction Module () that processes the UI component design and layout specifications to identify and extract UI and layout metadata. 125 A Metadata Publishing Module () that packages extracted UI metadata and layout metadata, associates them with a timestamp, and prepares them for publication to the metadata repositories. 130 A Metadata Bus () that provides an internal communication pathway that facilitates the transfer of extracted metadata between server modules. 155 145 A Feed Generation Module () generates and transmits page feeds to client applications. A page feed specifies the UI components that are in a UI page and uses a “template ID” to reference each unique UI component design. The page feed also includes any data from database () that is included in the UI page. The system includes a server () that receives layout specifications and UI designs from designers and extracts layout and UI metadata. The server includes the following modules:

105 115 145 An Annotation Module () that enables a user to annotate UI components with data attributes that can be mapped to database fields in databaseusing a mapper module (not shown). In one embodiment, the Annotation Module is a plug-in to the Design Module. 145 140 A Database () and Database Service Interface () that store and retrieve additional data or content that may be associated with the UI components. 150 A Content Management Module () that enables a UI page developer to add UI components to a frontend page feed and, if applicable, to associate the mapped UI components with instances of the database objects. The server () may also include several modules that are not necessary for the subject matter of this disclosure, but are disclosed herein for further context of how the methods disclosed herein fit into overall UI page creation:

115 145 140 150 An example of the Annotation Module (), Database (), Database Service Interface (), and Content Management Module () are described in U.S. patent application Ser. No. 17/679,238 titled “System, Method, and Computer Program for Providing an End-to-End Solution for Front End Page Generation,” and filed on Feb. 24, 2022, the contents of which are incorporated by reference as if fully disclosed herein.

160 a Version-Controlled Metadata Repository () that stores and maintains version histories of UI and layout metadata. It enables tracking changes over time and rolling back to previous versions if necessary. 165 185 A Public UI Metadata Repository () that provides client applications with a cloud-based source of the most up-to-date UI and layout metadata. Each entry includes a timestamp () that indicates the recency of the metadata. Client applications access this repository to check if newer metadata versions are available. The system includes the following metadata repositories:

180 170 190 A Local Metadata Repository () that stores previously retrieved UI and layout metadata, as well as a local timestamp (). 175 A Rendering Engine () that dynamically renders UI components on the client side using the locally stored metadata. The system includes client applications (), and each client application includes the following:

When the client application starts or periodically checks for updates, it compares the local timestamp against the repository's timestamp and, if newer metadata exists, downloads and updates its local metadata. By relying on metadata rather than static rendering code, the client application can display updated or entirely new UI components without requiring code changes, thereby streamlining the update and deployment process.

Together, these components enable designers to update UI appearances simply by changing UI and layout metadata at the server level, allowing client applications to incorporate these updates automatically, thus improving efficiency and reducing the need for frequent code releases.

2 FIG. 210 220 230 illustrates a method for extracting and publishing UI and layout metadata. The server receives a UI component design and layout specifications from a designer (). The server extracts layout metadata from the layout specifications (step) and UI metadata from the UI component design (step). The layout specifications may include parameters for various screen sizes, such as mobile and desktop layouts, minimum/maximum dimensions, or responsive breakpoints. The UI component design provides visual attributes, such as text style (e.g., line height, letter spacing, color, typeface, effects, font size, font weight, text alignment, text case, line truncation, and shadow), and styling for buttons, icons, images, text-entry boxes, videos, cards, tags, toggle buttons, and/or dividers (e.g., padding, text line height, text spacing, color, font, effects), and these visual attributes are part of the UI metadata. UI metadata may also include general location and size properties.

240 250 The combined UI and layout metadata for the UI component, along with a timestamp and a template ID (which uniquely identifies the component design), is published to a version-controlled repository (). This allows the system to track changes to the metadata over time, providing a historical record of design updates. In addition to storing the metadata in the version-controlled repository, the server also publishes the metadata and associated timestamp to a public, cloud-based repository accessible to client applications (). This public repository acts as a central source of truth for the most recent UI and layout metadata, allowing clients to fetch updates as needed.

3 FIG. 310 320 330 340 350 360 illustrates a client metadata update process. When a client application starts up (step), it retrieves the latest timestamp from the public repository to determine if metadata updates are available (). The client application compares this latest timestamp with its locally stored timestamp in the local metadata repository (). If the public repository's timestamp is newer (step), it indicates that the server has published updated UI and/or layout metadata, reflecting recent design changes by the designer. In such a case, the client application downloads the updated metadata, including UI attributes (such as colors, fonts, and effects for text or buttons) and layout parameters (such as responsive breakpoints and positioning rules), and stores them in the local metadata repository along with the new timestamp (). If the public timestamp is not newer, the client application retains its current metadata. This comparison and update process is repeated periodically (step), ensuring that even after the client application was initially built and deployed, it remains synchronized with the latest design specifications at all times.

4 FIG. 410 420 430 illustrates a client dynamic UI rendering process. The client application receives a page feed from the server that includes one or more UI components, referenced using template IDs (). The page feed may also include associated data content, which may be injected into UI components as described in U.S. patent application Ser. No. 17/679,238, incorporated by reference herein. For each referenced UI component in the page feed, the client application retrieves the corresponding UI and layout metadata from its local metadata repository (). Because this metadata is periodically updated, it may reflect design modifications made after the client application was originally deployed. The client application then passes the retrieved UI metadata, layout metadata, and any associated data content (e.g., text strings, images, or database-driven values) to the rendering engine (). The rendering engine interprets the metadata and assembles the UI component accordingly (also including any associated data content). For example, if the UI component includes text elements, the rendering engine applies the specified font, spacing, color, and effects. For button elements, the rendering engine uses the defined padding, text style, line height, text spacing, and effects to ensure that the button visually matches the most recent design.

440 450 The rendering engine dynamically renders the UI component on the page using this metadata-driven approach (). Because the rendering is driven by metadata instead of hard-coded style attributes within the client application's compiled code, the client application can reflect newly created or updated UI components automatically. The page is then displayed to the user with the dynamically rendered UI component that incorporates the latest design updates ().

1 4 FIGS.- The methods described with respect toare embodied in software and performed by a computer system (comprising one or more computing devices) executing the software. A person skilled in the art would understand that a computer system has one or more memory units, disks, or other physical, computer-readable storage media for storing software instructions, as well as one or more processors for executing the software instructions.

As will be understood by those familiar with the art, the invention may be embodied in other specific forms without departing from the spirit or essential characteristics thereof. Accordingly, the above disclosure is intended to be illustrative, but not limiting, of the scope of the invention, which is set forth in the following claims.