The Mirror Editor enables composing entries with Media Blocks, such as embedded NFTs from across the Ethereum ecosystem, Subscribe to Mint NFTs, images and videos, along with Action Blocks including “subscribe” and “mint entry”. It uses plain text and Markdown with a few formatting conventions.
Modes
Composition takes place in Edit mode. To preview your entry as it will appear when it is live on Mirror, enter Preview mode by clicking on the arrow button in the toolbar (the arrow will appear after entering an entry title and body):
Blocks
To easily create a Media Block from the Editor toolbar, first click inside your entry to place the cursor where you’d like the Block to appear. Next, click the Blocks area of the toolbar, or focus with the keyboard shortcut ⌘+/. The Blocks menu will appear, showing you all available Blocks. Selecting a Block may prompt you for secondary information. Once you’re done, confirm the information to insert the Block into your entry.
Media Blocks can also be created via hyperlink with a simple formatting convention: an individual link on its own line of text. To manually create a Block, insert a new line of text, add a link, then add a line break. Ensure that the new line only contains a single link. Here is an example which creates a Youtube video Block.
Powers of Ten illustrates the universe as an arena of both continuity and change, of everyday picnics and cosmic mystery.
[Powers of Ten](https://www.youtube.com/watch?v=0fKBhvDjuy0)
We hear about scale every day, whether it be supertankers, stars burning thousands of lightyears away, the study of microscopic viruses, or global warming. Understanding scale, or as the Eameses said, “the effect of adding another zero,” has the power to make us better scholars and better citizens.Mirror parses basic links—as opposed to introducing Mirror-specific syntax—to ensure portability. If the markdown is rendered with Mirror, you will see a Mirror Block. If it’s rendered anywhere else, you will see a simple plain text link.
Images
Images can be embedded by dragging and dropping them into the Editor, selecting Image in the Blocks menu, or manually creating a markdown image tag. Reserving the space of the image prior to embedding is possible by defining the width and height query parameters, which are automatically set when uploading an image to Mirror.
You can read more about suggested image dimensions and file formats here.
Link previews
Mirror displays a progressively enhanced preview of all links based on the universal standard of OpenGraph tags.
[Mirror](https://mirror.xyz)
Tweets
Embed an individual Tweet or an entire tweet thread by inserting a link to any tweet's URL.
[Mirror’s first tweet](https://twitter.com/viamirror/status/1325856116748726273)Videos
Videos can be embedded by clicking the “Video” icon in the Blocks toolbar. You can paste a link to a YouTube, Vimeo, or hosted MP4 video. Any of these URLs pasted directly into the Editor will also automatically unfurl into video embeds.
Advanced video embeds
Embed an .mp4 video by inserting a link to an externally hosted video file. It is also possible to set autoplay, muted, loop and controls by setting the related query parameters. Ensure you manually define the width and height parameters to reserve the vertical space for your video.
[Powers of Ten](https://jkm-library.s3.amazonaws.com/blocks/powers-of-10.mp4?height=480&width=640&autoplay=true&loop=true&muted=true)
NFT embeds
NFT Embeds support static images, animations, and audio. As a result, you can embed your favorite PFP, art, and music into your blog post - from any of the blockchains we support. Simply add the network, contract address, and token ID to include the NFT in your entry.
Embedded NFTs will be collectable directly from your entry.
Learn more about NFT Embeds here.
iFrames
It’s possible to embed any web page by creating an iFrame block. This is useful when embedding interactive WebGL content, for example. Simply set display=iframe as a query parameter.
[ThreeJS Demo](https://threejs.org/examples/webgl_water_flowmap.html?display=iframe)Please note that in some cases, you may need to use "&display=iframe" instead of "?".
Layout sizes
If you’re looking to create a more "editorial"-style layout for your entry, consider setting custom layout sizes for certain media blocks. Supported block types include Image, Video, YouTube and iFrame.