The Mirror Editor enables composing entries with media blocks, such as images and videos, along with crypto economic blocks, like crowdfunds and auctions. 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 on your publication enter Preview mode. You can toggle between them with the related buttons in the toolbar.
Creating blocks
To easily create a media or economic block, first click inside your entry to place the curser 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 prompts you for secondary information. Once you’re satisfied, confirm the information to insert the block into your entry.
Blocks
Media embeds and economic blocks on Mirror are recognized with a simple formatting convention: an individual link on it’s 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 embed.
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.
We’ve decided to parse 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 anywhere else, you’ll see a simple plain text link. There are a number of integrations, and we’re adding more every week.
Images
Embedding images is possible by dragging and dropping into the editor, selecting Image in the blocks menu, or manually creating a markdown image tag. Reserving the space of the image prior to loading is possible by defining the width and height query parameters, which are automatically set when uploading an image to Mirror.
Link previews
Mirror displays a progressively enhanced preview of all links based on the universal standard of OpenGraph tags.
[Mirror](https://mirror.xyz)
Embed an individual Tweet or an entire Tweet thread by inserting a link to any Twitter URL.
[Mirror’s first tweet](https://twitter.com/viamirror/status/1325856116748726273)
Youtube
[Powers of Ten](https://www.youtube.com/watch?v=0fKBhvDjuy0)
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, can embed your favorite PFP, art, and music into your blog post - whether on Mainnet, Optimism or Polygon. Simply add the network, contract address, and token ID to include the NFT in your blog post.
You can read more about NFT Embeds here
iFrames
It’s possible to embed any 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 layout for your entry, consider setting custom layout sizesfor certain media blocks. Supported block types include Image, Video, Youtube and iFrame.
The block size is set with a query parameter, and it is possible to choose from both medium and large. For example, below is a large image which extends to the edges of the page.
