--- title: Editing dynamic resources slug: experience/editing-dynamic-resources docTags: createdAt: 2025-12-24T09:35:23.220Z --- The Purple Experience Builder is crafted for configuring the behavior and design of apps and websites. To achieve that, you will define views and use various components and data sources to build the behavior you want to have. For styling, you will use SCSS, and for custom functionality, PXP offers multiple ways to integrate and use custom-built scripts from different sources. To ensure data security and to not be dependent on third parties, we recommend only sideloading any data when it's inevitable. Note that any resources being sideloaded will not be available in offline cases. ## Layout and main functionality The builder consists of three main panes: a *file explorer* to the left, the *editing window* in the center, and the *preview pane* to the right. An app bar at the top shows the currently selected app's name, holds a burger menu, and allows you to switch preview functionality. ![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/rPoy6zyt4wOZdPFQ3SfMv-20260105-113017.png "The initial view of the builder") ### File Explorer The *file explorer pane* may be collapsed to the left. The search provided here is only scoped for the current folder. It will neither look for all dynamic resources nor search recursively in folders below. For details on the folder structure, see⁣[Structure of Dynamic resources](docId\:oKsCiTBqBkOQv_8jEoW_5) . ### Editing Pane While no editor is opened, the *main editing pane* provides configurable quick-links to allow fast access to any files frequently used. ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/KnLA4rv_uXboD6DVNIX_V-20260105-113423.png" size="62" width="1450" height="437" position="center" caption="Quick Links in Editing Pane" showCaption="true"} ### Preview Pane The right-hand-side *preview pane *may be collapsed to the right. It provides some **action buttons** too, from left to right: - Open the classic preview in a new browser window. This simulates an Android device and only provides a rule-of-thumb review. We are aiming to deprecate it. - Review the schema currently used in the set PXP Version - A toggle to switch the editing mode in the main window: you may either use our JSON editor with some interface or directly edit the JSON files. - A button to toggle the legacy preview ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/jz7GBSoF7KtwwmbcQ2IfG-20260105-113309.png" size="46" width="403" height="381" position="center" caption="Action Buttons" showCaption="true"} Its main area provides links to preview your uncommitted changes on default domains or custom domains if configured. (Image depicts default domain only.) Using the tabs, you may navigate to retrieve QR codes for previewing the changes in-app. See⁣ [Preview your changes](docId\:kEi5umkhUo3W07PSoXDQU) for details. A bottom pane provides insights on the pipelines configured on this builder instance. You may retrieve any error messages or manually run them from here, too. See [Builder Pipelines](docId\:eIUUvJ-E1Ci9x9dDW2zD_) for further information. ## Editing PXP Builder provides a JSON editor utilizing the available schema of the set PXP version. While using the editor, some erroneous configurations are prevented, as the schema gets validated. You may switch to a text editing mode to use search and replace functionality. ### Editing Views For details on the creation of views, see [View configuration](docId\:kxmX0xDffeLDjq7Z4lqLX). The editor typically structures configurations in components of different types. To create structures that may be maintained easily, one may use the section component. Depending on the component, a corresponding data source may be set up. Data sources can also be scoped for the view and accessed through the context. This allows an efficient retrieval of data on a per-view basis. Components usually are configured with a class to ensure proper styling and are equipped with content, that will be displayed. This can also be additional sections. ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/zq9mvX4AxWc4vfMt4lORL-20251229-130704.png" size="40" width="806" height="756" position="center" caption="An empty section" showCaption="true"} Also, the dropdown menu on the top right allows the setup of further attributes and settings per component. The eptions available may vary, depending on the chosen component. ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/gDERclVSbnOJcwricdS8Q-20251230-090033.png" size="40" width="908" height="642" position="center" caption="Example of attributes that may be chosen for a component" showCaption="true"} You may also retrieve and edit the json of a component directly from this view, for this, you can utilize the pen icon at the component level. :::hint{type="info"} The editing of data sources utilizes the same procedures. You may add filters here, too, to get exactly the content you need. ::: ### Editing JS The builder provides an editor interface for crafting scripts to create custom functionality. We utilize the monaco editor for this purpose. ::Image[]{src="https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/DI9rvS_azudoIEOly2rfk-20260105-114720.png" size="60" width="2940" height="1602" position="center" caption="Example of a JS File" showCaption="true"} ## Merging or pushing changes After you have reviewed your changes on the preview, you can merge or push them. They will then appear in preview apps and websites utilizing the `preview=true` query parameter. ### Merge When you merge your changes, **any file** that you have changed will be completely overwritten. Merging does not remove any files, so if you want to delete something, you need to push. ### Push When pushing, all files are completely overwritten. Also, deletions are respected. ### How To To merge or push your changes, navigate to the top-right burger menu: ::Image[]{src="https://images.tango.us/workflows/883f8db9-1edf-4715-a16c-4801b2992180/steps/90c10075-f5c7-494e-9cac-8d9589093eb9/72c12da9-fb3d-41cc-aee9-c967b37e1a6d.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=1143&mark-y=7&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz00NCZoPTQ0JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" size="50" width="1200" height="789" position="center" alt="Click on the burger menu" showCaption="false"} Click on 'Update Dynamic Resources' ::Image[]{src="https://images.tango.us/workflows/883f8db9-1edf-4715-a16c-4801b2992180/steps/7a831165-6e26-43cd-ac92-087b00f45025/a11c96ad-3625-4ece-a9d2-cc553ed5c1be.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=826&mark-y=120&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0zNTYmaD00NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="791" position="center" alt="Click on 'Update Dynamic Resources'" showCaption="false"} In the text field, name your changes, e.g. 'changed logo 23.08.23' ::Image[]{src="https://images.tango.us/workflows/883f8db9-1edf-4715-a16c-4801b2992180/steps/3f2291c3-0c86-4e2d-8a74-d0319386ffac/ff1b83a5-174e-4ea0-933e-309a684a2864.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=9&mark-y=445&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xMTc0Jmg9NTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" size="80" width="1200" height="569" position="center" alt="Name your changes" showCaption="false"} 10\. Click on 'Merge all files to preview' or 'Push all files to preview'. ::Image[]{src="https://images.tango.us/workflows/883f8db9-1edf-4715-a16c-4801b2992180/steps/01471020-b128-4352-95c3-24a60e70d1af/e4a9ee83-072a-4469-874d-5bedd5e597ac.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=365&mark-y=502&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0zNDQmaD01MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" size="80" width="1200" height="564" position="center" alt="Click on 'Merge all files to preview'" showCaption="false"} After the merging is done, you can open your preview app on your mobile device to verify your changes on the device. We recommend to always do a quick check on a real device. After successful QA, you can deploy your changes to the production environment.