> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daytalog.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Intro to templating
> Write email and PDF templates with React
We are using components from open-source libraries [react-email](https://react.email) and [react-pdf](https://react-pdf.org) to design and render templates. Check their documentation for more information about the components.
React Email Documentation
React PDF Documentation
## How Emails and PDFs are rendered
There are some fundamental differences between designing emails and PDFs.
**PDF** templates are rendered from React code to a ***PDF document*** before being sent as attachments or exported. PDF documents are static; they preserve exact positioning, fonts, and graphics.
**Email** templates are rendered from React to ***HTML***. The HTML is sent to your recipient's email application. It is up to the recipient's email application to render the HTML. [Can I Email](https://caniemail.com) is a good resource for checking syntax support.
### Assets
Assets in **Emails** (fonts and images) must be **publicly accessible**, since recipients email clients fetch them directly from the source when viewed. The email we send is just HTML code with a link to the asset.
```typescript Email.tsx theme={null}
import { Html, Head, Body, Img } from '@react-email/components';
const Email = () => {
return (
)
}
export default Email
```
Assets inside **PDFs** are rendered into the PDF document. We need assets to be **locally available** for rendering PDFs offline. Place your assets in the assets folder next to your template and import them like this:
```typescript PDF.tsx theme={null}
import { Page, Document, Image } from '@react-pdf/renderer';
import logo from './assets/obsidian.png';
const PDF = () => {
return (
)
}
export default PDF
```
## How to get data from project and logs
Data from the active project is available with the `useDaytalog` hook.
```typescript Daytalog.tsx theme={null}
import { useDaytalog } from 'daytalog';
const { projectName } = useDaytalog()
console.log(projectName)
```
## Design for one or multiple logs
It's possible to select one or multiple logs. You can use the selection button in the editor to switch between selection of one or several logs.
```typescript theme={null}
import { useDaytalog } from 'daytalog';
// One log (if multiple are selected, it will merge the values and return them as one log)
const { log } = useDaytalog()
// Multiple logs
const { logs } = useDaytalog()
// or all logs in the project
const { logsAll } = useDaytalog()
```