Avvio veloce
-
Edit fonte
Modificare l'HTML nell 'area di testo a sinistra.
-
Preview di Swatch
Il pannello destro si aggiorna come si digita.
Editor HTML
Scrivere HTML a sinistra e visualizzare l'output rendered a destra; ottimo per snippet e modelli di posta elettronica.
Privacy: elaborato localmente, mai caricato.
↓ Incolla nell 'area di input qui sotto per vedere i risultati istantaneamente
左侧编辑 HTML，右侧实时预览渲染效果。
HTML 源码
预览
Hello
Edit HTML on the left and preview on the right.
Note
安全提示
预览使用当前页面上下文渲染; 请勿粘贴不可信来源的脚本内容。
Scrivere HTML a sinistra e visualizzare l'output rendered a destra; ottimo per snippet e modelli di posta elettronica.
Utilizzo dei casi
Convalida snippet di rich-text, HTML e-mail e blocchi di landing page nel browser.
Caratteristiche e casi d'uso
Modifica HTML a sinistra con anteprima live a destra - nessun server locale necessario per controllare il rendering.
Utilizza per i modelli di posta elettronica, il debug dell 'esportazione di rich-text, il markup didattico e le verifiche rapide del layout.
Tipico Workflow
Quando si digita il codice HTML nell 'editor sinistro, il riquadro di anteprima si aggiorna in tempo reale. Testare rapidamente gli effetti dei tag come la modifica <h1>stili o regolare i bordi del tavolo. Durante la risoluzione dei problemi, aggiungere bordi temporanei o colori di sfondo per il debug dei layout degli elementi.
Per i modelli di posta elettronica, verificare la struttura di base qui prima di testare in client di posta elettronica reali. Si noti che i client come Outlook avere un supporto CSS limitato - utilizzare questo strumento per passare rapidamente tra le variazioni di codice per i controlli di compatibilità.
Esempi
Esempio
Input
<h1>Hello</h1>
Output
Rendered heading
FAQ
Ha scritto script?
L'anteprima esegue il rendering in-page; non incollare script non attendibili.
Perché il mio modello di posta elettronica è reso corretto qui, ma si rompe quando viene inviato?
La maggior parte dei client di posta elettronica utilizzano motori di rendering obsoleti. Soluzioni: 1) Utilizzare layout basati su tabelle invece di Divs, 2) Inline tutti gli stili CSS, 3) Se disponibile, abilitare "Email Client Simulation" nello strumento. Piattaforme come Gmail e Outlook presentano vincoli unici che richiedono adattamenti specifici.