{"id":25612483,"url":"https://github.com/abdo-reda/react-email-vscode-extension","last_synced_at":"2026-05-07T19:09:24.438Z","repository":{"id":276618309,"uuid":"907552880","full_name":"Abdo-reda/react-email-vscode-extension","owner":"Abdo-reda","description":"React Email Renderer VSCode Extension","archived":false,"fork":false,"pushed_at":"2025-02-09T12:36:10.000Z","size":761,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T00:28:37.543Z","etag":null,"topics":["e-mail","react","renderer","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Abdo-reda.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-23T21:17:27.000Z","updated_at":"2025-02-10T16:25:22.000Z","dependencies_parsed_at":"2025-02-10T06:15:24.363Z","dependency_job_id":null,"html_url":"https://github.com/Abdo-reda/react-email-vscode-extension","commit_stats":null,"previous_names":["abdo-reda/react-email-vscode-extension"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Abdo-reda/react-email-vscode-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdo-reda%2Freact-email-vscode-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdo-reda%2Freact-email-vscode-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdo-reda%2Freact-email-vscode-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdo-reda%2Freact-email-vscode-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abdo-reda","download_url":"https://codeload.github.com/Abdo-reda/react-email-vscode-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdo-reda%2Freact-email-vscode-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283910072,"owners_count":26915128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-11T02:00:06.610Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-mail","react","renderer","vscode","vscode-extension"],"created_at":"2025-02-22T00:27:16.334Z","updated_at":"2025-11-11T19:03:13.200Z","avatar_url":"https://github.com/Abdo-reda.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Email Renderer Cover](https://github.com/Abdo-reda/react-email-vscode-extension/blob/main/assets/repo-cover.png?raw=true)\n\n\u003cdiv align=\"center\"\u003e\u003cstrong\u003eReact Email Renderer\u003c/strong\u003e  📧⚡\u003c/div\u003e\n\u003cdiv align=\"center\"\u003eA Visual Studio Code Extension for the React Email Package.\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=AbdoReda.react-email-renderer\"\u003eMarketplace\u003c/a\u003e \n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/Abdo-reda/react-email-vscode-extension\"\u003eGithub\u003c/a\u003e \n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://react.email\"\u003eReact Email\u003c/a\u003e\n\u003c/div\u003e\n\n## Introduction\n\nA plug \u0026 play solution to develop your react emails, shows a **live preview** without any need for any complex setup or configuration.\n\nInstead 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.\n\nThis is **NOT an official extension from React Email**, its more of a passion/learning project made by me `¯\\_(ツ)_/¯`.\n\n## Features\n\n![Demo Video](https://github.com/Abdo-reda/react-email-vscode-extension/blob/version/v-0.7.0/assets/demo.gif?raw=true)\n\n**List of Features:**\n- Live preview with fast hmr utilizing the power of vite.\n- Support for props.\n- Additional tools including:\n  - Inspecting generated html utilizing vscode dev tools.\n  - Ability to Zoom in/out.\n  - ... more to come\n\n## Usage Notes\n\n#### For Email Templates to be Rendered. They must abide by the following:\n\n- The Emails must be written in **`.jsx` or `.tsx`** file extensions.\n- The Email Component needs to be the **default export** of the active file.\n- The Props object needs to be exported with the name **`PreviewProps`**.\n  - 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_.\n\n#### Sample Email\n\n```tsx\nimport { Html } from \"@react-email/components\";\nimport * as React from \"react\";\n\ninterface EmailComponentProps {\n  name: string;\n}\n\nexport const EmailComponent = (props: EmailComponentProps) =\u003e {\n  return \u003cHtml\u003e Hello, {props.name} \u003c/Html\u003e;\n};\n\nexport default EmailComponent;\n\nexport const PreviewProps: EmailComponentProps = {\n  name: \"React Email\",\n};\n```\n\n## Why Though?\n\nI 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](https://github.com/resend/react-email/discussions/574). so I decided to try and give it a shot. \n\nAs mentioned, while solutions like [Preview.js](https://previewjs.com/) 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.\n\n## Requirements\n\n- A working package manager [`npm`, `yarn`, `pnpm`] needs to be installed globally.\n\n## Known Issues and Limitations\n\n* Sometimes the preview panel does not refresh (blank screen). When that happens, simply click on the preview button again or run the preview command.\n* `pnpm` and `yarn` were not tested...\n* no support for `deno` or `bun` yet ...\n\n\n## Extension Settings\n\n#### General\n* `renderApproach`: The Approach used to render the email. By default a `vite server` runs. A `script` approach will be added in a future release hopefully.\n\n* `dependencies`: Which dependencies will be used to render the email. Currently, only `external` option is allowed. Later, a `local` option that uses the active project dependencies would be supported. \n\n* `runtimeEnviornment`: The Runtime Enviornment Used to execute scripts. Currently only `node` is supported. Later, support for deno, bun will be added.\n\n* `packageManager`: The Package Manager Used to install and run Dependencies. By default `npm` is used.\n\n* `renderOn`: When should the email be rerendered and updated. By default its `OnSave`.\n\n#### Packages\n\n* `packages.directory`: The path for the external project that will be used to render the email. By default the `extensionUri:` - The uri of the directory containing the extension - is used.\n\n* `packages.reactEmailRenderVersion`: The [version](https://www.npmjs.com/package/@react-email/render?activeTab=versions) of `@react-email/render` used. \n\n* `packages.reactEmailComponentsVersion`: The [version](https://www.npmjs.com/package/@react-email/components?activeTab=versions) of `@react-email/components` used.\n\n* `packages.reactVersion`: The [version](https://www.npmjs.com/package/react?activeTab=versions) of `react` used.\n\n* `packages.reactDomVersion`: The [version](https://www.npmjs.com/package/react-dom?activeTab=versions) of `react-dom` used.\n\n#### Server\n\n* `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.\n\n* `server.terminalVisible`: Controls the visiblity behaviour of the server terminal when rendering. By default its hidden. \n\n* `server.terminalColor`: The Color of the Render Server Terminal.\n\n\n## Extension Commands\n\n* `preview`: **Opens and Refreshes the Preview Panel** and starts the rendering process if there are valid emails to render.\n\n* `selectPackageVersion`: **Opens A Quick Option Dialog** to select a valid package version for react email dependencies. \n\n* `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.\n\n* `restartRenderProcess`: **Restarts the Rendering Processing**. will start the rendering process if not already started.\n\n* `stopRenderProcess`: **Stops the Rendering Processing**. will stop the rendering process if it has started.\n\n## Contributions\n\nAll 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!\n\n**You can send me an [email](mailto:3bdo.reda@gmail.com), leave a [review](https://marketplace.visualstudio.com/items?itemName=AbdoReda.react-email-renderer\u0026ssr=false#review-details), open an [issue](https://github.com/Abdo-reda/react-email-vscode-extension/issues)!**\n\n## Possible Enhancements\n\n- [ ] Add support for deno. Make deno imports work (different import resolutions).\n- [ ] Add support for Bun.\n- [ ] Make sure that yarn, pnpm are working.\n- [ ] Add support for script approach. \n- [ ] Maybe look into supporting multiple emails at once (storybook approach).\n  - Will have to perform cleanup when the extension starts or disposes to delete any files in the emails folder if there is any.\n- [ ] Add support for multiple projects with different dependencies (external projects) ... maybe a setting for multiple projects or a single project.\n- [ ] Add support for using local dependencies instead of having to setup an external project.\n- [ ] Add a custom viewer to input props (a view in the preview panel)\n\n## LICENCE\n\n[GNU GENERAL PUBLIC LICENSE](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdo-reda%2Freact-email-vscode-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdo-reda%2Freact-email-vscode-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdo-reda%2Freact-email-vscode-extension/lists"}