> ## Documentation Index
> Fetch the complete documentation index at: https://docs.t3planet.de/en/latest/llms.txt
> Use this file to discover all available pages before exploring further.

# Screenshots

> A visual tour of Tonictypes: installed extensions, storage folder, datatype, generated record form and the Record List output in the frontend.

Quick visual tour. Full steps: [Introduction](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/Introduction/Index.md).

**Where:** fields / datatypes / records → **Records** on a storage folder. Plugins → **Page** module → **Tonictypes**.

### 1. Extensions

![Core and Pro](https://mintcdn.com/t3planet/o3JLbgRgJ_cVW1JX/en/latest/TonicTypes/Introduction/Images/extension_list.webp?fit=max\&auto=format\&n=o3JLbgRgJ_cVW1JX\&q=85\&s=9b12d97b753461dfadd3572d8b0be6a4)

*`tonictypes` + `tonictypes_pro`*

Both extensions installed. Core alone is enough for standard record types; Pro appears only on licensed sites.

### 2. Storage folder

![Records, datatype, fields](https://mintcdn.com/t3planet/o3JLbgRgJ_cVW1JX/en/latest/TonicTypes/Introduction/Images/list_records.webp?fit=max\&auto=format\&n=o3JLbgRgJ_cVW1JX\&q=85\&s=355c1047ceb83a95e83a23ab76756fa1)

*Demo Articles · Datatype · Fields*

One storage folder holds everything that belongs to a record type: the field definitions, the datatype that groups them, and the records editors create.

### 3. Datatype

![Datatype General](https://mintcdn.com/t3planet/AbRBjG4tMFN7z63t/en/latest/TonicTypes/Screenshots/Images/datatype_general.webp?fit=max\&auto=format\&n=AbRBjG4tMFN7z63t\&q=85\&s=c920bb052640ecd3ca95776ef75e17fd)

*Name, table, classes*

The datatype's **General** tab shows the generated table and PHP class and whether they still match the assigned fields — see [Creating a Datatype](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/GettingStarted/CreatingADatatype/Index.md).

### 4. Record edit

![Record form](https://mintcdn.com/t3planet/h0WktjgehBjAWLlF/en/latest/TonicTypes/Screenshots/Images/record_edit_1.webp?fit=max\&auto=format\&n=h0WktjgehBjAWLlF\&q=85\&s=ba201fd310618d3aaee6fbd83730861b)

*Form from your fields*

Editors see a normal TYPO3 record form. Each field of the datatype becomes one input, in the order set on the datatype's **Fields** tab.

### 5. Frontend

![List preview](https://mintcdn.com/t3planet/h0WktjgehBjAWLlF/en/latest/TonicTypes/Screenshots/Images/plugin_preview.webp?fit=max\&auto=format\&n=h0WktjgehBjAWLlF\&q=85\&s=478e85ead58431802d86f5bd2330258d)

*Record List output*

A **Record List** plugin on a page renders the records with a Fluid template — see [Frontend Plugins](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/FrontendPlugins/Index).

### 6. Pro UI

Toolbar, DocHeader, Pro fields → [Tonictypes Pro](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/Professional/Index.md)

## Related

[Installation](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/Installation/Index.md) · [Getting Started](https://docs.t3planet.de/en/latest/en/latest/TonicTypes/GettingStarted/Index)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.