> For the complete documentation index, see [llms.txt](https://docs.zontroy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zontroy.com/zontroy-offline-code-generator/zontroy-ai-offline-file-types/zontroy-ai-offline-single-file.md).

# 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 %}