Embed
Nonex lets you render Notion embeds exactly as they appear on your Notion page, directly on your website. Supported embeds include Twitter, Figma, Spotify, CodeSandbox, CodePen, Excalidraw, Google Maps, Google Forms, GitHub Gist, and more.
Embed Block in Nonex
With the Embed block in Notion, you can seamlessly integrate various external content into your Notion pages. Nonex enhances this functionality by allowing you to render these embeds exactly as they appear in Notion, directly on your website.
Supported Embeds in Nonex
1. Twitter Embed (Tweet Card)
Nonex uses react-tweet to statically render any tweet on your site. Note that this rendering is server-side.
✅New Year ✅New Page ✅New You 2025 is near! Here are our favorite templates to start your year! 🧵
Next.js 15.1 • React 19 (stable) • Improved errors and source maps • `after` (stable) • `forbidden` / `unauthorized` (experimental) • CSS inlining (experimental) nextjs.org/15-1
2. Figma Embed
We use the iframe tag to embed Figma files, rendering them on the client side.
3. Spotify Embed
Using an iframe, Nonex lets you embed song previews, artist profiles, albums, tracks, and playlists from Spotify. Please note that only previews are supported, not full tracks. This is a client-side embed.
4. CodeSandbox Embed
CodeSandbox projects can be embedded on your site using an iframe, and this is also client-side.
5. CodePen Embed
With iframe support for CodePen projects, you can display your code snippets, including the ability to switch between dark and light themes based on the website's theme. This is also a client-side embed.
6. Excalidraw Embed
We use iframe to embed Excalidraw files, rendering them client-side.
7. Google Map Embed
Nonex uses an iframe to embed Google Maps on your site. If you have a Google Maps API key, you can use it for embedding. However, if you don't have the key, simply copy the embed URL from Google Maps and paste it into Notion. Nonex will render the map without needing the API key. This is a client-side embed.
8. Embed Google Forms
Google Forms can be embedded using the iframe tag on the client side.
9. GitHub Gist Embed
By embedding a GitHub Gist URL in Notion, we render it using react-gist, which is also client-side.
10. Default Embed
For other types of embeds, Nonex uses the iframe tag to render any content you wish, enabling you to easily integrate additional third-party tools and media.
This documentation provides a comprehensive guide for users to take advantage of various embedding features in Nonex.