# Zontroy AI Offline Single File

*Zontroy Offline  has 3 file types to generate code.*

### *<mark style="color:blue;">zsif</mark>*

<figure><img src="/files/ZQruWOdxMRxMjiRRqlUc" alt=""><figcaption></figcaption></figure>

*Zontroy Single File is used to generate lines of code inside a single file. It uses .zsif extension.*

<figure><img src="https://zontroy.com/wp-content/uploads/2022/03/zsif.png" alt=""><figcaption><p>Multiple entities to one code file</p></figcaption></figure>

### *<mark style="color:blue;">File Naming Format</mark>*

```
[file_name].[file_extension].zsif
```

### *<mark style="color:blue;">File Naming Example</mark>*

```
MyCodeFile.java.zsif
```

### *<mark style="color:blue;">Code Example</mark>*

*A simple usage example of zsif file in React.js.*

<pre class="language-tsx"><code class="lang-tsx"><strong>// PrivateRoutes.tsx.zsif
</strong>import {Suspense} from 'react'
import {Route} from 'react-router-dom'

zg-for(((zg-item:::[[[zg-entities]]]))){{{
const [[[zg-item...zg-name]]]Page = lazy(() => import('../modules/zg-lower(((zg-item...zg-name)))/zg-singularize(((zg-item...zg-name)))Page'))   
}}}

zg-for(((zg-item:::[[[zg-entities]]]))){{{
  &#x3C;Route
    path='crafted/zg-pluralize(((zg-lower(((zg-item...zg-name))))))/zg-lower(((zg-item...zg-name)))/*'
    element={
      &#x3C;SuspensedView>
        &#x3C;[[[zg-item...zg-name]]]Page />
      &#x3C;/SuspensedView>
    }
  />
}}}
</code></pre>

### Output Example

```tsx
// PrivateRoutes.tsx.zsif
import {Suspense} from 'react'
import {Route} from 'react-router-dom'
    

const cityPage = lazy(() => import('../modules/city/cityPage'))   

const countryPage = lazy(() => import('../modules/country/countryPage'))   

const customerPage = lazy(() => import('../modules/customer/customerPage'))   



  <Route
    path='crafted/cities/city/*'
    element={
      <SuspensedView>
        <cityPage />
      </SuspensedView>
    }
  />

  <Route
    path='crafted/countries/country/*'
    element={
      <SuspensedView>
        <countryPage />
      </SuspensedView>
    }
  />

  <Route
    path='crafted/customers/customer/*'
    element={
      <SuspensedView>
        <customerPage />
      </SuspensedView>
    }
  />

```

### *<mark style="color:blue;">Generate in Zontroy IDE</mark>*

*Create an Empty Zontroy Project using menu File -> New Project -> Create (Empty Zontroy Project).*

<figure><img src="/files/pQpkARhODg4xNQFNy1Jc" alt="" width="255"><figcaption></figcaption></figure>

<figure><img src="/files/YJuQRfsZQUh3M62eqXQf" alt="" width="365"><figcaption></figcaption></figure>

<figure><img src="/files/rp2OxHZ6VApJc9jPdH1i" alt="" width="373"><figcaption></figcaption></figure>

*Add a zsif file into the project*

<figure><img src="/files/0DYArBnjlqP5DWjzGPAl" alt="" width="324"><figcaption></figcaption></figure>

*Name the file as PrivateRoutes.tsx.zsif or anything you want and click Add File*

<figure><img src="/files/FwfpdYzRe3iaSHqTPHjv" alt="" width="371"><figcaption></figcaption></figure>

<figure><img src="/files/Qe0mgXV1aIog7374Li4a" alt="" width="211"><figcaption></figcaption></figure>

*Open newly created zsif file, write the code provided above as an example and save it.*

<figure><img src="/files/0j0fMiBvVSuBMhadoxyj" alt="" width="336"><figcaption></figcaption></figure>

*Click blue generate button and see the output*

![](/files/00IKU8Qf04XvI5I85aVc)

![](/files/a3SMdLQIRPGqCWHX4yUJ)

{% hint style="info" %} <mark style="color:blue;">**Good to know:**</mark> *In daily programming, routing, object mapping, dependency injection and context management are sample concepts which for using a single code file.*
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zontroy.com/zontroy-offline-code-generator/zontroy-ai-offline-file-types/zontroy-ai-offline-single-file.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.