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

{
 "from": {
 "address": "info@example.com",
 "name": "OH!"
 },
 "name": "Theme: Generic",
 "version": 21,
 "subject": "OH! Your daily inspiration",
 "background": {
 "color": "#daede2"
 },
 "_internals": {
 "easyhtml": true
 },
 "content": {
 "background": {
 "color": "#ffffff"
 },
 "blocks": [
 {
 "type": "spacer",
 "height": 2,
 "background": {
 "color": "#ea2e49"
 }
 },
 {
 "type": "spacer",
 "height": 10,
 "background": {
 "color": "#daede2"
 }
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [
 {
 "type": "html",
 "content": "OH! Your daily inspiration"
 }
 ],
 "size": "6"
 },
 {
 "blocks": [
 {
 "type": "link",
 "label": "No images? View online",
 "font": {
 "color": "#ea2e49",
 "size": "12px",
 "family": "Arial, Helvetica, sans-serif"
 },
 "link": {
 "url": "{$webversion}",
 "title": "No images? View online"
 },
 "align": "right"
 }
 ],
 "size": "6"
 }
 ],
 "background": {
 "color": "#daede2"
 }
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [],
 "size": "4"
 },
 {
 "blocks": [
 {
 "type": "image",
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9071/9bae540a2608590c79b60f54eb6e3523/image.png"
 },
 {
 "type": "spacer",
 "height": "20"
 }
 ],
 "size": "4"
 },
 {
 "blocks": [],
 "size": "4"
 }
 ],
 "background": {
 "color": "#daede2"
 }
 },
 {
 "type": "image",
 "background": {
 "color": "#ffffff"
 },
 "margin": {
 "top": 10,
 "right": 10,
 "bottom": 10,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9075/f2ed78e3a10fc597fa8b3cd1eff50eec/image.jpeg"
 },
 {
 "type": "spacer",
 "background": {
 "color": "#daede2"
 },
 "height": "20"
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [],
 "size": "3"
 },
 {
 "blocks": [
 {
 "type": "html",
 "content": " \nWorkplaces \n&nbsp;"
 }
 ],
 "size": "6"
 },
 {
 "blocks": [],
 "size": "3"
 }
 ]
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [
 {
 "type": "image",
 "margin": {
 "top": 10,
 "right": 10,
 "bottom": 20,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9086/a7e49a15508d6c7a0e63c7b2f259e998/image.jpeg"
 },
 {
 "type": "html",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "content": "Lorem ipsum \nLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin aliquet mauris non lacinia."
 }
 ],
 "size": "6"
 },
 {
 "blocks": [
 {
 "type": "image",
 "margin": {
 "top": 10,
 "right": 10,
 "bottom": 20,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9084/a9b0c7d89381eb7ddc0e1ab8c003d93f/image.jpeg"
 },
 {
 "type": "html",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 0,
 "left": 10
 },
 "content": "Lorem \nAliquam nec arcu iaculis, volutpat tortor blandit, venenatis est. Pellentesque consequat leo a fringilla finibus."
 }
 ],
 "size": "6"
 }
 ]
 },
 {
 "type": "spacer",
 "height": 20
 },
 {
 "type": "spacer",
 "background": {
 "color": "#ea2e49"
 },
 "height": "5"
 },
 {
 "type": "spacer",
 "background": {
 "color": "#daede2"
 },
 "height": "20"
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [],
 "size": "4"
 },
 {
 "blocks": [
 {
 "type": "html",
 "content": " \nRandom places \n&nbsp;"
 }
 ],
 "size": "4"
 },
 {
 "blocks": [],
 "size": "4"
 }
 ]
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [
 {
 "type": "image",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 20,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9090/1e71ccef7f73c73f0a2e35619fd23764/image.jpeg"
 },
 {
 "type": "html",
 "content": "LOREM, IP"
 }
 ],
 "size": "4"
 },
 {
 "blocks": [
 {
 "type": "image",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 20,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9091/ac030682b5006663e8189d394c91033e/image.jpeg"
 },
 {
 "type": "html",
 "content": "IPSUM, PX"
 }
 ],
 "size": "4"
 },
 {
 "blocks": [
 {
 "type": "image",
 "margin": {
 "top": 0,
 "right": 10,
 "bottom": 20,
 "left": 10
 },
 "align": "center",
 "src": "https://vicinity.picsrv.net/image/9093/9bc25776ebf3b6bdcb7762cb24f75b4f/image.jpeg"
 },
 {
 "type": "html",
 "content": "DOLOR, MN"
 }
 ],
 "size": "4"
 }
 ]
 },
 {
 "type": "spacer",
 "height": 20
 },
 {
 "type": "spacer",
 "background": {
 "color": "#ea2e49"
 },
 "height": "5"
 },
 {
 "type": "spacer",
 "background": {
 "color": "#daede2"
 },
 "height": "20"
 },
 {
 "type": "columns",
 "columns": [
 {
 "blocks": [],
 "size": "4"
 },
 {
 "blocks": [
 {
 "type": "link",
 "background": {
 "color": "#daede2"
 },
 "label": "Click here to unsubscribe",
 "font": {
 "color": "#ea2e49",
 "family": "Arial, Helvetica, sans-serif"
 },
 "link": {
 "url": "{$unsubscribe}",
 "title": "No link title"
 },
 "align": "center"
 }
 ],
 "size": "4"
 },
 {
 "blocks": [],
 "size": "4"
 }
 ],
 "background": {
 "color": "#daede2"
 }
 },
 {
 "type": "spacer",
 "background": {
 "color": "#daede2"
 },
 "height": "10"
 }
 ]
 }
}

Preview

Rendered
Prettified
Raw HTML
MIME

desktop
mobile

raw

pretty

mime

JSON editor

JSON

Preview

Who is behind ResponsiveEmail.com?

We are hiring

More from Copernica

Contact us