AI News HubLIVE
站内改写3 分钟阅读

待翻译:Show HN: Unitpost/email – open-source Email Components and Layouts

AI 服务暂时不可用,以下为来源摘要,待恢复后补全翻译:Production-ready Email Components and Layouts Add to a project. $ npm i @unitpost/email zodnpm install @unitpost/email zod Teach your agent in seconds. $ npx skills add unitpostcom/email header-logo-nav hero-simple colu…

来源Hacker News AI作者: docreator

AI 服务暂时不可用,以下为来源正文,待恢复后补全翻译。

Production-ready Email Components and Layouts Add to a project. $ npm i @unitpost/email zodnpm install @unitpost/email zod Teach your agent in seconds. $ npx skills add unitpostcom/email header-logo-nav hero-simple columns-split ); } Inbox-safe HTML. Same renderer as the visual editor. render.ts import { render } from "@unitpost/email/react"; const html = render(); Clients Works in Outlook, Gmail, Apple Mail and other Table layout, inline CSS. Same markup as the playground. Outlook Gmail Apple Mail Yahoo Mail and other Library Components, layouts, HTML you can send Constrained TSX. Tailwind or CSS. Inbox-safe markup. This package does not send mail. Components Heading, Text, Button, Image, Row, Section. className compiles to inline CSS. Layouts Headers, heroes, CTAs, footers. Paste and edit. Any sender MIT. Render HTML and send it anywhere. Components Read Docs Heading Text Button Image Section Spacer Divider Row Column Link Markdown Code Html Layouts Read Docs Logo header Logo + links Simple hero Image hero Status hero Card Detail rows Verification code Quote / callout Action feature Announcement banner Article feature Split 50/50 Two cards Three features Numbered steps CTA band Centered CTA Simple footer Rich footer Footer + apps Playground CodeValid Welcome aboard, {{first_name}} 👋 Thanks for joining {{product_name}}. Your account is ready — let's get you to your first win in just a couple of minutes. Three quick steps to get value fast 1. Set up your profile — add the details that personalize your experience. 2. Connect your first integration — bring your data in so things just work. 3. Invite your team — {{product_name}} is better together. Need a hand? Just reply to this email — a real human will get back to you. Write email code and see the exact HTML the send engine produces — live in your browser, nothing to install. Open playground Open Playground Questions Common questions What is @unitpost/email? An MIT-licensed email component library that works in Outlook, Gmail, and Apple Mail. Import Heading, Text, Button from @unitpost/email/react and call render(), or parseTsx a string if you are not using React. Pass the HTML to any sender. No Unitpost account and no API key. How do I install the email component library? For coding agents, run npx skills add unitpostcom/email — that teaches the catalog, React imports, parseTsx, render, and layouts with no account. For Node, run npm install @unitpost/email zod. zod is a peer; React is optional (only if you import @unitpost/email/react). Node 18+. Do I need a Unitpost account to use it? No. The package renders HTML locally and works fully offline. The playground and template gallery are also free without an account. Unitpost can send the HTML if you want a sender; any other API or SMTP relay works too. How do I compose and render an email? In a React app, import Section, Heading, Button from @unitpost/email/react and call render(). Without React, write the same tags as a string and call parseTsx then renderToHtml. Both produce the same document the visual editor uses. className compiles to inline CSS. {{tokens}} fill at send time. How do I style emails — Tailwind, CSS, or something else? All of those, as long as they compile. Tailwind-style className on any block (class and tw work too) becomes inline CSS at render; responsive and pseudo variants go in a block. custom-css takes raw CSS declarations and inlines those. Spacing, color, and alignment are also props. Recipients never load a stylesheet — renderToHtml emits the inline CSS Outlook, Gmail, and Apple Mail paint. Does it work in Outlook, Gmail, and Apple Mail? Yes. That is the point of the library: one document, inbox-safe HTML for Outlook, Gmail, and Apple Mail. Live previews on the component reference and the playground use the same renderer as production sends. Where are the components, layouts, and examples? Component props and live previews are at /components. Pre-built bands (headers, heroes, CTAs, footers) are at /components#layouts. Ready-to-send samples are in the template gallery. The playground at /playground renders the same HTML with no install. Unitpost Start sending for free $0/ mo 5,000 emails / mo — no credit card Your domain with DKIM, SPF & DMARC REST API, SMTP & official SDKs Visual editor + code templates Open & click tracking + signed webhooks 10,000 contacts · automatic suppression Start for free