Widgets

Widgets are powerful content blocks that help you create rich, engaging blog posts. Access them by typing / on a new line to open the widget menu, and start typing to find one to use.

You can see all the widgets available, how to use them, and actually see each of them embedded in the page.

Image

Add images to your posts from multiple sources - upload from your device, search Unsplash's library of free photos, or use images from your media library.

Screenshot 2026-01-01 at 7.54.46 AM.png
Shot by the founder of Superblog

How to add an image:

  • Type /image and press Enter

  • Or drag and drop an image directly into the editor

  • Or paste an image from your clipboard

Image sources:

  • Upload - Select images from your device (supports JPG, PNG, GIF, WebP)

  • Unsplash - Search millions of free, high-quality photos

  • My Media - Choose from images you've previously uploaded

Note:

  • Add alt text for accessibility and SEO (required)

  • Images are automatically optimized for web delivery

📸 Tip: Always add descriptive alt text to your images. It helps with SEO and makes your content accessible to readers using screen readers.

Display multiple images in a beautiful, responsive layout. Perfect for showcasing a collection of photos, product images, or visual stories.

aerial view photography of body of water across green mountains
Photo by Jonny Auh on Unsplash
field and mountain near body of water
Photo by Josh Reid on Unsplash
glacier near body of water
Photo by Emma Francis on Unsplash
aerial photography of waterfalls near mountains at daytime
Photo by Robert Bye on Unsplash
green mountain under white sky
Photo by Alex Talmon on Unsplash
Iceland is on the same planet as ours

  • Type /gallery and press Enter

  • Select up to 9 images from Upload, Unsplash, or My Media

  • Images automatically arrange in an optimized layout

Gallery layout:The gallery uses an intelligent auto-layout that distributes images across rows based on their aspect ratios, similar to how photos appear in professional publications. Images are arranged to create a visually balanced composition.

Features:

  • Supports 2-9 images per gallery

  • Responsive design adapts to screen size

  • Click any image to view in lightbox

  • Navigate between images with arrow keys in lightbox

🖼️ Tip: For best results, use images with different aspect ratios to let the auto-layout handle the mosaic arrangement.

YouTube Video

Embed YouTube videos directly in your posts. Videos are embedded responsively and work on all devices.

How to embed a video:

  • Type /youtube and press Enter

  • Paste the YouTube video URL

  • Choose your preferred size (small, medium, or large)

Supported URL formats:

  • https://www.youtube.com/watch?v=VIDEO_ID

  • https://youtu.be/VIDEO_ID

Size options:

  • Small - Compact size for supplementary content

  • Medium - Balanced size for most use cases

  • Large - Full-width for featured videos

🎬 Tip: Videos are lazy-loaded for better page performance. They only load when readers scroll them into view.

Tweet / X Post

Embed tweets and X posts to add social proof, quotes, or conversations to your content.

How to embed a tweet:

  • Type /tweet and press Enter

  • Paste the tweet URL

Supported URL formats:

  • https://twitter.com/username/status/ID

  • https://x.com/username/status/ID

The embedded tweet displays the author's profile picture, name, handle, tweet content, and engagement metrics just like it appears on X/Twitter.

Table

Create data tables with customizable rows and columns. Perfect for comparisons, pricing, schedules, or any structured data.

Example Column 1

Example Column 2

Example Column 3

Example Row 1

Example Row 1

Example Row 1

Example Row 2

Example Row 2

Example Row 2

Example Row 3

Example Row 3

Example Row 3

Example Row 4

Example Row 4

Example Row 4

How to create a table:

  • Type /table and press Enter

  • Choose the number of rows and columns

  • Tables are created with a header row by default

Editing tables:

  • Click any cell to edit its content

  • Use Tab to move to the next cell

  • Use Shift+Tab to move to the previous cell

  • Right-click for options to add/remove rows and columns

Styling:

  • Header row is automatically styled

  • Tables are responsive and scroll horizontally on mobile

Code Block

Add syntax-highlighted code snippets to your posts. Supports 50+ programming languages with automatic syntax highlighting.

package main

import "fmt"


func main() {
fmt.Println("Hello, World!")
}

How to add code:

  • Type /code and press Enter

  • Select your programming language from the dropdown

  • Paste or type your code

Supported languages include:JavaScript, TypeScript, Python, Go, Rust, Java, C++, Ruby, PHP, SQL, HTML, CSS, Bash, JSON, YAML, Markdown, and many more.

