Skip to main content
We are using components from open-source libraries react-email and react-pdf to design and render templates. Check their documentation for more information about the components.

React-Email

React Email Documentation

React-PDF

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 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.
Email.tsx
import { Html, Head, Body, Img } from '@react-email/components';

const Email = () => {
  return (
    <Html>
      <Head></Head>
      <Body>
        <Img 
          src='https://www.example.com/assets/obsidian.png' 
          alt='Obsidian logo'
        />
      </Body>
    </Html>
  )
}
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:
PDF.tsx
import { Page, Document, Image } from '@react-pdf/renderer';
import logo from './assets/obsidian.png';

const PDF = () => {
  return (
    <Document>
      <Page size='A4'>
        <Image src={logo} />
      </Page>
    </Document>
  )
}
export default PDF

​
How to get data from project and logs

Data from the active project is available with the useDaytalog hook.
Daytalog.tsx
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. 
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()