App Builder code structure reference

<body>
<p id="docs-hc-snippet" style="display: none;">While App Builder handles underlying code generation through natural language, advanced users can inspect and directly modify application files. This reference guide provides a breakdown of the code tab structure, component layout, and file organization used by App Builder applications.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_pee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_pe">
<table>
<tbody>
<tr>
<td>
<strong>Support</strong>
</td>
<td>Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>

<div class="body">

<p class="p" dir="ltr">While App Builder handles underlying code generation through natural language,
advanced users can inspect and directly modify application files. This reference guide
provides a breakdown of the code tab structure, component layout, and file organization
used by App Builder applications.</p>
<div class="note" id="topic_bcj_zwz_r2c__note_e3s_m4s_mhc">
<span class="notetitle">Note:</span> App Builder uses artificial intelligence to generate code and
configurations based on your inputs. Always thoroughly test apps in a safe environment
before deploying them to production.</div>
<div class="p">This is the third article in a series on using App Builder:<ul class="ul" id="topic_bcj_zwz_r2c__ul_clg_lvx_gkc">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9034700691866" target="_blank">Using App Builder</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11141019633050" target="_blank">Creating, publishing, and managing apps with
App Builder</a></li>
<li class="li">App Builder code structure reference</li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11140889487386" target="_blank">Troubleshooting App Builder</a></li>
</ul>
</div>
<p class="p">This article includes the following sections:</p>
<div class="p">
<ul class="ul" id="topic_bcj_zwz_r2c__ul_jns_lwt_dfc">
<li class="li"><a class="xref" href="#topic_idz_cjt_rgc">Exploring the code tab and app settings</a></li>
<li class="li"><a class="xref" href="#topic_kkj_p3y_gkc">Next steps</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_idz_cjt_rgc">
<h2 class="title topictitle2" id="ariaid-title2">Exploring the code tab and app settings</h2>
<div class="body">
<p class="p">After building and refining your app with App Builder, you can access the <strong class="ph b">Code</strong>
tab to view all code files and folders generated for your app. </p>
<img class="image img-screenshot" id="topic_idz_cjt_rgc__image_wcn_b25_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-code-details-1.png" width="700">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_idz_cjt_rgc__table_ssb_mjt_rgc" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d89e103" style="vertical-align:top;">File or folder</th>
<th class="entry cellrowborder" id="d89e106" style="vertical-align:top;">Description</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">blueprint.md</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">A high-level summary of the app's purpose, architecture,
features, integration details, and key technologies used (such as
React, Zendesk Garden components, and so forth).</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">changelog.md</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">A chronological log of all changes and updates made during the
app's development. Use this to track progress and roll back if
needed using the Generated app pulldown menu or Version in the
conversation history.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">index.jsx</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">This is the main source file for your app. It manages how the app
loads, handles errors, applies themes, and serves as the entry point
for the app functionality.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">mock.js</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">This file contains the mock data used for previewing the app's
appearance and testing UI flows within the App Builder
environment.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">components</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">This folder contains React components that define your app's
interactive user interface and structure.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">styles</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">This folder contains stylesheets to ensure a consistent look and
feel.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e103" style="vertical-align:top;">utils</td>
<td class="entry cellrowborder" headers="d89e106" style="vertical-align:top;">This folder contains helper functions and utility code used
throughout your app. These functions perform tasks such as
formatting dates, filtering data, and so forth. </td>
</tr>
</tbody>
</table>
</div>
<div class="p">Familiarity with your app's code structure lets you diagnose and fix issues more
efficiently. You can:<ul class="ul" id="topic_idz_cjt_rgc__ul_kxy_d1w_5gc">
<li class="li">Track changes over time, using the blueprint and changelog files.</li>
<li class="li">Find and fix issues easily, since you'll know where to look if something
isn't working.</li>
<li class="li">Experiment safely with styles, mock data, or new features.</li>
</ul>
</div>
<p class="p">Even if you don't write code every day, understanding the structure helps you build,
refine, and maintain apps confidently.</p>
<p class="p">For more information about the code, see <a class="xref" href="https://developer.zendesk.com/api-reference/apps/introduction/" target="_blank">Apps</a> in the Zendesk developer docs.</p>
<p class="p">At the top, you'll find the following:</p>
<ul class="ul" id="topic_idz_cjt_rgc__ul_f1h_4mt_rgc">
<li class="li">
<strong class="ph b">Options menu</strong>: Click the three vertical dots to give feedback or download
the conversation as a JSON file. Downloading the conversation is especially
helpful when troubleshooting as it allows your team to review the full
conversation details if a user encounters an error they cannot resolve. You can
also access the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9037913973146-Prompting-guidelines-and-examples-for-App-Builder-EAP" target="_blank">Prompting Guidelines</a> help center
article to view strategies and examples for clearly communicating your needs to
App Builder.</li>
<li class="li">
<strong class="ph b">Generated app</strong>: Use the menu to choose and preview different versions of
your app. This allows you to review specific versions, compare changes, and
restore previous functionality as needed.</li>
<li class="li">
<strong class="ph b">Test</strong>: Click to view and interact with the app in Zendesk Support. Testing
your app here lets you explore and assess its functionality using real data from
your Zendesk account. Any updates or changes you make while testing the app will
be applied to your actual account data. Be sure to verify that the app behaves
as intended before deploying it to your team. If you encounter an error while
testing, it is not resolved automatically upon publishing. Publishing only makes
the app available in your Zendesk account. It does not fix errors. Be sure to
resolve any issues during testing to ensure your app works as expected after
publishing.</li>
<li class="li">
<strong class="ph b">Publish</strong>: When you’re ready to release your app, click <strong class="ph b">Publish</strong>.
This installs the app and makes it available for agents to use.</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_kkj_p3y_gkc">
<h2 class="title topictitle2" id="ariaid-title3">Next steps</h2>
<div class="body">
<p class="p">Learn how to <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11140889487386" target="_blank">troubleshoot App Builder</a> using debugging
techniques and common solutions.</p>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/11140982965914",
"url": "https://support.zendesk.com/hc/en-us/articles/11140982965914",
"headline": "App Builder code structure reference",
"description": "You can explore and modify the code structure of your app using the Code tab to view files, track changes, test functionality, and publish the app when ready.",
"articleSection": "Product help",
"datePublished": "2026-08-17T21:32:21+00:00",
"dateModified": "2026-08-25T21:25:11.896098+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/11140982965914"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script>
</body>