Buttondown has a built-in WYSIWYG editor (in addition to the markdown editor) that allows you to view and edit your emails in a way that resembles how they will be formatted when they are sent.
Fancy mode comes with a variety of different built-in components. To view the different options, use the toolbar at the top of the editor or type "/" on a new line.
In Fancy Mode, you also have a variety of text formatting options. This includes things like:
To access text formatting, you'll select the text you'd like to format, and a tooltip will pop-up with the available options.
The available email-safe font options are:
Emojis are fully supported in the editor.
Not sure which emoji to use? Simply type a colon (":") followed by a word describing the emoji (e.g., "happy") to see some suggestions.
Shortcut: You can add a block quote by typing > followed by a space.
Text inside a pull quote is italicized and centered, as opposed to a block quote.
Tables are a great way to display data in a structured format. Buttondown formats tables with a subtle border by default, but you can also remove that border if you're using a table for a design element to align items horizontally.
Use a poetry block if you want the text to maintain its spacing when it is published — useful, for example, for poetry. (Internally, we render poetry blocks as <pre> tags, which is why the spacing is preserved.)
Code blocks are automatically syntax highlighted based on the programming language.
Shortcut: type 3 backticks followed by the programming language and press enter (for example: ```python).
Adding a footnote will add 2 things in the editor:
Note: when you delete a footnote reference, the corresponding footnote will also be deleted.
Shortcut: add a footnote by typing [^text], "text" being any string sequence.
A LaTeX block allows you to write & render LaTeX content inside the editor. (Note that as of now, LaTeX is only renderable as a "block", and not inline with text.)
Shortcut: add a LaTeX block by typing your expression inside two dollar signs ($$) and pressing space/enter.
A divider is a horizontal line that sits between 2 pieces of content.
Shortcut: add a divider by typing 3 dashes or underscores & pressing space/enter.
You can either upload your own image or use a stock photo from Unsplash.
Buttondown has a built-in Unsplash integration, allowing you to search & embed high-quality images without leaving the app.
To search for images on Unsplash, click Find image on Unsplash using the slash menu and a modal will pop up. Search for the image that you want and click on it for it to be added to your email.
To upload an image, you can drag and drop the image into the editor, or type /image on a new line to attach the image file.
Once the image is uploaded you can add a caption. This will appear for all readers, right below the image.
You have the option to make your image into a link. To do this, click the "Add link" button at the bottom of the image
Alt text is an important tool for visually impaired users to be able to access the content of your page, and also for search engine bots to index your archives. This text should be set on every image, by clicking the "Edit" button at the bottom of the image.
You can ask Buttondown to generate this text, or write your own. (Or maybe do a mix of both!)
The best alt text describes exactly what's happening in the image. Instead of "A cat in box", consider "A black and white cat staring straight ahead while sitting inside an open cardboard box"
If you're using custom CSS you can set a class name for the image to make it easier to style.
By default, Buttondown compresses your images to reduce the size of your email. If you'd prefer to turn this off, you can by clicking the "Edit" button at the bottom of the image.
Finally, you can add all sorts of dynamic blocks in Fancy Mode, including:
A webwall enables you to add content that will only be displayed on the web. Any content below the webwall will not be included in the email sent to email clients.
An emailwall enables you to add content that will only be displayed in the email sent to subscribers. Any content below the emailwall will not be included in the web version of your email.
A paywall enables you to add content that will only be displayed to premium subscribers.
Add a subscription form to allow your readers to easily subscribe to your newsletter from within the email.
A subscription button is a CTA button that links to your newsletter's URL, allowing people to subscribe to your newsletter there.
Free/premium blocks are a way to display content to your subscribers based on their subscription status:
Search and link to another email by typing two opening square brackets ("[["), this will open up a list of your emails.
Snippets are reusable blocks of content that you can insert into your emails. Type /snippet or use the command menu to insert a snippet.
Comments are a way to add notes to your email. They are not displayed to your subscribers, but can be useful for you to keep track of your thoughts, or to share with your team.
Buttondown doesn't support native audio uploading like we do with images, nor do we have active plans on supporting it. However, we do have integrations with many other platforms, including:
Your best bet at the moment is to upload your audio to one of those platforms and then add it to your newsletter.