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

# Create Your Own Presentation Templates in Presenton

> Want to design your own presentation templates in Presenton? This guide walks you through the full process from setup to seeing your template live in the app.

## Step 1: Set Things Up

Let’s start by getting Presenton up and running locally.

### Clone the Repository

Open your terminal and run:

```bash theme={null}
git clone https://github.com/presenton/presenton.git
cd presenton
```

### Start the Server

Now, fire up Presenton using Docker:

```bash theme={null}
docker compose up development --build
```

Once it’s running, open your browser and visit:

[http://localhost:5000](http://localhost:5000)

If you see the Presenton interface, you’re good to go!

## Step 2: Understand How Template Work

Presenton organizes slide designs into **templates**. Each template contains one or more slide layouts and some metadata that describes the group.

### Where Templates Live

All templates are located in:

```
servers/nextjs/presentation-templates
```

Navigate there by running:

```bash theme={null}
cd servers/nextjs/presentation-templates
```

Inside this folder, you’ll see multiple subdirectories — each one is a **template**.

### Explore a Template

Pick any template folder and open it. Here’s what you’ll typically find inside:

* `settings.json`: This file contains basic information about the template, such as its description and behavior.
* One or more `.tsx` files: Each `.tsx` file defines the layout of a single slide, including its schema (used by the AI to generate content) and the React component that renders the slide visually.

You can think of each `.tsx` file as a "slide template" that Presenton can use when building a presentation.

### Preview Templates in the UI

To see all available presentation templates and their slide layouts in your browser, go to:

[http://localhost:5000/template-preview](http://localhost:5000/layout-preview)

This preview page gives you a visual overview of each presentation template and lets you inspect how each slide will look when used.

When generating a presentation, you’ll be able to pick from these templates in the **Outlines and Templates** step of the process.

## Step 3: Build Your Own Template

Now it’s time to roll up your sleeves and create a custom template of your own.

### Create a New Directory

In the `presentation-templates` folder, make a new directory. This will be your template.

```bash theme={null}
mkdir my-presentation-template
cd my-presentation-template
```

> 💡 The name you give this folder will appear in the UI as the template name.

### Add a `settings.json` File

Create a file named `settings.json` and paste the following:

```json theme={null}
{
  "description": "This is my presentation template",
  "ordered": false,
  "default": false
}
```

You can edit the description to something more personal if you'd like. Here's what these fields do:

* `description`: Basic description of this template.
* `ordered`: We will talk about this later. Keep it false for now.
* `default`: If `true`, this template will be used by default when generating a presentation.

## Step 4: Add Your First Slide Layout

Let’s create an actual slide template now.

### Create a `.tsx` File

```bash theme={null}
touch SlideLayout1.tsx
```

Then open the file, and copy content from the template at:

```
presentation-layouts/ExampleSlideLayoutTemplate.tsx
```

Paste it into your file.

## Step 5: Define Schema & Component

Each slide layout needs two parts:

1. A **schema** (Zod) — tells the AI what kind of data this slide expects.
2. A **component** (React) — renders the slide visually.

Let’s keep it simple with just a title and a description.

### Schema

```ts theme={null}
const Schema = z.object({
  title: z.string().min(3).max(50).default("Slide Layout Title").meta({
    description: "Main title of the slide"
  }),
  description: z.string().min(10).max(180).default("Slide Layout Description").meta({
    description: "Content description of the slide"
  })
});
```

> ✨ Tip: The `default` values help render the preview, and `meta.description` helps the AI generate better content.

### SlideComponent

```tsx theme={null}
const SlideComponent = ({ data }: { data: Partial<SchemaType> }) => {
  return (
    <div className="h-full w-full flex flex-col justify-center items-center p-10">
      <h1 className="text-4xl font-bold">{data.title}</h1>
      <p className="mt-6">{data.description}</p>
    </div>
  );
};
```

You can customize this however you like.

## Step 6: Preview Your Template

Time to see your creation in action!

Visit:

[http://localhost:5000/template-preview](http://localhost:5000/layout-preview)

You should now see your presentation template listed. Click on it, and your new slide layout should appear.

Boom — that’s it! Your template is now ready to use\
You can now select this new template in **Outlines and Templates** page while generating your presentation.

## Adding More Slides to Your Presentation Template

Now that you’ve got your first slide working, let’s take it a step further and add another slide, this time with a **title**, **description**, **image**, and **icon**.

### Create a New Slide Layout File

Inside your layout group directory, create a new file:

```bash theme={null}
touch SlideLayout2.tsx
```

(We’ll rename this later for better clarity.)

Just like before, open the file and **copy the contents** from the template file:

```
presentation-templates/ExampleSlideLayoutTemplate.tsx
```

### Define the Schema

Here’s a full schema that includes a title, description, image, and icon:

```ts theme={null}
export const Schema = z.object({
  title: z.string().min(3).max(50).default("Slide Layout Title").meta({
    description: "Main title of the slide"
  }),
  description: z.string().min(10).max(180).default("Slide Layout Description").meta({
    description: "Content description of the slide"
  }),
  image: ImageSchema.default({
    __image_url__: "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg",
    __image_prompt__: "A beautiful road in the mountains"
  }).meta({
    description: "Image to display in the slide"
  }),
  icon: IconSchema.default({
    __icon_url__: "/static/icons/placeholder.png",
    __icon_query__: "A beautiful road in the mountains"
  }).meta({
    description: "Icon to display in the slide"
  }),
});
```

> 🖼️ To include AI-generated images and icons in your slides, make sure to use `ImageSchema` and `IconSchema`.

### Create the Slide Component

Now let’s define how the slide will be rendered:

```tsx theme={null}
const SlideComponent = ({ data }: { data: Partial<SchemaType> }) => {
  return (
    <div className="h-full w-full flex justify-center items-center gap-4 p-10">
      <div className="basis-1/2 rounded-lg overflow-hidden">
        <img className="w-full" src={data.image?.__image_url__} alt={data.image?.__image_prompt__} />
      </div>
      <div className="basis-1/2 flex flex-col justify-center items-center">
        <img className="w-16 h-16" src={data.icon?.__icon_url__} alt={data.icon?.__icon_query__} />
        <h1 className="mt-4 text-4xl font-bold">{data.title}</h1>
        <p className="mt-6">{data.description}</p>
      </div>
    </div>
  );
};
```

### Preview the New Slide

Just like before, head to:

📍 [http://localhost:5000/template-preview](http://localhost:5000/layout-preview)

You should now see **both** slides listed under your presentation template. 🎉

That’s it! Now your template includes two slides.

### Rename Your Slide Files for Better AI Matching

While your slide layout files can technically be named anything, giving them **meaningful names** helps the AI choose slide that best match the content of each slide.

For example, instead of generic names like:

```bash theme={null}
SlideLayout1.tsx
SlideLayout2.tsx
```

Rename them like this:

```bash theme={null}
TitleDescriptionSlide.tsx
TitleDescriptionImageIconSlide.tsx
```

This makes it easier for Presenton's slide selector to understand which slide layout is suited for what kind of content.

> 💡 Pro tip: The more descriptive the filename, the better the layout selection works — even when `ordered` is set to `false`.

## How Slides Are Selected in a Template

When generating a presentation using your template, Presenton will automatically choose a slide layout for each slide from the ones available in the presentation template.

But what if you want to **control exactly which slide layout is used for each slide**?

Let’s say you want:

* **Slide 1** to always use the layout with just title and description
* **Slide 2** to always use the layout with title, image, icon, and description

You can do that by using the `ordered` field in your `settings.json`.

### Use `ordered: true` for Specific Slide Order

Open your `settings.json` and set `ordered` to `true`:

```json theme={null}
{
  "description": "My custom template with specific slide order",
  "ordered": "true",
  "default": "false"
}
```

Now, rename your slide layout files with a numeric prefix to indicate the order:

```bash theme={null}
mv TitleDescriptionSlide.tsx 1-TitleDescriptionSlide.tsx
mv TitleDescriptionImageIconSlide.tsx 2-TitleDescriptionImageIconSlide.tsx
```

> 📛 The filenames determine the slide order when `ordered` is set to true.

Now, when this template is selected during presentation generation:

* **Slide 1** will always use `1-TitleDescriptionSlide.tsx`
* **Slide 2** will always use `2-TitleDescriptionImageIconSlide.tsx`

You can keep adding more slide layouts.

You can keep expanding your template by adding more `.tsx` files — each one with its own design and schema.

Now go build something awesome! 💡✨

Got more ideas? Add more `.tsx` files inside your template directory and let your creativity run wild. 🎨💡