Skip to main content

​
Make variables editable

Dedale gives the possibility to replace variables by real data to preview your template.
To be able to make react Props editable from variables panel, you have to use setupVariableControls like this: 
import { /* Components needed for my template */ } from "@react-email/components";
import React from "react";
import { setupVariableControls } from "@bireme-lab/dedale";

type Props = {
  name: string
}

const MyTemplate: React.FC<Props> = ({ name }) => {
  // My template code
}

setupVariableControls(MyTemplate, {
  name: {
    label: "Name",
    type: "fullName",
    placeholder: "Antoine",
    defaultValue: "Antoine",
    description: "User name",
  },
})

export default MyTemplate
To learn more about setupVariableControls you can learn the dedicated API documentation
Ensure React component’s props are matching configured variables otherwise TypeScript will raise an issue
Once you saved the template, you can open variables panel to generate ramdom values or edit manually variable.

​
Usage of variables panel to change values

Variables panel A: Generate random value for all fields. Learn more about how it works in API reference
B: Corresponding to label in setupVariableControls
C: Corresponding to description in setupVariableControls
D: Input to modify variable value