Features:

  • Automatic syntax highlighting

  • Language label displayed in the corner

  • Preserves indentation and formatting

  • Copy button for readers (on the published site)

💡 Tip: Choose the correct language for accurate syntax highlighting. Use "Plain Text" if your language isn't listed.

Horizontal Rule

Insert a visual divider to separate sections of your content. Useful for breaking up long posts or indicating topic changes.

How to add a divider:

  • Type /divider and press Enter

  • Or type --- on a new line and press Enter

The divider renders as a subtle line that adapts to your blog's theme.

CTA Button

Create eye-catching call-to-action buttons to drive reader engagement. Use them to link to products, sign-up pages, downloads, or any important destination.

How to create a button:

  • Type /button and press Enter

  • Enter the button text

  • Add the destination URL

  • Choose primary or secondary style

Button styles:

  • Primary - Bold, filled button for main actions

  • Secondary - Outlined button for secondary actions

Alignment options:

  • Left, center, or right alignment

🎯 Tip: Use action-oriented text like "Get Started," "Download Now," or "Learn More" for better click-through rates.

Callout

Create attention-grabbing callout sections with a heading, description, and call-to-action buttons. Perfect for newsletter sign-ups, special announcements, or promotional content.

This is a big heading for the callout section of the page
This is a subheading for the callout section
Main ButtonSecondary

How to create a callout:

  • Type /callout and press Enter

  • Add a heading and optional subheading

  • Add one or two CTA buttons

  • Choose your preferred style

Callout elements:

  • Heading - Main message (required)

  • Subheading - Supporting text (optional)

  • Primary Button - Main call-to-action

  • Secondary Button - Alternative action (optional)

Features:

  • Full-width design that stands out from regular content

  • Customizable button text and links

  • Responsive layout

Post Card

Link to other posts from your Superblog with a rich preview card. Great for cross-promoting related content and keeping readers engaged.

Can I use superblog on a subdirectory or subfolder?

Can I use superblog on a subdirectory or subfolder?

Yes, you can! Just connect your domain in the superblog dashboard to get instructions.

How to add a post card:

  • Type /post and press Enter

  • Search for a post by title

  • Click to insert the card

Card displays:

  • Post thumbnail image

  • Post title

  • Category (if assigned)

  • Excerpt preview

The card links directly to the post, making it easy for readers to discover more of your content.

📝 Note: Post cards show the content as it was when the card was created. If you update the linked post's title or excerpt, you'll need to re-insert the card to show the changes.

Embed from URL

Embed content from popular platforms using just a URL. The editor automatically detects the platform and creates the appropriate embed.

How to embed:

  • Type /embed and press Enter

  • Paste the URL from a supported platform

Platforms examples:

  • Audio: Spotify, SoundCloud, Apple Podcasts

  • Video: Vimeo, Loom, Wistia

  • Design: Figma, CodePen, CodeSandbox

  • Documents: Google Docs, Google Sheets, Google Slides

  • Other: Calendly, Typeform, Airtable, and more

Simply paste the share URL from any platform and the embed will be created automatically.

Custom HTML / Embed Code

Insert raw HTML, embed codes, or iframes for complete flexibility. Use this for third-party widgets, custom scripts, or any content not supported by other widgets.

Also, if you are not able to embed a particular URL then you can use this widget to embed it into your blog post by pasting the full embed code.

How to add custom HTML:

  • Type /html and press Enter

  • Paste your HTML code or embed snippet

Common use cases:

  • Third-party newsletter signup forms

  • Custom widgets from other services

  • Iframe embeds

  • Custom JavaScript snippets

  • Analytics or tracking codes

Features:

  • Live preview in the editor

  • Supports any valid HTML

  • Scripts execute on the published page

⚠️ Caution: Only use HTML from trusted sources. Malicious code could affect your site's security or performance.

Markdown

Convert Markdown content to HTML and insert it into your post. Useful for importing content or for writers who prefer Markdown syntax.

How to use:

  • Type /markdown and press Enter

  • Paste or type your Markdown content

  • Click Insert to convert and add to your post

Supported Markdown features:

  • Headings (# H1, ## H2, etc.)

  • Bold, italic, strikethrough

  • Links and images

  • Ordered and unordered lists

  • Blockquotes

  • Code blocks and inline code

  • Tables

The Markdown is converted to HTML and inserted as regular content that you can continue editing.

Help

Type /help in the editor to see all available widgets and shortcuts.

Previous Article Intro
Powered by Superblog