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

# Editing the components

To facilitate developing components, use the built-in [playground](https://github.com/psycarlo/vuemail/tree/main/playground), which automatically hot reloads when you make changes to the components during development.

## 1. Create an email template

Create a new file at `playground/emails/testing.vue`

```vue playground/emails/testing.vue theme={null}
<script setup lang="ts">
import { Body, Head, Html, Tailwind, Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Tailwind>
    <Html>
      <Head />

      <Body class="bg-black text-white">
        <Text class="m-0 my-4 bg-green-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>
</template>
```

> [!TIP]
>
> The `.gitignore` file will ignore all changes in [playground/emails](https://github.com/psycarlo/vuemail/tree/main/playground/emails) so you can test component changes and use cases in example templates without committing them to the repository.

## 2. Run playground server

```sh playground theme={null}
pnpm dev
```

## 3. Open in your browser

Go to [http://localhost:3000](http://localhost:3000)


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