Magic Lantern Examples

Magic Lantern makes it easy to let visitors share customized media on Twitter. Just include the script (<1kb compressed) and start sharing with one line of code. Magic Lantern supports every type of media attachment that Twitter does, and couldn't be easier to integrate: just hand it a canvas, or a blob, or an HTTPS URL, or a data URL, and it'll take care of the rest. Here are some practical examples. Even though this page is hosted on the magiclantern.club domain, these will all work anywhere on the web.

Canvas

The HTML5 canvas API the most basic way to draw an image in JavaScript. Libraries like p5.js or d3 can render to canvas, but here we're just drawing some simple trees.

HTML

The canvas API is powerful, but if you're dealing with text and complicated layout, it's much easier to work in HTML and CSS. The div below is editable, so try changing the text before you tweet it. Rendering HTML as an image is a complicated process in its own right, so Magic Lantern doesn't do it itself. This example uses html2canvas.

“What a beautiful and inspiring unit of content!”
—Albert Einstein

GIFs

Magic Lantern can also post animated GIFs. If you're running Chrome or Firefox, this example uses Gifshot to record a GIF with your webcam.

External Images

Magic Lantern can also load media from a url, as long as it respects the same-origin policy. Flickr sends the proper headers, so we can directly tweet an image hosted there.

Multiple Images

Twitter allows multiple images in a Tweet, and Magic Lantern makes it easy. Just pass an array of media.