A plug & play solution to develop your react emails, shows a live preview without any need for any complex setup or configuration.
Instead of having to manually setup a starter project in order to view your react emails, this extension allows you to directly view/preview them in vscode. It renders your emails behind the scenes automatically. Allowing you to view changes in realtime, input props dynamically, view compiled code leading to faster workflows.
This is NOT an official extension from React Email, its more of a passion/learning project made by me ¯\_(ツ)_/¯.
List of Features:
- Live preview with fast hmr utilizing the power of vite.
- Support for props.
- Additional tools including:
- Inspecting generated html utilizing vscode dev tools.
- Ability to Zoom in/out.
- ... more to come
- The Emails must be written in
.jsxor.tsxfile extensions. - The Email Component needs to be the default export of the active file.
- The Props object needs to be exported with the name
PreviewProps.- Yes, this is unlike how react-email usually does it. I decided to make the PreviewProps object as a seperate export as it made handling things easier. This might change in a future release.
import { Html } from "@react-email/components";
import * as React from "react";
interface EmailComponentProps {
name: string;
}
export const EmailComponent = (props: EmailComponentProps) => {
return <Html> Hello, {props.name} </Html>;
};
export default EmailComponent;
export const PreviewProps: EmailComponentProps = {
name: "React Email",
};I recently used react email in one of my projects, and while using it I wished if there was a faster way I can preview my emails instead of having to manually setup a project. I was not the only person that had this idea and I was even more motivated when I found out there was an already existing discussion on the same issue here. so I decided to try and give it a shot.
As mentioned, while solutions like Preview.js already exist. I faced some problems using it, also I felt it was quite a very generic solution which can be great sometimes but can also lead to heaviness. I believed a targeted solution will yield better results, this is what this extension represents. It solves a very niche and specific problem (only rendering react emails) but in doing so, I think it leads to faster and more consistent results.
- A working package manager [
npm,yarn,pnpm] needs to be installed globally.
- Sometimes the preview panel does not refresh (blank screen). When that happens, simply click on the preview button again or run the preview command.
pnpmandyarnwere not tested...- no support for
denoorbunyet ...
-
renderApproach: The Approach used to render the email. By default avite serverruns. Ascriptapproach will be added in a future release hopefully. -
dependencies: Which dependencies will be used to render the email. Currently, onlyexternaloption is allowed. Later, alocaloption that uses the active project dependencies would be supported. -
runtimeEnviornment: The Runtime Enviornment Used to execute scripts. Currently onlynodeis supported. Later, support for deno, bun will be added. -
packageManager: The Package Manager Used to install and run Dependencies. By defaultnpmis used. -
renderOn: When should the email be rerendered and updated. By default itsOnSave.
-
packages.directory: The path for the external project that will be used to render the email. By default theextensionUri:- The uri of the directory containing the extension - is used. -
packages.reactEmailRenderVersion: The version of@react-email/renderused. -
packages.reactEmailComponentsVersion: The version of@react-email/componentsused. -
packages.reactVersion: The version ofreactused. -
packages.reactDomVersion: The version ofreact-domused.
-
server.port: The Port that the Live Render Server will run on. Make sure that the port is not reserved, assigned or in use for the extension to work. -
server.terminalVisible: Controls the visiblity behaviour of the server terminal when rendering. By default its hidden. -
server.terminalColor: The Color of the Render Server Terminal.
-
preview: Opens and Refreshes the Preview Panel and starts the rendering process if there are valid emails to render. -
selectPackageVersion: Opens A Quick Option Dialog to select a valid package version for react email dependencies. -
toggleRenderTerminal: Shows and Hides The Terminal, once the terminal is shown in the UI, it can't be hidden unless the entire terminal panel is hidden. -
restartRenderProcess: Restarts the Rendering Processing. will start the rendering process if not already started. -
stopRenderProcess: Stops the Rendering Processing. will stop the rendering process if it has started.
All contributions are open, and all feedback is more than welcome. If you like it, please reach out and tell me. If you face any issues, do the same!
You can send me an email, leave a review, open an issue!
- Add support for deno. Make deno imports work (different import resolutions).
- Add support for Bun.
- Make sure that yarn, pnpm are working.
- Add support for script approach.
- Maybe look into supporting multiple emails at once (storybook approach).
- Will have to perform cleanup when the extension starts or disposes to delete any files in the emails folder if there is any.
- Add support for multiple projects with different dependencies (external projects) ... maybe a setting for multiple projects or a single project.
- Add support for using local dependencies instead of having to setup an external project.
- Add a custom viewer to input props (a view in the preview panel)