1<!DOCTYPE html><html><head><link rel="icon" href="/favicon.ico"/><link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Work+Sans:wght@700;800;900&display=swap"/><meta charSet="utf-8"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta property="og:type" content="website"/>
1<script async="" defer="" data-domain="salto.so" src="https://plausible.io/js/plausible.js"></script>
1<title> Writing Interactive Blog Posts from the Browser</title><meta name="robots" content="index,follow"/><meta name="googlebot" content="index,follow"/><meta name="description" content=" 2Over the last couple of months, I have been having fun learning about 3[MDX](https://mdxjs.com/) which it describes itself as 4*"Markdown for the component era"*."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@SaltoHQ"/><meta name="twitter:creator" content="@santiviquez"/><meta property="og:url" content="https://blog.salto.so/p/writing-interactive-blog-posts-from-the-browser-blog"/><meta property="og:title" content=" Writing Interactive Blog Posts from the Browser"/><meta property="og:description" content=" 5Over the last couple of months, I have been having fun learning about 6[MDX](https://mdxjs.com/) which it describes itself as 7*"Markdown for the component era"*."/><meta property="og:image" content="https://mugshotbot.com/m?mode=light&color=366175&pattern=topography&hide_watermark=true&url=https://blog.salto.so/p/writing-interactive-blog-posts-from-the-browser-blog"/><meta property="og:image:alt" content="Writing Interactive Blog Posts from the Browser"/><meta property="og:image:width" content="800"/><meta property="og:image:height" content="600"/><meta property="og:site_name" content="Salto"/><meta name="next-head-count" content="19"/><noscript data-n-css=""></noscript>
7<script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
7<script src="/_next/static/chunks/webpack-92b822f265bb0f76ad67.js" defer=""></script>
7<script src="/_next/static/chunks/framework-3af989d3dbeb77832f99.js" defer=""></script>
7<script src="/_next/static/chunks/main-40f76118f06e75475bd6.js" defer=""></script>
7<script src="/_next/static/chunks/pages/_app-135bd26baabcd3d96ac8.js" defer=""></script>
7<script src="/_next/static/chunks/1bfc9850-b51894e7fed263176e55.js" defer=""></script>
7<script src="/_next/static/chunks/d64684d8-e601d01173a763743564.js" defer=""></script>
7<script src="/_next/static/chunks/d848df63-83d66a2d608552464694.js" defer=""></script>
7<script src="/_next/static/chunks/ff39441c-3e359312d777fb820773.js" defer=""></script>
7<script src="/_next/static/chunks/189-bf561068aa6299dd3e8f.js" defer=""></script>
7<script src="/_next/static/chunks/734-245ff0b2b7cfa2c31d94.js" defer=""></script>
7<script src="/_next/static/chunks/514-aa03bf24733cd69271ea.js" defer=""></script>
7<script src="/_next/static/chunks/114-648bc1613dd9ea7a3c0c.js" defer=""></script>
7<script src="/_next/static/chunks/649-7758c0a54d6a15911b0b.js" defer=""></script>
7<script src="/_next/static/chunks/930-587f22e3eeb495bb4f64.js" defer=""></script>
7<script src="/_next/static/chunks/pages/p/%5Bslug%5D-ed001ad51e9f333cd056.js" defer=""></script>
7<script src="/_next/static/91wx7SFXGzAUxnuPorr1G/_buildManifest.js" defer=""></script>
7<script src="/_next/static/91wx7SFXGzAUxnuPorr1G/_ssgManifest.js" defer=""></script>
7<style data-href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Work+Sans:wght@700;800;900&display=swap">@font-face{font-family:'Lato';font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u-w4BMUTPHjxsIPy-s.woff) format('woff')}@font-face{font-family:'Lato';font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2PHw.woff) format('woff')}@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxswWA.woff) format('woff')}@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI5wqPHw.woff) format('woff')}@font-face{font-family:'Lato';font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI3wiPHw.woff) format('woff')}@font-face{font-family:'Lato';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30wWA.woff) format('woff')}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USeww.woff) format('woff')}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHvxo.woff) format('woff')}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVeww.woff) format('woff')}@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50Xeww.woff) format('woff')}@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QNis.woff) format('woff')}@font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K8nQNis.woff) format('woff')}@font-face{font-family:'Work Sans';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K-DQNis.woff) format('woff')}@font-face{font-family:'Lato';font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u-w4BMUTPHjxsIPx-mPCLC79U11vU.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:italic;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u-w4BMUTPHjxsIPx-oPCLC79U1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_FQftx9897sxZ.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_Gwftx9897g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
7src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI3wi_FQftx9897sxZ.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:italic;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI3wi_Gwftx9897g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AUi-qNiXg7eU0.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AXC-qNiXg7Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
7unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_c6DptfpA4cD3.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_c6DptfpA4cD3.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Work Sans';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Work Sans';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_c6DptfpA4cD3.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Work Sans';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Work Sans';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><style data-emotion="css-global 1yfsslc">:host,:root{--chakra-ring-inset:var(--chakra-empty,/*!*/ /*!*/);--chakra-ring-offset-width:0px;--chakra-ring-offset-color:#fff;--chakra-ring-color:rgba(66, 153, 225, 0.6);--chakra-ring-offset-shadow:0 0 #0000;--chakra-ring-shadow:0 0 #0000;--chakra-space-x-reverse:0;--chakra-space-y-reverse:0;--chakra-colors-transparent:transparent;
7--chakra-colors-current:currentColor;--chakra-colors-black:#000000;--chakra-colors-white:#FFFFFF;--chakra-colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);--chakra-colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);--chakra-colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);--chakra-colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);--chakra-colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);--chakra-colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);--chakra-colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);--chakra-colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);--chakra-colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);--chakra-colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);--chakra-colors-blackAlpha-50:rgba(0, 0, 0, 0.04);--chakra-colors-blackAlpha-100:rgba(0, 0, 0, 0.06);--chakra-colors-blackAlpha-200:rgba(0, 0, 0, 0.08);--chakra-colors-blackAlpha-300:rgba(0, 0, 0, 0.16);--chakra-colors-blackAlpha-400:rgba(0, 0, 0, 0.24);--chakra-colors-blackAlpha-500:rgba(0, 0, 0, 0.36);--chakra-colors-blackAlpha-600:rgba(0, 0, 0, 0.48);--chakra-colors-blackAlpha-700:rgba(0, 0, 0, 0.64);--chakra-colors-blackAlpha-800:rgba(0, 0, 0, 0.80);--chakra-colors-blackAlpha-900:rgba(0, 0, 0, 0.92);--chakra-colors-gray-50:#F7FAFC;--chakra-colors-gray-100:#EDF2F7;--chakra-colors-gray-200:#E2E8F0;--chakra-colors-gray-300:#CBD5E0;--chakra-colors-gray-400:#A0AEC0;--chakra-colors-gray-500:#718096;--chakra-colors-gray-600:#4A5568;--chakra-colors-gray-700:#2D3748;--chakra-colors-gray-800:#1A202C;--chakra-colors-gray-900:#171923;--chakra-colors-red-50:#FFF5F5;--chakra-colors-red-100:#FED7D7;--chakra-colors-red-200:#FEB2B2;--chakra-colors-red-300:#FC8181;--chakra-colors-red-400:#F56565;--chakra-colors-red-500:#E53E3E;--chakra-colors-red-600:#C53030;--chakra-colors-red-700:#9B2C2C;--chakra-colors-red-800:#822727;--chakra-colors-red-900:#63171B;--chakra-colors-orange-50:#FFFAF0;--chakra-colors-orange-100:#FEEBC8;--chakra-colors-orange-200:#FBD38D;--chakra-colors-orange-300:#F6AD55;--chakra-colors-orange-400:#ED8936;--chakra-colors-orange-500:#DD6B20;--chakra-colors-orange-600:#C05621;--chakra-colors-orange-700:#9C4221;--chakra-colors-orange-800:#7B341E;--chakra-colors-orange-900:#652B19;--chakra-colors-yellow-50:#FFFFF0;--chakra-colors-yellow-100:#FEFCBF;--chakra-colors-yellow-200:#FAF089;--chakra-colors-yellow-300:#F6E05E;--chakra-colors-yellow-400:#ECC94B;--chakra-colors-yellow-500:#D69E2E;--chakra-colors-yellow-600:#B7791F;--chakra-colors-yellow-700:#975A16;--chakra-colors-yellow-800:#744210;--chakra-colors-yellow-900:#5F370E;--chakra-colors-green-50:#F0FFF4;--chakra-colors-green-100:#C6F6D5;--chakra-colors-green-200:#9AE6B4;--chakra-colors-green-300:#68D391;
7--chakra-colors-green-400:#48BB78;--chakra-colors-green-500:#38A169;--chakra-colors-green-600:#2F855A;--chakra-colors-green-700:#276749;--chakra-colors-green-800:#22543D;--chakra-colors-green-900:#1C4532;--chakra-colors-teal-50:#E6FFFA;--chakra-colors-teal-100:#B2F5EA;--chakra-colors-teal-200:#81E6D9;--chakra-colors-teal-300:#4FD1C5;--chakra-colors-teal-400:#38B2AC;--chakra-colors-teal-500:#319795;--chakra-colors-teal-600:#2C7A7B;--chakra-colors-teal-700:#285E61;--chakra-colors-teal-800:#234E52;--chakra-colors-teal-900:#1D4044;--chakra-colors-blue-50:#ebf8ff;--chakra-colors-blue-100:#bee3f8;--chakra-colors-blue-200:#90cdf4;--chakra-colors-blue-300:#63b3ed;--chakra-colors-blue-400:#4299e1;--chakra-colors-blue-500:#3182ce;--chakra-colors-blue-600:#2b6cb0;--chakra-colors-blue-700:#2c5282;--chakra-colors-blue-800:#2a4365;--chakra-colors-blue-900:#1A365D;--chakra-colors-cyan-50:#EDFDFD;--chakra-colors-cyan-100:#C4F1F9;--chakra-colors-cyan-200:#9DECF9;--chakra-colors-cyan-300:#76E4F7;--chakra-colors-cyan-400:#0BC5EA;--chakra-colors-cyan-500:#00B5D8;--chakra-colors-cyan-600:#00A3C4;--chakra-colors-cyan-700:#0987A0;--chakra-colors-cyan-800:#086F83;--chakra-colors-cyan-900:#065666;--chakra-colors-purple-50:#FAF5FF;--chakra-colors-purple-100:#E9D8FD;--chakra-colors-purple-200:#D6BCFA;--chakra-colors-purple-300:#B794F4;--chakra-colors-purple-400:#9F7AEA;--chakra-colors-purple-500:#805AD5;--chakra-colors-purple-600:#6B46C1;--chakra-colors-purple-700:#553C9A;--chakra-colors-purple-800:#44337A;--chakra-colors-purple-900:#322659;--chakra-colors-pink-50:#FFF5F7;--chakra-colors-pink-100:#FED7E2;--chakra-colors-pink-200:#FBB6CE;--chakra-colors-pink-300:#F687B3;--chakra-colors-pink-400:#ED64A6;--chakra-colors-pink-500:#D53F8C;--chakra-colors-pink-600:#B83280;--chakra-colors-pink-700:#97266D;--chakra-colors-pink-800:#702459;--chakra-colors-pink-900:#521B41;--chakra-colors-linkedin-50:#E8F4F9;--chakra-colors-linkedin-100:#CFEDFB;--chakra-colors-linkedin-200:#9BDAF3;--chakra-colors-linkedin-300:#68C7EC;--chakra-colors-linkedin-400:#34B3E4;--chakra-colors-linkedin-500:#00A0DC;--chakra-colors-linkedin-600:#008CC9;--chakra-colors-linkedin-700:#0077B5;--chakra-colors-linkedin-800:#005E93;--chakra-colors-linkedin-900:#004471;--chakra-colors-facebook-50:#E8F4F9;--chakra-colors-facebook-100:#D9DEE9;--chakra-colors-facebook-200:#B7C2DA;--chakra-colors-facebook-300:#6482C0;--chakra-colors-facebook-400:#4267B2;--chakra-colors-facebook-500:#385898;--chakra-colors-facebook-600:#314E89;--chakra-colors-facebook-700:#29487D;--chakra-colors-facebook-800:#223B67;--chakra-colors-facebook-900:#1E355B;--chakra-colors-messenger-50:#D0E6FF;--chakra-colors-messenger-100:#B9DAFF;--chakra-colors-messenger-200:#A2CDFF;--chakra-colors-messenger-300:#7AB8FF;--chakra-colors-messenger-400:#2E90FF;--chakra-colors-messenger-500:#0078FF;--chakra-colors-messenger-600:#0063D1;--chakra-colors-messenger-700:#0052AC;--chakra-colors-messenger-800:#003C7E;--chakra-colors-messenger-900:#002C5C;--chakra-colors-whatsapp-50:#dffeec;--chakra-colors-whatsapp-100:#b9f5d0;--chakra-colors-whatsapp-200:#90edb3;--chakra-colors-whatsapp-300:#65e495;--chakra-colors-whatsapp-400:#3cdd78;--chakra-colors-whatsapp-500:#22c35e;--chakra-colors-whatsapp-600:#179848;--chakra-colors-whatsapp-700:#0c6c33;--chakra-colors-whatsapp-800:#01421c;--chakra-colors-whatsapp-900:#001803;--chakra-colors-twitter-50:#E5F4FD;--chakra-colors-twitter-100:#C8E9FB;--chakra-colors-twitter-200:#A8DCFA;--chakra-colors-twitter-300:#83CDF7;--chakra-colors-twitter-400:#57BBF5;--chakra-colors-twitter-500:#1DA1F2;--chakra-colors-twitter-600:#1A94DA;--chakra-colors-twitter-700:#1681BF;--chakra-colors-twitter-800:#136B9E;--chakra-colors-twitter-900:#0D4D71;--chakra-colors-telegram-50:#E3F2F9;--chakra-colors-telegram-100:#C5E4F3;--chakra-colors-telegram-200:#A2D4EC;--chakra-colors-telegram-300:#7AC1E4;--chakra-colors-telegram-400:#47A9DA;--chakra-colors-telegram-500:#0088CC;--chakra-colors-telegram-600:#007AB8;--chakra-colors-telegram-700:#006BA1;--chakra-colors-telegram-800:#005885;--chakra-colors-telegram-900:#003F5E;--chakra-borders-none:0;--chakra-borders-1px:1px solid;--chakra-borders-2px:2px solid;--chakra-borders-4px:4px solid;--chakra-borders-8px:8px solid;--chakra-fonts-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-body:Lato,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--chakra-fontSizes-xs:0.75rem;--chakra-fontSizes-sm:0.875rem;--chakra-fontSizes-md:1rem;--chakra-fontSizes-lg:1.125rem;--chakra-fontSizes-xl:1.25rem;--chakra-fontSizes-2xl:1.5rem;--chakra-fontSizes-3xl:1.875rem;--chakra-fontSizes-4xl:2.25rem;--chakra-fontSizes-5xl:3rem;--chakra-fontSizes-6xl:3.75rem;--chakra-fontSizes-7xl:4.5rem;--chakra-fontSizes-8xl:6rem;--chakra-fontSizes-9xl:8rem;--chakra-fontWeights-hairline:100;--chakra-fontWeights-thin:200;--chakra-fontWeights-light:300;--chakra-fontWeights-normal:400;--chakra-fontWeights-medium:600;--chakra-fontWeights-semibold:600;--chakra-fontWeights-bold:800;--chakra-fontWeights-extrabold:800;--chakra-fontWeights-black:900;--chakra-letterSpacings-tighter:-0.05em;
7--chakra-letterSpacings-tight:-0.025em;--chakra-letterSpacings-normal:0;--chakra-letterSpacings-wide:0.025em;--chakra-letterSpacings-wider:0.05em;--chakra-letterSpacings-widest:0.1em;--chakra-lineHeights-3:.75rem;--chakra-lineHeights-4:1rem;--chakra-lineHeights-5:1.25rem;--chakra-lineHeights-6:1.5rem;--chakra-lineHeights-7:1.75rem;--chakra-lineHeights-8:2rem;--chakra-lineHeights-9:2.25rem;--chakra-lineHeights-10:2.5rem;--chakra-lineHeights-normal:normal;--chakra-lineHeights-none:1;--chakra-lineHeights-shorter:1.25;--chakra-lineHeights-short:1.375;--chakra-lineHeights-base:1.5;--chakra-lineHeights-tall:1.625;--chakra-lineHeights-taller:2;--chakra-radii-none:0;--chakra-radii-sm:0.125rem;--chakra-radii-base:0.25rem;--chakra-radii-md:0.375rem;--chakra-radii-lg:0.5rem;--chakra-radii-xl:0.75rem;--chakra-radii-2xl:1rem;--chakra-radii-3xl:1.5rem;--chakra-radii-full:9999px;--chakra-space-1:0.25rem;--chakra-space-2:0.5rem;--chakra-space-3:0.75rem;--chakra-space-4:1rem;--chakra-space-5:1.25rem;--chakra-space-6:1.5rem;--chakra-space-7:1.75rem;--chakra-space-8:2rem;--chakra-space-9:2.25rem;--chakra-space-10:2.5rem;--chakra-space-12:3rem;--chakra-space-14:3.5rem;--chakra-space-16:4rem;--chakra-space-20:5rem;--chakra-space-24:6rem;--chakra-space-28:7rem;--chakra-space-32:8rem;--chakra-space-36:9rem;--chakra-space-40:10rem;--chakra-space-44:11rem;--chakra-space-48:12rem;--chakra-space-52:13rem;--chakra-space-56:14rem;--chakra-space-60:15rem;--chakra-space-64:16rem;--chakra-space-72:18rem;--chakra-space-80:20rem;--chakra-space-96:24rem;--chakra-space-px:1px;--chakra-space-0\.5:0.125rem;--chakra-space-1\.5:0.375rem;--chakra-space-2\.5:0.625rem;--chakra-space-3\.5:0.875rem;--chakra-shadows-xs:0 0 0 1px rgba(0, 0, 0, 0.05);--chakra-shadows-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--chakra-shadows-base:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--chakra-shadows-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--chakra-shadows-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--chakra-shadows-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--chakra-shadows-2xl:0 25px 50px -12px rgba(0, 0, 0, 0.25);--chakra-shadows-outline:0 0 0 3px rgba(66, 153, 225, 0.6);--chakra-shadows-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--chakra-shadows-none:none;--chakra-shadows-dark-lg:rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px;--chakra-sizes-1:0.25rem;--chakra-sizes-2:0.5rem;--chakra-sizes-3:0.75rem;--chakra-sizes-4:1rem;--chakra-sizes-5:1.25rem;--chakra-sizes-6:1.5rem;--chakra-sizes-7:1.75rem;--chakra-sizes-8:2rem;--chakra-sizes-9:2.25rem;--chakra-sizes-10:2.5rem;--chakra-sizes-12:3rem;--chakra-sizes-14:3.5rem;--chakra-sizes-16:4rem;--chakra-sizes-20:5rem;--chakra-sizes-24:6rem;--chakra-sizes-28:7rem;--chakra-sizes-32:8rem;--chakra-sizes-36:9rem;--chakra-sizes-40:10rem;--chakra-sizes-44:11rem;--chakra-sizes-48:12rem;--chakra-sizes-52:13rem;--chakra-sizes-56:14rem;--chakra-sizes-60:15rem;--chakra-sizes-64:16rem;--chakra-sizes-72:18rem;--chakra-sizes-80:20rem;--chakra-sizes-96:24rem;--chakra-sizes-px:1px;--chakra-sizes-0\.5:0.125rem;--chakra-sizes-1\.5:0.375rem;--chakra-sizes-2\.5:0.625rem;--chakra-sizes-3\.5:0.875rem;--chakra-sizes-max:max-content;--chakra-sizes-min:min-content;--chakra-sizes-full:100%;--chakra-sizes-3xs:14rem;--chakra-sizes-2xs:16rem;--chakra-sizes-xs:20rem;--chakra-sizes-sm:24rem;--chakra-sizes-md:28rem;--chakra-sizes-lg:32rem;--chakra-sizes-xl:36rem;--chakra-sizes-2xl:42rem;--chakra-sizes-3xl:48rem;--chakra-sizes-4xl:56rem;--chakra-sizes-5xl:64rem;--chakra-sizes-6xl:72rem;--chakra-sizes-7xl:80rem;--chakra-sizes-8xl:90rem;--chakra-sizes-container-sm:640px;--chakra-sizes-container-md:768px;--chakra-sizes-container-lg:1024px;--chakra-sizes-container-xl:1280px;--chakra-zIndices-hide:-1;--chakra-zIndices-auto:auto;--chakra-zIndices-base:0;--chakra-zIndices-docked:10;--chakra-zIndices-dropdown:1000;--chakra-zIndices-sticky:1100;--chakra-zIndices-banner:1200;--chakra-zIndices-overlay:1300;--chakra-zIndices-modal:1400;--chakra-zIndices-popover:1500;--chakra-zIndices-skipLink:1600;--chakra-zIndices-toast:1700;--chakra-zIndices-tooltip:1800;--chakra-transition-property-common:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;--chakra-transition-property-colors:background-color,border-color,color,fill,stroke;--chakra-transition-property-dimensions:width,height;--chakra-transition-property-position:left,right,top,bottom;--chakra-transition-property-background:background-color,background-image,background-position;--chakra-transition-easing-ease-in:cubic-bezier(0.4, 0, 1, 1);--chakra-transition-easing-ease-out:cubic-bezier(0, 0, 0.2, 1);--chakra-transition-easing-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--chakra-transition-duration-ultra-fast:50ms;--chakra-transition-duration-faster:100ms;--chakra-transition-duration-fast:150ms;--chakra-transition-duration-normal:200ms;--chakra-transition-duration-slow:300ms;--chakra-transition-duration-slower:400ms;--chakra-transition-duration-ultra-slow:500ms;--chakra-blur-none:0;--chakra-blur-sm:4px;--chakra-blur-base:8px;--chakra-blur-md:12px;--chakra-blur-lg:16px;
7--chakra-blur-xl:24px;--chakra-blur-2xl:40px;--chakra-blur-3xl:64px;}</style><style data-emotion="css-global 1syi0wy">html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:'kern';}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type="number"]{-moz-appearance:textfield;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role="button"]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}</style><style data-emotion="css-global 1baqkrf">body{font-family:var(--chakra-fonts-body);color:var(--chakra-colors-gray-800);background:var(--chakra-colors-white);transition-property:background-color;transition-duration:var(--chakra-transition-duration-normal);line-height:var(--chakra-lineHeights-base);}*::-webkit-input-placeholder{color:var(--chakra-colors-gray-400);}*::-moz-placeholder{color:var(--chakra-colors-gray-400);}*:-ms-input-placeholder{color:var(--chakra-colors-gray-400);}*::placeholder{color:var(--chakra-colors-gray-400);}*,*::before,::after{border-color:var(--chakra-colors-gray-200);word-wrap:break-word;}</style><style data-emotion="css 1p0f5dv">.css-1p0f5dv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-padding-start:var(--chakra-space-6);padding-inline-start:var(--chakra-space-6);-webkit-padding-end:var(--chakra-space-6);padding-inline-end:var(--chakra-space-6);}@media screen and (min-width: 30em){.css-1p0f5dv{-webkit-padding-start:var(--chakra-space-8);padding-inline-start:var(--chakra-space-8);-webkit-padding-end:var(--chakra-space-8);padding-inline-end:var(--chakra-space-8);}}@media screen and (min-width: 62em){.css-1p0f5dv{-webkit-padding-start:var(--chakra-space-10);padding-inline-start:var(--chakra-space-10);-webkit-padding-end:var(--chakra-space-10);padding-inline-end:var(--chakra-space-10);}}</style><div class="css-1p0f5dv"><style data-emotion="css 1g9xi9a">.css-1g9xi9a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--chakra-space-10);padding-bottom:var(--chakra-space-20);-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;width:100%;}@media screen and (min-width: 30em){.css-1g9xi9a{-webkit-padding-start:var(--chakra-space-8);padding-inline-start:var(--chakra-space-8);-webkit-padding-end:var(--chakra-space-8);padding-inline-end:var(--chakra-space-8);padding-top:var(--chakra-space-16);padding-bottom:var(--chakra-space-20);width:100%;}}@media screen and (min-width: 62em){.css-1g9xi9a{-webkit-padding-start:var(--chakra-space-8);padding-inline-start:var(--chakra-space-8);-webkit-padding-end:var(--chakra-space-8);padding-inline-end:var(--chakra-space-8);padding-top:var(--chakra-space-20);padding-bottom:var(--chakra-space-20);width:55%;}}</style><div class="css-1g9xi9a"><style data-emotion="css j7qwjs">.css-j7qwjs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><div class="css-j7qwjs"><style data-emotion="css 9c056i">.css-9c056i{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:var(--chakra-fontSizes-3xl);line-height:1.33;padding-bottom:var(--chakra-space-4);}@media screen and (min-width: 30em){.css-9c056i{font-size:var(--chakra-fontSizes-3xl);padding-bottom:var(--chakra-space-4);}}@media screen and (min-width: 48em){.css-9c056i{font-size:var(--chakra-fontSizes-4xl);line-height:1.2;}}@media screen and (min-width: 62em){.css-9c056i{font-size:var(--chakra-fontSizes-5xl);padding-bottom:var(--chakra-space-6);}}</style><h2 class="chakra-heading css-9c056i"> Writing Interactive Blog Posts from the Browser</h2><style data-emotion="css mcoyno">.css-mcoyno{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:var(--chakra-space-12);}</style><div class="css-mcoyno"><style data-emotion="css 1g55hnu">.css-1g55hnu{position:relative;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.css-1g55hnu a[href]:not(.chakra-linkbox__overlay),.css-1g55hnu abbr[title]{position:relative;z-index:1;}</style><article class="chakra-linkbox css-1g55hnu"><style data-emotion="css 1hnz6hu">.css-1hnz6hu{position:static;}.css-1hnz6hu::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}</style><a href="https://blog.salto.so" class="chakra-linkbox__overlay css-1hnz6hu"><svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="40" height="40" colors="#315462,#366175,#FFDA72,#BDDDE6,#7CB0B6" name="Santiago VÃquez" size="40"><mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="20" fill="white"></rect></mask><g mask="url(#mask__beam)" fill="transparent"><rect width="36" height="36" rx="20" fill="#BDDDE6"></rect><rect x="0" y="0" width="36" height="36" transform="translate(4 4) rotate(190 18 18) scale(1.1)" fill="#315462" rx="6"></rect><g transform="translate(6 -6) rotate(0 18 18)"><path d="M15 20c2 1 4 1 6 0" stroke="white" fill="none" stroke-linecap="round"></path><rect x="14" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect><rect x="20" y="14" width="1.5" height="2" rx="1" stroke="none" fill="white"></rect></g></g></svg></a></article><style data-emotion="css 1cl1mgj">
7.css-1cl1mgj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-left:var(--chakra-space-2);}</style><div class="css-1cl1mgj"><p class="chakra-text css-0">Santiago VÃquez</p><style data-emotion="css h7ij3m">.css-h7ij3m{text-align:start;font-size:12px;color:#505050;}</style><p class="chakra-text css-h7ij3m">Jun 30, 2021</p></div></div></div><div><style data-emotion="css 1pn3b9">.css-1pn3b9{margin-top:0px;line-height:var(--chakra-lineHeights-tall);}</style><p class="chakra-text css-1pn3b9">Over the last couple of months, I have been having fun learning about 8<style data-emotion="css t3sbfb">.css-t3sbfb{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:var(--chakra-colors-blue-500);}.css-t3sbfb:hover,.css-t3sbfb[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-t3sbfb:focus,.css-t3sbfb[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a target="_blank" rel="noopener noreferrer" class="chakra-link css-t3sbfb" href="https://mdxjs.com/">MDX</a> which it describes itself as 9<em>"Markdown for the component era"</em>.</p> 10<style data-emotion="css 1l28ygi">.css-1l28ygi{width:98%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;overflow:hidden;-webkit-padding-start:var(--chakra-space-3);padding-inline-start:var(--chakra-space-3);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);padding-top:var(--chakra-space-3);padding-bottom:var(--chakra-space-3);border-inline-start-width:4px;border-inline-start-color:var(--chakra-colors-blue-500);background:var(--chakra-colors-blue-50);margin-top:var(--chakra-space-4);}.css-1l28ygi >*:first-of-type{margin-top:0;margin-left:8px;}</style><div role="alert" class="chakra-alert css-1l28ygi"> 11<p class="chakra-text css-1pn3b9">MDX is an authorable format that lets you seamlessly write JSX inyour Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast ð source: <a target="_blank" rel="noopener noreferrer" class="chakra-link css-t3sbfb" href="https://mdxjs.com/">mdx website</a></p> 12</div> 13<br/> 14<p class="chakra-text css-1pn3b9">MDX is amazing but to be able to start exploiting its capabilities 15you first need to spend weeks designing and building your own blog. 16Configuring the MDX component's styles, syntax highlighters, SEO, 17and a lot of troubleshooting.</p> 18<br/> 19<p class="chakra-text css-1pn3b9">There is no easy way to start an MDX-powered blog, <strong>until now!</strong></p> 20<style data-emotion="css 11ocuv9">.css-11ocuv9{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:var(--chakra-fontSizes-2xl);line-height:1.33;margin-bottom:1em;margin-top:2em;scroll-margin-top:100px;scroll-snap-margin:100px;}@media screen and (min-width: 48em){.css-11ocuv9{font-size:var(--chakra-fontSizes-3xl);line-height:1.2;}}.css-11ocuv9[id]{pointer-events:none;}.css-11ocuv9[id]:before{display:block;height:6rem;margin-top:-6rem;visibility:hidden;content:"";}.css-11ocuv9[id]:hover a{opacity:1;}</style><h2 class="chakra-heading css-11ocuv9"><style data-emotion="css 12m0k8p">.css-12m0k8p{pointer-events:auto;}</style><div class="css-12m0k8p">Introducing Salto</div></h2> 21<p class="chakra-text css-1pn3b9">This is why I'm building <a target="_blank" rel="noopener noreferrer" class="chakra-link css-t3sbfb" href="https://salto.so/">Salto</a>, a tool that 22let you write MDX syntax (Markdown + JSX) directly from 23the <strong>browser</strong> and publish it as a blog post with <strong>1-click</strong>!</p> 24<br/> 25<p class="chakra-text css-1pn3b9">Current Salto's main features are:</p> 26<style data-emotion="css z6lypa">.css-z6lypa{padding-top:var(--chakra-space-2);padding-left:var(--chakra-space-4);margin-left:var(--chakra-space-2);}</style><ul class="css-z6lypa"> 27<style data-emotion="css 12kznnm">.css-12kznnm{padding-bottom:var(--chakra-space-1);}</style><li class="css-12kznnm">Pre-built Components</li> 28<li class="css-12kznnm">Custom React Components</li> 29<li class="css-12kznnm">Language-based Syntax Highlighting</li> 30<li class="css-12kznnm">Custom Domains</li> 31</ul> 32<style data-emotion="css 2g5665">
32.css-2g5665{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:var(--chakra-fontSizes-xl);line-height:1.2;margin-bottom:1em;margin-top:2em;scroll-margin-top:100px;scroll-snap-margin:100px;}.css-2g5665[id]{pointer-events:none;}.css-2g5665[id]:before{display:block;height:6rem;margin-top:-6rem;visibility:hidden;content:"";}.css-2g5665[id]:hover a{opacity:1;}</style><h3 class="chakra-heading css-2g5665"><div class="css-12m0k8p">Pre-built Components</div></h3> 33<p class="chakra-text css-1pn3b9">Imagine adding react components to one of your blog posts, well here you can! 34Take advantage of all the <a target="_blank" rel="noopener noreferrer" class="chakra-link css-t3sbfb" href="https://chakra-ui.com/">Chakra-UI</a> components, because they are fully supported!</p> 35<br/> 36<style data-emotion="css v2pdm6">.css-v2pdm6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-v2pdm6>*:not(style)~*:not(style){margin-top:var(--chakra-space-4);-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;}@media screen and (min-width: 30em){.css-v2pdm6{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-v2pdm6>*:not(style)~*:not(style){margin-top:var(--chakra-space-4);-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;}}@media screen and (min-width: 48em){.css-v2pdm6{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-v2pdm6>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:var(--chakra-space-4);margin-inline-start:var(--chakra-space-4);}}@media screen and (min-width: 62em){.css-v2pdm6{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-v2pdm6>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:var(--chakra-space-4);margin-inline-start:var(--chakra-space-4);}}</style><div class="chakra-stack css-v2pdm6"><style data-emotion="css 1yxblfq">.css-1yxblfq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-6);min-width:var(--chakra-sizes-6);font-size:var(--chakra-fontSizes-xs);-webkit-padding-start:var(--chakra-space-2);padding-inline-start:var(--chakra-space-2);-webkit-padding-end:var(--chakra-space-2);padding-inline-end:var(--chakra-space-2);background:var(--chakra-colors-green-500);color:var(--chakra-colors-white);}.css-1yxblfq:focus,.css-1yxblfq[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1yxblfq[disabled],.css-1yxblfq[aria-disabled=true],.css-1yxblfq[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1yxblfq:hover,.css-1yxblfq[data-hover]{background:var(--chakra-colors-green-600);}.css-1yxblfq:hover[disabled],.css-1yxblfq[data-hover][disabled],.css-1yxblfq:hover[aria-disabled=true],.css-1yxblfq[data-hover][aria-disabled=true],.css-1yxblfq:hover[data-disabled],.css-1yxblfq[data-hover][data-disabled]{background:var(--chakra-colors-green-500);}.css-1yxblfq:active,.css-1yxblfq[data-active]{background:var(--chakra-colors-green-700);}</style><button type="button" class="chakra-button css-1yxblfq"><p class="chakra-text css-1pn3b9">Button</p></button><style data-emotion="css 1ea4osk">
36.css-1ea4osk{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-8);min-width:var(--chakra-sizes-8);font-size:var(--chakra-fontSizes-sm);-webkit-padding-start:var(--chakra-space-3);padding-inline-start:var(--chakra-space-3);-webkit-padding-end:var(--chakra-space-3);padding-inline-end:var(--chakra-space-3);background:var(--chakra-colors-blue-500);color:var(--chakra-colors-white);}.css-1ea4osk:focus,.css-1ea4osk[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1ea4osk[disabled],.css-1ea4osk[aria-disabled=true],.css-1ea4osk[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1ea4osk:hover,.css-1ea4osk[data-hover]{background:var(--chakra-colors-blue-600);}.css-1ea4osk:hover[disabled],.css-1ea4osk[data-hover][disabled],.css-1ea4osk:hover[aria-disabled=true],.css-1ea4osk[data-hover][aria-disabled=true],.css-1ea4osk:hover[data-disabled],.css-1ea4osk[data-hover][data-disabled]{background:var(--chakra-colors-blue-500);}.css-1ea4osk:active,.css-1ea4osk[data-active]{background:var(--chakra-colors-blue-700);}</style><button type="button" class="chakra-button css-1ea4osk"><p class="chakra-text css-1pn3b9">Button</p></button><style data-emotion="css qn08ru">.css-qn08ru{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-10);min-width:var(--chakra-sizes-10);font-size:var(--chakra-fontSizes-md);-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);background:var(--chakra-colors-purple-500);color:var(--chakra-colors-white);}.css-qn08ru:focus,.css-qn08ru[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-qn08ru[disabled],.css-qn08ru[aria-disabled=true],.css-qn08ru[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-qn08ru:hover,.css-qn08ru[data-hover]{background:var(--chakra-colors-purple-600);}.css-qn08ru:hover[disabled],.css-qn08ru[data-hover][disabled],.css-qn08ru:hover[aria-disabled=true],.css-qn08ru[data-hover][aria-disabled=true],.css-qn08ru:hover[data-disabled],.css-qn08ru[data-hover][data-disabled]{background:var(--chakra-colors-purple-500);}.css-qn08ru:active,.css-qn08ru[data-active]{background:var(--chakra-colors-purple-700);}</style><button type="button" class="chakra-button css-qn08ru"><p class="chakra-text css-1pn3b9">Button</p></button><style data-emotion="css b94rts">.css-b94rts{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;
36-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-12);min-width:var(--chakra-sizes-12);font-size:var(--chakra-fontSizes-lg);-webkit-padding-start:var(--chakra-space-6);padding-inline-start:var(--chakra-space-6);-webkit-padding-end:var(--chakra-space-6);padding-inline-end:var(--chakra-space-6);background:var(--chakra-colors-pink-500);color:var(--chakra-colors-white);}.css-b94rts:focus,.css-b94rts[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-b94rts[disabled],.css-b94rts[aria-disabled=true],.css-b94rts[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-b94rts:hover,.css-b94rts[data-hover]{background:var(--chakra-colors-pink-600);}.css-b94rts:hover[disabled],.css-b94rts[data-hover][disabled],.css-b94rts:hover[aria-disabled=true],.css-b94rts[data-hover][aria-disabled=true],.css-b94rts:hover[data-disabled],.css-b94rts[data-hover][data-disabled]{background:var(--chakra-colors-pink-500);}.css-b94rts:active,.css-b94rts[data-active]{background:var(--chakra-colors-pink-700);}</style><button type="button" class="chakra-button css-b94rts"><p class="chakra-text css-1pn3b9">Button</p></button></div> 37<br/> 38<style data-emotion="css d3q1rh">.css-d3q1rh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-d3q1rh>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:var(--chakra-space-10);margin-inline-start:var(--chakra-space-10);}</style><div class="chakra-stack css-d3q1rh"><style data-emotion="css 1uiwwan">.css-1uiwwan{cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:top;position:relative;}.css-1uiwwan[disabled],.css-1uiwwan[aria-disabled=true],.css-1uiwwan[data-disabled]{cursor:not-allowed;}</style><label class="chakra-checkbox css-1uiwwan" data-checked=""><input type="checkbox" class="chakra-checkbox__input" checked="" style="border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute"/><style data-emotion="css j3gx4">.css-j3gx4{width:var(--chakra-sizes-4);transition-property:box-shadow;transition-duration:var(--chakra-transition-duration-normal);border:2px solid;border-radius:var(--chakra-radii-sm);border-color:inherit;color:var(--chakra-colors-white);height:var(--chakra-sizes-4);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-j3gx4[aria-checked=true],.css-j3gx4[data-checked]{background:var(--chakra-colors-red-500);border-color:var(--chakra-colors-red-500);color:var(--chakra-colors-white);}.css-j3gx4[aria-checked=true]:hover,.css-j3gx4[data-checked]:hover,.css-j3gx4[aria-checked=true][data-hover],.css-j3gx4[data-checked][data-hover]{background:var(--chakra-colors-red-600);border-color:var(--chakra-colors-red-600);}.css-j3gx4[aria-checked=true][disabled],.css-j3gx4[data-checked][disabled],.css-j3gx4[aria-checked=true][aria-disabled=true],.css-j3gx4[data-checked][aria-disabled=true],.css-j3gx4[aria-checked=true][data-disabled],.css-j3gx4[data-checked][data-disabled]{border-color:var(--chakra-colors-gray-200);background:var(--chakra-colors-gray-200);color:var(--chakra-colors-gray-500);}.css-j3gx4:indeterminate,.css-j3gx4[aria-checked=mixed],.css-j3gx4[data-indeterminate]{background:var(--chakra-colors-red-500);border-color:var(--chakra-colors-red-500);color:var(--chakra-colors-white);}.css-j3gx4[disabled],.css-j3gx4[aria-disabled=true],.css-j3gx4[data-disabled]{background:var(--chakra-colors-gray-100);border-color:var(--chakra-colors-gray-100);}.css-j3gx4:focus,.css-j3gx4[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-j3gx4[aria-invalid=true],.css-j3gx4[data-invalid]{border-color:var(--chakra-colors-red-500);}</style><span class="chakra-checkbox__control css-j3gx4" data-checked="" aria-hidden="true"><div style="display:flex;align-items:center;justify-content:center;height:100%;transform:none"><style data-emotion="css 1r69mki">.css-1r69mki{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);font-size:0.625rem;transition-property:transform;transition-duration:var(--chakra-transition-duration-normal);width:1.2em;}</style><svg viewBox="0 0 12 10" style="fill:none;stroke-width:2;stroke:currentColor;stroke-dasharray:16;opacity:1;stroke-dashoffset:0" class="css-1r69mki"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg></div></span><style data-emotion="css 1sgc0qu">.css-1sgc0qu{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--chakra-fontSizes-md);}.css-1sgc0qu[disabled],.css-1sgc0qu[aria-disabled=true],.css-1sgc0qu[data-disabled]{opacity:0.4;}</style><span class="chakra-checkbox__label css-1sgc0qu" data-checked=""><p class="chakra-text css-1pn3b9">Click me!</p></span></label><label class="chakra-checkbox css-1uiwwan"><input type="checkbox" class="chakra-checkbox__input" style="border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute"/><style data-emotion="css 3a538a">.css-3a538a{width:var(--chakra-sizes-4);
38transition-property:box-shadow;transition-duration:var(--chakra-transition-duration-normal);border:2px solid;border-radius:var(--chakra-radii-sm);border-color:inherit;color:var(--chakra-colors-white);height:var(--chakra-sizes-4);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-3a538a[aria-checked=true],.css-3a538a[data-checked]{background:var(--chakra-colors-green-500);border-color:var(--chakra-colors-green-500);color:var(--chakra-colors-white);}.css-3a538a[aria-checked=true]:hover,.css-3a538a[data-checked]:hover,.css-3a538a[aria-checked=true][data-hover],.css-3a538a[data-checked][data-hover]{background:var(--chakra-colors-green-600);border-color:var(--chakra-colors-green-600);}.css-3a538a[aria-checked=true][disabled],.css-3a538a[data-checked][disabled],.css-3a538a[aria-checked=true][aria-disabled=true],.css-3a538a[data-checked][aria-disabled=true],.css-3a538a[aria-checked=true][data-disabled],.css-3a538a[data-checked][data-disabled]{border-color:var(--chakra-colors-gray-200);background:var(--chakra-colors-gray-200);color:var(--chakra-colors-gray-500);}.css-3a538a:indeterminate,.css-3a538a[aria-checked=mixed],.css-3a538a[data-indeterminate]{background:var(--chakra-colors-green-500);border-color:var(--chakra-colors-green-500);color:var(--chakra-colors-white);}.css-3a538a[disabled],.css-3a538a[aria-disabled=true],.css-3a538a[data-disabled]{background:var(--chakra-colors-gray-100);border-color:var(--chakra-colors-gray-100);}.css-3a538a:focus,.css-3a538a[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-3a538a[aria-invalid=true],.css-3a538a[data-invalid]{border-color:var(--chakra-colors-red-500);}</style><span class="chakra-checkbox__control css-3a538a" aria-hidden="true"></span><span class="chakra-checkbox__label css-1sgc0qu"><p class="chakra-text css-1pn3b9">No, click me!</p></span></label></div> 39<br/> 40<style data-emotion="css nd8846">.css-nd8846{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-nd8846>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:var(--chakra-space-4);margin-inline-start:var(--chakra-space-4);}</style><div class="chakra-stack css-nd8846"><style data-emotion="css fxde67 animation-b7n1on">.css-fxde67{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:4px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:0.75rem;color:var(--chakra-colors-blue-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-fxde67"><style data-emotion="css f8n5zr">.css-f8n5zr{border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute;}</style><span class="css-f8n5zr">Loading...</span></div><style data-emotion="css 1uezscl animation-b7n1on">.css-1uezscl{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:4px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:1rem;color:var(--chakra-colors-blue-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-1uezscl"><span class="css-f8n5zr">Loading...</span></div><style data-emotion="css 1n08598 animation-b7n1on">.css-1n08598{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:4px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:1.5rem;color:var(--chakra-colors-blue-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-1n08598"><span class="css-f8n5zr">Loading...</span></div><style data-emotion="css 1uf0phr animation-b7n1on">.css-1uf0phr{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:4px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:2rem;color:var(--chakra-colors-blue-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-1uf0phr"><span class="css-f8n5zr">Loading...</span></div><style data-emotion="css 17lgtxu animation-b7n1on">.css-17lgtxu{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:4px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:3rem;color:var(--chakra-colors-blue-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-17lgtxu"><span class="css-f8n5zr">Loading...</span></div></div> 41<h3 class="chakra-heading css-2g5665"><div class="css-12m0k8p">Custom Components</div></h3> 42<p class="chakra-text css-1pn3b9">And in case you want to write your own components we have you covered! Add custom JSX into yout blog posts.</p> 43<br/> 44<div style="padding:10px;background-color:orange"><h3>This is JSX inside Markdown</h3></div> 45<br/> 46<p class="chakra-text css-1pn3b9">This code made the upper banner possible.</p> 47<pre><div style="display:block;overflow-x:auto;padding:0.5em;background:#011627;color:#d6deeb;border-radius:10px;margin-top:15px;margin-bottom:15px;padding-top:30px;padding-left:20px;border:3px solid #CBD5E0"><code class="language-html" style="white-space:pre"><span class="xml" style="color:#7fdbca"><</span><span class="xml" style="color:#7fdbca">div</span><span class="xml" style="color:#7fdbca"> </span><span class="xml" style="color:#7fdbca">style</span><span class="xml" style="color:#7fdbca">=</span><span style="color:#addb67">{{ </span><span style="color:#7fdbca">padding:</span><span style="color:#addb67"> </span><span style="color:#ecc48d">"10px"</span><span style="color:#addb67">, backgroundColor: </span><span style="color:#ecc48d">"orange"</span><span style="color:#addb67"> }}</span><span class="xml" style="color:#7fdbca">></span><span class="xml"> 48</span><span class="xml"> </span><span class="xml" style="color:#7fdbca"><</span><span class="xml" style="color:#7fdbca">
48h3</span><span class="xml" style="color:#7fdbca">></span><span class="xml">This is JSX inside Markdown</span><span class="xml" style="color:#7fdbca"></</span><span class="xml" style="color:#7fdbca">h3</span><span class="xml" style="color:#7fdbca">></span><span class="xml"> 49</span><span class="xml"></span><span class="xml" style="color:#7fdbca"></</span><span class="xml" style="color:#7fdbca">div</span><span class="xml" style="color:#7fdbca">></span><span class="xml"> 50</span><span class="xml"> 51</span></code></div></pre> 52<h3 class="chakra-heading css-2g5665"><div class="css-12m0k8p">Syntax Highlighting</div></h3> 53<p class="chakra-text css-1pn3b9">Ditch your <del>Medium</del> blog with boring gray code snippets. 54We provide beautiful code snippets with 0 setup required.</p> 55<pre><div style="display:block;overflow-x:auto;padding:0.5em;background:#011627;color:#d6deeb;border-radius:10px;margin-top:15px;margin-bottom:15px;padding-top:30px;padding-left:20px;border:3px solid #CBD5E0"><code class="language-javascript" style="white-space:pre"><span style="color:#637777;font-style:italic">// program to add two numbers using a function</span><span> 56</span><span></span><span style="color:#637777;font-style:italic">// declaring a function</span><span> 57</span><span></span><span style="color:#c792ea;font-style:italic">function</span><span style="color:#82AAFF"> </span><span style="color:#DCDCAA;font-style:italic">add</span><span style="color:#82AAFF">(</span><span style="color:#7fdbca">a, b</span><span style="color:#82AAFF">) </span><span>{ 58</span><span> </span><span style="color:#addb67;font-style:italic">console</span><span>.log(a + b); 59</span>} 60<!-- --> 61<span></span><span style="color:#637777;font-style:italic">// calling functions</span><span> 62</span><span>add(</span><span style="color:#F78C6C">3</span><span>,</span><span style="color:#F78C6C">4</span><span>); 63</span><span>add(</span><span style="color:#F78C6C">2</span><span>,</span><span style="color:#F78C6C">9</span><span>); 64</span> 65</code></div></pre> 66<h3 class="chakra-heading css-2g5665"><div class="css-12m0k8p">Custom domains</div></h3> 67<p class="chakra-text css-1pn3b9">Donât get trapped inside a platform. Publish your content to a 68custom domain.</p> 69<p class="chakra-text css-1pn3b9">Salto is the next level of interactivity that your blog needs. 70If you want to give Salto a try leave us your email and we'll notify 71you when it's ready.</p> 72<br/></div><style data-emotion="css f4h6uy">.css-f4h6uy{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;}.css-f4h6uy:hover,.css-f4h6uy[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-f4h6uy:focus,.css-f4h6uy[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-f4h6uy" href="https://www.salto.so/"><style data-emotion="css l9m2cf">.css-l9m2cf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:fixed;-webkit-align-self:end;-ms-flex-item-align:end;align-self:end;bottom:var(--chakra-space-4);right:var(--chakra-space-4);background-color:var(--chakra-colors-white);border-radius:5px;border:var(--chakra-borders-1px);border-color:var(--chakra-colors-gray-300);-webkit-padding-start:var(--chakra-space-2);padding-inline-start:var(--chakra-space-2);-webkit-padding-end:var(--chakra-space-2);padding-inline-end:var(--chakra-space-2);padding-top:var(--chakra-space-2);padding-bottom:var(--chakra-space-2);}</style><div class="css-l9m2cf"><style data-emotion="css wynu7v">.css-wynu7v{height:16px;width:auto;padding-right:var(--chakra-space-2);}</style><img src="/salto_icon.svg" class="chakra-image css-wynu7v"/><style data-emotion="css qo8jf1">.css-qo8jf1{font-weight:var(--chakra-fontWeights-semibold);font-size:12px;color:#505050;}</style><p class="chakra-text css-qo8jf1">Published with Salto</p></div></a><style data-emotion="css a5wxmy">.css-a5wxmy{margin-top:var(--chakra-space-12);}@media screen and (min-width: 30em){.css-a5wxmy{margin-top:var(--chakra-space-12);}}@media screen and (min-width: 62em){.css-a5wxmy{margin-top:var(--chakra-space-16);}}</style><div class="css-a5wxmy"></div></div></div><span></span></div>
72<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"writing-interactive-blog-posts-from-the-browser-blog","site":{"id":"28Qv4S1fijRaHpUnmYky","siteUrl":"blog","authorId":"i1XNPLZyM4cecLYzvhsyHaC0SCH3","createdAt":"2021-06-30T01:21:02.897Z","highlighter":"nightOwl"},"author":{"id":"i1XNPLZyM4cecLYzvhsyHaC0SCH3","uid":"i1XNPLZyM4cecLYzvhsyHaC0SCH3","email":"[email protected]","displayName":"Santiago VÃquez","githubUrl":"https://github.com/santiviquez","facebookUrl":"","twitterUrl":"https://twitter.com/santiviquez","bio":"Physicist turned data scientist. Building the easiest way to start a dev blog\nCreator of datasciencetrivia.com - Learn data science the fun"},"post":{"id":"gNIkaGXUXs7lw02PxtRI","siteUrl":"blog","authorId":"i1XNPLZyM4cecLYzvhsyHaC0SCH3","createdAt":"2021-06-30T01:21:02.897Z","siteId":"28Qv4S1fijRaHpUnmYky","isPublished":true,"content":{"inputText":"# Writing Interactive Blog Posts from the Browser\n\nOver the last couple of months, I have been having fun learning about \n[MDX](https://mdxjs.com/) which it describes itself as\n*\"Markdown for the component era\"*.\n\n\u003e MDX is an authorable format that lets you seamlessly write JSX inyour Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast ð source: [mdx website](https://mdxjs.com/)\n\n\u003cbr /\u003e\n\nMDX is amazing but to be able to start exploiting its capabilities\nyou first need to spend weeks designing and building your own blog.\nConfiguring the MDX component's styles, syntax highlighters, SEO,\nand a lot of troubleshooting.\n\u003cbr /\u003e\n\nThere is no easy way to start an MDX-powered blog, **until now!**\n\n\n## Introducing Salto\nThis is why I'm building [Salto](https://salto.so/), a tool that\nlet you write MDX syntax (Markdown + JSX) directly from\nthe **browser** and publish it as a blog post with **1-click**!\n\n\u003cbr /\u003e\n\nCurrent Salto's main features are:\n\n* Pre-built Components\n* Custom React Components\n* Language-based Syntax Highlighting\n* Custom Domains\n\n### Pre-built Components\nImagine adding react components to one of your blog posts, well here you can!\nTake advantage of all the [Chakra-UI](https://chakra-ui.com/) components, because they are fully supported!\n\n\u003cbr /\u003e\n\n\u003cStack spacing={4} direction={{lg:\"row\", md:\"row\", sm:\"column\", base:\"column\"}} align=\"center\"\u003e\n \u003cButton colorScheme=\"green\" size=\"xs\"\u003e\n Button\n \u003c/Button\u003e\n \u003cButton colorScheme=\"blue\" size=\"sm\"\u003e\n Button\n \u003c/Button\u003e\n \u003cButton colorScheme=\"purple\" size=\"md\"\u003e\n Button\n \u003c/Button\u003e\n \u003cButton colorScheme=\"pink\" size=\"lg\"\u003e\n Button\n \u003c/Button\u003e\n\u003c/Stack\u003e\n\u003cbr /\u003e\n\u003cStack spacing={10} direction=\"row\"\u003e\n \u003cCheckbox colorScheme=\"red\" defaultIsChecked\u003e\n Click me!\n \u003c/Checkbox\u003e\n \u003cCheckbox colorScheme=\"green\"\u003e\n No, click me!\n \u003c/Checkbox\u003e\n\u003c/Stack\u003e\n\u003cbr /\u003e\n\u003cStack direction=\"row\" spacing={4}\u003e\n \u003cSpinner\n thickness=\"4px\"\n speed=\"0.65s\"\n emptyColor=\"gray.200\"\n color=\"blue.500\"\n size=\"xs\"\n /\u003e\n \u003cSpinner\n thickness=\"4px\"\n speed=\"0.65s\"\n emptyColor=\"gray.200\"\n color=\"blue.500\"\n size=\"sm\"\n /\u003e\n \u003cSpinner\n thickness=\"4px\"\n speed=\"0.65s\"\n emptyColor=\"gray.200\"\n color=\"blue.500\"\n size=\"md\"\n /\u003e\n \u003cSpinner\n thickness=\"4px\"\n speed=\"0.65s\"\n emptyColor=\"gray.200\"\n color=\"blue.500\"\n size=\"lg\"\n /\u003e\n \u003cSpinner\n thickness=\"4px\"\n speed=\"0.65s\"\n emptyColor=\"gray.200\"\n color=\"blue.500\"\n size=\"xl\"\n /\u003e\n\u003c/Stack\u003e\n\n### Custom Components\nAnd in case you want to write your own components we have you covered! Add custom JSX into yout blog posts.\n\u003cbr /\u003e\n\n\u003cdiv style={{ padding: \"10px\", backgroundColor: \"orange\" }}\u003e\n \u003ch3\u003eThis is JSX inside Markdown\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nThis code made the upper banner possible.\n```html\n\u003cdiv style={{ padding: \"10px\", backgroundColor: \"orange\" }}\u003e\n \u003ch3\u003eThis is JSX inside Markdown\u003c/h3\u003e\n\u003c/div\u003e\n```\n\n### Syntax Highlighting\nDitch your ~Medium~ blog with boring gray code snippets.\nWe provide beautiful code snippets with 0 setup required.\n\n```javascript\n// program to add two numbers using a function\n// declaring a function\nfunction add(a, b) {\n console.log(a + b);\n}
72\n\n// calling functions\nadd(3,4);\nadd(2,9);\n```\n\n### Custom domains\nDonât get trapped inside a platform. Publish your content to a\ncustom domain.\n\nSalto is the next level of interactivity that your blog needs.\nIf you want to give Salto a try leave us your email and we'll notify\nyou when it's ready.\n\u003cbr /\u003e\n"},"slug":"writing-interactive-blog-posts-from-the-browser-blog"}},"__N_SSG":true},"page":"/p/[slug]","query":{"slug":"writing-interactive-blog-posts-from-the-browser-blog"},"buildId":"91wx7SFXGzAUxnuPorr1G","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
72<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
72<script type="text/javascript"> 73 Paddle.Setup({ vendor: 132148 });</script>
73</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.