JSON editor

To give you an idea how it works, just fiddle with the following JSON and preview your changes as either a rendered preview of the email, prettified, raw or MIME.

JSON
Preview

{
 "from": {
 "address": "info@example.com",
 "name": "Webshop ABC"
 },
 "name": "Theme: a webshop",
 "version": 21,
 "subject": "We have something special for you!",
 "background": {
 "color": "#f3fbff"
 },
 "font": {
 "family": "Arial, Helvetica, sans-serif",
 "color": "#21292f"
 },
 "content": {
 "background": {
 "color": "#ffffff"
 },
 "blocks": [
 {
 "type": "spacer",
 "background": {
 "color": "#f3fbff"
 },
 "height": "10"
 },
 {
 "type": "spacer",
 "height": "5"
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [
 {
 "type": "html",
 "content": "&nbsp; New arrivals!\n"
 }
 ],
 "size": "8",
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 },
 {
 "blocks": [
 {
 "type": "link",
 "label": "No images? View online",
 "font": {
 "size": "12px",
 "color": "#2ba6cb",
 "lineHeight": "18px"
 },
 "link": {
 "title": "No images? View online",
 "url": "{$webversion}"
 },
 "margin": {
 "top": 0,
 "right": 0,
 "bottom": 0,
 "left": 10
 }
 }
 ],
 "size": "4",
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 }
 ],
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 },
 {
 "type": "image",
 "src": "https://vicinity.picsrv.net/image/8873/ec890b514c698a4bcdc00b90ff71a2e8/image.jpeg"
 },
 {
 "type": "spacer",
 "height": "30"
 },
 {
 "type": "html",
 "content": "<h5 style=\"text-align:center\">We have something special for you!</h5>\n"
 },
 {
 "type": "spacer",
 "height": "30"
 },
 {
 "type": "html",
 "margin": {
 "top": 20,
 "right": 20,
 "bottom": 0,
 "left": 20
 },
 "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \n \n- Lorem ipsum -\n"
 },
 {
 "type": "spacer",
 "height": "30"
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [
 {
 "type": "image",
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/8880/9996dad162864afeb42bd86b96a9a715/image.jpeg",
 "margin": {
 "top": 0,
 "right": 0,
 "bottom": 0,
 "left": 0
 }
 },
 {
 "type": "spacer",
 "height": "20"
 },
 {
 "type": "html",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "content": "Fancy Cat \nLorem ipsum dolor sit amet, consectetur adipiscing elit. \n \n€ 19,99\n"
 },
 {
 "type": "button",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "label": "ORDER",
 "corners": "radius",
 "color": "blue"
 },
 {
 "type": "spacer",
 "height": "20"
 }
 ],
 "size": "4",
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 },
 {
 "blocks": [
 {
 "type": "image",
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/8881/db0c994e5a4ff213e13d5f24bebab3c9/image.jpeg"
 },
 {
 "type": "spacer",
 "height": "20"
 },
 {
 "type": "html",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "content": "Rugged bed cover \nLorem ipsum dolor sit amet, consectetur adipiscing elit. \n \n€ 79,99\n"
 },
 {
 "type": "button",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "label": "ORDER",
 "corners": "radius",
 "color": "blue"
 },
 {
 "type": "spacer",
 "height": "20"
 }
 ],
 "size": "4",
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 },
 {
 "blocks": [
 {
 "type": "image",
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/8882/29634862a2131b598809b0a98842b2ba/image.jpeg"
 },
 {
 "type": "spacer",
 "height": "20"
 },
 {
 "type": "html",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "content": "Green leaves \nLorem ipsum dolor sit amet, consectetur adipiscing elit. \n \n€ 2,99\n"
 },
 {
 "type": "button",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "label": "ORDER",
 "corners": "radius",
 "color": "blue"
 },
 {
 "type": "spacer",
 "height": "20"
 }
 ],
 "size": "4",
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 }
 ],
 "background": {
 "color": "rgba(0, 0, 0, 0)"
 }
 },
 {
 "type": "spacer",
 "height": 40
 },
 {
 "type": "spacer",
 "height": 5,
 "background": {
 "color": "#7d8a2e"
 }
 },
 {
 "type": "spacer",
 "background": {
 "color": "#f3fbff"
 },
 "height": 10
 },
 {
 "type": "spacer",
 "background": {
 "color": "#f3fbff"
 },
 "height": "10"
 }
 ]
 }
}

Rendered
Prettified
Raw HTML
MIME

desktop
mobile

raw

pretty

mime

JSON editor

Who is behind ResponsiveEmail.com?

We are hiring

More from Copernica

Contact us